МЕГАПЛАН - создаем виджет

Все оказалось намного сложнее чем я думал изначально. Задача превратилась в фарс, фарс - в мучение, а мучение вылилось в Ад. А надо то было всего то добавить к клиенту в мегаплане  аудиоплеер с записью телефонного разговора. Скажу честно, апи мегалпана (далее мп) мне понравился. Он прост, красив.

В идеале надо получить это:

Работа бодро закипела. На улице стоял июль. И как же здорово программировать с открытом окном ночью слушая пение птиц, стрекот сверчков и время от времени УБИВАЯ наглых комаров пикирующих как спитфаеры.

Как обычно бывает у программистов-фрилансеров, в задаче появляется какой нибудь НЮАНС. Оказалось АПИ МП убирал теги. Даже ссылку нельзя было отправлять.  И после долгой переписки с ТП  узнал что есть механизм виджетов. 

1. Идем сюда https://xxx.megaplan.ru/settings/application

2. Нажимаем СОЗДАТЬ ПРИЛОЖЕНИЕ

3. Вводим имя, Ок

4. Нажимаем создать виджет.

5. В окне пишем JS-JQuery код.

В итоге задача состаляа из следующиъ итераций:

1. Нас стороне нашего сервера, где хранится аудио,  добавить к клиенту задачу,  получиьт ID задачи, закрыть задачау и в комментариях добавить ссылку на аудио файл, такаого формата:

site.ru/audio/1.mp3;название аудио файла|site.ru/audio/2.mp3;название аудио файла 2

2.При удачной зписи отмечает у себя в БД что все круто. Ибо процесс добавления записи занимает около 4-5 секунд. А записей более 30000. 

3. На стороен МП виджет берет эту запись, и приводит в аудиоплеерский вид.

4. Профит. Клиент доволен. Ты доволен (ибо приходит смска о том что бабосы переведены на карточку) + жена довольна. Да все довольны.

Если кому интересно вот код

$(document).ready(function(){
 deen812_init();
 setTimeout(function(){deen812_init()},2000);
 
});
function log2(t){
 $('.b-journal').prepend('
->'+t+'');
}
function deen812_init(){
 var i = 0;
 $('.journal-entry-body').each(function(i,elem){
  i++;
  var text = $(this).find('p').text();
  // log2(text.indexOf("mp3"));
  if( text.indexOf("mp3") > 0) {
   
   var audiotext = '';
   var arr1 =text.split('|');
   for(var i = 0 ; i < arr1.length; i++){
    var arr = arr1[i].split(';');
    audiotext+=""+arr[1]+" "+
    "


";
   }
   $(this).html(audiotext);
  }  
 })
    
}

a9n.subscribe(this,'componentDidMount', function(){
 deen812_init();
})
a9n.subscribe(this,'componentWillUnmount', function(){
 deen812_init();
})