Кейс: кастомизация для обзвона с оператором

Интересный кейс подготовил наш отдел разработки. Для одного из клиентов наши специалисты реализовали систему автоматического обзвона с переключением на оператора. Это распространённое решение среди наших клиентов, необычной стала разработка специального окна, содержащего информацию для оператора об абоненте.

Информационное окно оператора

Суть конфигурации

Call Office производит автоматический обзвон, при этом программа установлена на компьютере оператора. В момент соединения, программа переключает связь на звуковую карту и открывает специальное окно, в котором можно внести и сохранить статус звонка и назначить дату повторного звонка. Внесённые данные сохраняются в локальную базу данных.

Стандартные средства записи результата звонка были отключены, сохранение данных в БД было реализовано командами. В зависимости от выбранного оператором статуса звонка, активировалась соответствующая команда и записывала результат SQL-запросом.

Информационное окно в этом решении содержит простейшую форму с возможностью выбора статуса звонка из выпадающего списка. Если выбран статус, предполагающий повторный контакт — открывается дополнительное поле формы, позволяющее выбрать дату (так называемый DatePicker).

Код информационного окна

На случай, если это решение заинтересовало вас, мы выкладываем код формы, вы можете кастомизировать его и использовать в собственной конфигурации.

JavaScript-код:

<script>
                   // jQuery уже подключен, поэтому можно подключать дополнительны стили и скрипты так:

//   $('head').append ('<link rel="stylesheet" href="путь до css файла">');
//   $('head').append ('<script src="путь до js файла">');

	function Show (Id, IsShow)
	{
      document.getElementById (Id).style.display = (IsShow)? 'block': 'none';
   }

   function OnSelect (Select)
   {
      Show ('DivComment', false);
      Show ('DivDateOkonchaniaStrahovki', false);
      Show ('DivDateTimePerezvonit', false);

switch (Select.value) {

         case 'ZastrahDate':
            Show ('DivDateOkonchaniaStrahovki', true);
            break;

         case 'NaRaschet':
            Show ('DivComment', true);
            break;

         case 'ShortPerezvonLess2Days':
         case 'LongPerezvonMore2Days':
            Show ('DivDateTimePerezvonit', true);
            break;
      }
   }

   function SetCurrentDate (Id)                           // Устанавливаем текущую дату
   {
      var CurrentDate = new Date ();

      Id.val (CurrentDate.getDate () + '.' + (CurrentDate.getMonth () + 1) + '.' + CurrentDate.getFullYear ());
   }

   function SetCurrentDateTime (Id)
   {
      var CurrentDate = new Date ();

      Id.val (CurrentDate.getDate () + '.' + (CurrentDate.getMonth () + 1) + '.' + CurrentDate.getFullYear () + ' ' +
              CurrentDate.getHours () + ':' + CurrentDate.getMinutes () + ':' + CurrentDate.getSeconds ());
   }

   function CheckDate (Id)                                // Функция проверки даты
   {
      var Value = Id.val ();
      if (Value == '') return true;

      var Reg = /^(\d{1,2})(?:\s|\-|\/|\.|\:)(\d{1,2})(?:\s|\-|\/|\.|\:)(\d{2}|\d{4})$/.exec (Value);

      if (Reg !== null) {

         var Day   = Reg[1];
         var Month = Number (Reg[2] - 1);
         var Year  = Reg[3].length == 2 ? '20' + Reg[3] : Reg[3];

         var CheckDate = new Date (Year, Month, Day);

         if (CheckDate.toString    () !== 'Invalid Date' &&
             CheckDate.getMonth    () == Month &&
             CheckDate.getFullYear () == Year &&
             CheckDate.getDate     () == Day) {
            return true;
         }
      }

      alert ('Неверно указана дата');

      Id.focus ();

      return false;
   }

   function CheckDateTime (Id)                              // Функция проверки даты и времени
   {
      var Value = Id.val ();
      if (Value == '') return true;

      var Reg = /^(\d{1,2})(?:\s|\-|\/|\.|\:)(\d{1,2})(?:\s|\-|\/|\.|\:)(\d{2}|\d{4})\s+(\d{1,2})(:?\s|\-|\/|\.|\:)(\d{1,2})(?:\s|\-|\/|\.|\:)(\d{1,2})$/.exec (Value);

      if (Reg !== null){

         var Day   = Reg[1];
         var Month = Number (Reg[2] - 1);
         var Year  = Reg[3].length == 2 ? '20' + Reg[3] : Reg[3];
         var Hours   = Reg[4];
         var Minutes = Reg[5];
         var Seconds = Reg[6];

         var CheckDate = new Date (Year, Month, Day, Hours, Minutes, Seconds);

         if (CheckDate.toString    () !== 'Invalid Date' &&
             CheckDate.getMonth    () == Month &&
             CheckDate.getFullYear () == Year &&
             CheckDate.getDate     () == Day &&
             CheckDate.getHours    () == Hours &&
             CheckDate.getMinutes  () == Minutes &&
             CheckDate.getSeconds  () == Seconds) {
            return true;
         }
      }

      alert ('Неверно указана дата и/или время');

      Id.focus ();

      return false;
   }

   function OnSaveNew ()
   {
      switch ($('#Status').val ()){
         case 'ZastrahDate':
            if (!CheckDate ($('#UF_DateOkonchaniaStrahovki'))) return;
            break;

         case 'ShortPerezvonLess2Days':
         case 'LongPerezvonMore2Days':
	         if (!CheckDateTime ($('#UF_DateTimePerezvonit'))) return;
  	         break;
      }

      if (IsTest) {                                         // Если в режиме демонстрации содержимого окна
         alert ('Status: ' + $('#Status option:selected').text ());
      }
      else {

         SaveVariables ();                                  // Сохраняем поля формы в переменные сценария

         Script.AddVariable ('Status', $('#Status option:selected').text ());

         OnSave ();                                         // Вызываем стандартное поведение при сохранении результата звонка
      }
   }

   document.getElementById ('Save').onclick = OnSaveNew;    // Подменяем функцию сохранения результата звонка на свою
   document.getElementById ('Save').firstChild.data = 'Сохранить';

</script>

HTML-код формы:

<div style="width:20px; height:230px;">
	<label for="Status">Статус:</label>
	<select id="Status" onchange="OnSelect (this)">
		<option value="ZastrahDate">Застрахован (дата)</option>
		<option value="ZastrahNotDate">Застрахован (без даты)</option>
		<option value="NaRaschet">На расчет</option>
		<option value="ShortPerezvonLess2Days">Короткий перезвон (меньше 2 дней)</option>
		<option value="LongPerezvonMore2Days">Длинный перезвон (больше 2 дней)</option>
		<option value="Escape">Отказ</option>
		<option value="Silent">Тишина/автоответ/занят/срыв</option>
	</select>
	<div id="DivDateOkonchaniaStrahovki" style="padding-top: 3px;">
		<label for="UF_DateOkonchaniaStrahovki" style="display: inline-block;">Дата окончания страховки:</label>
		<input type="text" id="UF_DateOkonchaniaStrahovki" maxlength="10" style="width:72px;">
		<button title="Установить текущую дату" onclick="SetCurrentDate ($('#UF_DateOkonchaniaStrahovki'))" style="width:25px">T</button>
	</div>
	<div id="DivDateTimePerezvonit" style="display: none; padding-top: 3px;">
		<label for="UF_DateTimePerezvonit" style="display: inline-block;">Перезвонить:</label>
		<input type="text" id="UF_DateTimePerezvonit" maxlength="19" style="width:134px;">
		<button title="Установить текущую дату и время" onclick="SetCurrentDateTime ($('#UF_DateTimePerezvonit'))" style="width:25px">T</button>
	</div>
	<div id="DivComment" style="display:none; padding-top: 3px;">
		<label for="UF_Comment" style="display: block;">Комментарий:</label>
		<textarea id="UF_Comment" cols="45" rows="5"></textarea>
	</div>
</div>

Вставьте этот код в поле «Показывать всплывающее окно» в настройке «Диспетчера переключений».

Понравилась статья? Расскажите друзьям!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *