MAth-Cloud-3.0.0/www.ipsocloud.com/webapp_webpack/src/pages/report-config.f7.html

<template>
  <div class="page" data-name="home-report-config">

    <div class="iimt-top-container iimt-hexpand">

      <div class="home-patient-data-grid" style="flex-direction: row; width: calc(100% - 32px); padding-bottom: 0px; height: calc(100% - 16px);">

        <div class="iimt-frame" style="height: calc(100% - 240px - 180px - 16px);">
          <div class="title"><span>{{js "global.tr[global.lang].report.picSettings"}}</span></div>
          <div class="content" style="margin-top:8px; flex-direction: col; justify-content: flex-start; align-items: flex-start;">

            <div class="flex row" style="width:100%; height:100%;">

              <div class="flex row" style="width:35%; height:100%;">
                <div class="flex row centerh" style="width: 100%; height: calc(100% - 16px);">
                  <canvas id="canvas-right" style="margin-right: 32px;">
                  </canvas>
                  <div id="thumb-right" class="flex column" style="flex-wrap:nowrap; height:100%; width:120px; justify-content: flex-start; background-color:#eee; overflow-x: hidden; overflow-y: scroll;">
                  {{#each media}}
                    {{#js_if "this.side=='right'"}}

                      {{#js_if "this.metrics.fps"}}
                        {{#js_if "this.filename.indexOf('.dicom')===-1"}}
                          <a href="#" @click="selectMedia('{{ID}}', 'right')" class="report-media" id="{{ID}}"><video style="width:92px; padding:4px;" src="{{js "app.data.config.storageBaseURL+'/media/'+app.data.patient.visitID+'/'+this.filename"}}"></video></a>
                        {{else}}
                          <a href="#" @click="selectMedia('{{ID}}', 'right')" class="report-media" id="{{ID}}"><video style="width:92px; padding:4px;" src="{{js "app.data.config.storageBaseURL+'/media/'+app.data.patient.visitID+'/'+this.filename.replace('.dicom','.mp4')"}}"></video></a>
                        {{/js_if}}
                      {{else}}
                        {{#js_if "this.filename.indexOf('.dicom')===-1"}}
                          <a href="#" @click="selectMedia('{{ID}}', 'right')" class="report-media" id="{{ID}}"><img style="width:92px; padding:4px;" src="{{js "app.data.config.storageBaseURL+'/media/'+app.data.patient.visitID+'/'+this.filename"}}"></a>
                        {{else}}
                          <a href="#" @click="selectMedia('{{ID}}', 'right')" class="report-media" id="{{ID}}"><img style="width:92px; padding:4px;" src="{{js "app.data.config.storageBaseURL+'/media/'+app.data.patient.visitID+'/'+this.filename.replace('.dicom','.jpeg')"}}"></a>
                        {{/js_if}}
                      {{/js_if}}

                    {{/js_if}}
                  {{/each}}
                  </div>
                </div>
              </div>

              <div class="flex column" style="justify-content: space-around; align-items: center; width:30%; height: 100%;">
                <span>{{patient.firstname}} {{patient.lastname}}</span>
                <div class="flex column">
                  <a href="#" @click="report2" class="button iimt-button disabled" style="margin-bottom:16px;" id="report-2">{{js "global.tr[global.lang].report.imtReport"}}</a>
                  <a href="#" @click="report6" class="button iimt-button" id="report-6">{{js "global.tr[global.lang].report.sixReport"}}</a>
                </div>
                <div class="flex column" style="align-items: center;">
                  <span>{{js "global.tr[global.lang].report.abacusSelection"}}</span>
                  <div class="list no-hairlines-md" style="margin:0;">
                    <ul>
                      <li class="item-content item-input">
                        <div class="item-inner">
                          <div class="item-input-wrap input-dropdown-wrap">
                            <select id="abacus">
                              <option value="PARC" {{js "(lang=='fr')?'selected':''"}}>{{js "global.tr[global.lang].report.PARC"}}</option>
                              <option value="ARIC_CAUCASIAN" {{js "(lang=='en' && this.patient.race=='white')?'selected':''"}}>{{js "global.tr[global.lang].report.ARIC_CAUCASIAN"}}</option>
                              <option value="ARIC_AFRICAN" {{js "(lang=='en' && this.patient.race=='african')?'selected':''"}}>{{js "global.tr[global.lang].report.ARIC_AFRICAN"}}</option>
                            </select>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>

              <div class="flex row" style="width:35%; height:100%;">
                {{#js_if "this.area!='abdo'"}}
                <div class="flex row centerh" style="width: 100%; height: calc(100% - 16px);">
                  <div id="thumb-left" class="flex column" style="flex-wrap:nowrap; height:100%; width:120px; justify-content: flex-start; background-color:#eee; overflow-x: hidden; overflow-y: scroll;">
                  {{#each media}}
                    {{#js_if "this.side=='left'"}}

                      {{#js_if "this.metrics.fps"}}
                        {{#js_if "this.filename.indexOf('.dicom')===-1"}}
                          <a href="#" @click="selectMedia('{{ID}}', 'left')" class="report-media" id="{{ID}}"><video style="width:92px; padding:4px;" src="{{js "app.data.config.storageBaseURL+'/media/'+app.data.patient.visitID+'/'+this.filename"}}"></video></a>
                        {{else}}
                          <a href="#" @click="selectMedia('{{ID}}', 'left')" class="report-media" id="{{ID}}"><video style="width:92px; padding:4px;" src="{{js "app.data.config.storageBaseURL+'/media/'+app.data.patient.visitID+'/'+this.filename.replace('.dicom','.mp4')"}}"></video></a>
                        {{/js_if}}
                      {{else}}
                        {{#js_if "this.filename.indexOf('.dicom')===-1"}}
                          <a href="#" @click="selectMedia('{{ID}}', 'left')" class="report-media" id="{{ID}}"><img style="width:92px; padding:4px;" src="{{js "app.data.config.storageBaseURL+'/media/'+app.data.patient.visitID+'/'+this.filename"}}"></a>
                        {{else}}
                          <a href="#" @click="selectMedia('{{ID}}', 'left')" class="report-media" id="{{ID}}"><img style="width:92px; padding:4px;" src="{{js "app.data.config.storageBaseURL+'/media/'+app.data.patient.visitID+'/'+this.filename.replace('.dicom','.jpeg')"}}"></a>
                        {{/js_if}}
                      {{/js_if}}

                    {{/js_if}}
                  {{/each}}
                  </div>
                  <canvas id="canvas-left" style="margin-left: 32px;">
                  </canvas>
                </div>
                {{/js_if}}
              </div>

            </div>

          </div>
        </div>      

        <div class="iimt-frame" style="height: 240px;">
          <div class="title"><span>{{js "global.tr[global.lang].report.repSettings"}}</span></div>
          <div class="content" style="margin-top:8px; flex-direction: col; justify-content: flex-start; align-items: flex-start;">

            <div style="width: 100%; height: auto; display: flex; flex-shrink: 1; flex-direction: row;">

              <div class="list no-hairlines-md" style="width: 50%; margin:0;">
                <ul>
                  <li class="item-content item-input">
                    <div class="item-media">
                      <i class="icon demo-list-icon"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title item-label">{{js "global.tr[global.lang].report.indications"}}</div>
                      <div class="item-input-wrap">
                        <textarea id="indications" placeholder="{{js "global.tr[global.lang].report.indications"}}" style="height: 70px;"></textarea>
                      </div>
                    </div>
                  </li>
                  <li class="item-content item-input">
                    <div class="item-media">
                      <i class="icon demo-list-icon"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title item-label">{{js "global.tr[global.lang].report.clinical"}}</div>
                      <div class="item-input-wrap">
                        <textarea id="clinical" placeholder="{{js "global.tr[global.lang].report.clinical"}}" style="height: 70px;"></textarea>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>

              <div class="list no-hairlines-md" style="width: 50%; margin:0;">
                <ul>
                  <li class="item-content item-input">
                    <div class="item-media">
                      <i class="icon demo-list-icon"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title item-label">{{js "global.tr[global.lang].report.report"}}</div>
                      <div class="item-input-wrap">
                        <textarea id="report" placeholder="{{js "global.tr[global.lang].report.report"}}" style="height: 170px;"></textarea>
                      </div>
                    </div>
                  </li>
              </div>

            </div>

          </div>
        </div>      

        <div style="width: 100%; height: calc(164px - 16px); display: flex; flex-shrink: 1; flex-direction: row; margin-top: 16px;">

          <div class="iimt-frame" style="height: auto; margin-right:8px;">
            <div class="title"><span>{{js "global.tr[global.lang].report.recipients"}}</span></div>
            <div class="content" style="margin-top:0px; flex-direction: row; justify-content: flex-start; align-items: flex-start; padding:0px;">

              <div class="flex column centerh" style="width:calc(50% - 32px); margin-left:16px; margin-right:16px;">
                <div class="list inline-labels no-hairlines-md" style="margin:0;">
                  <ul>
                    <li class="item-content item-input">
                      <div class="item-inner">
                        <div class="item-input-wrap">
                          <input type="email" placeholder="{{js "global.tr[global.lang].form.email"}}" id="email-input">
                        </div>
                      </div>
                    </li>              
                  </ul>
                </div>
                <a href="#" class="button iimt-button" style="width: 100px;" @click="addEmail">{{js "global.tr[global.lang].report.add"}}</a>
              </div>

              <div class="flex column" style="width:calc(50% - 32px); height:100%; margin-left:16px; margin-right:16px;">
                <div class="list simple-list no-hairlines-md" style="margin:0; overflow-y: scroll; height: 140px; overflow-x: hidden;" id="email-list">
                  <ul>
                  </ul>
                </div>
              </div>

            </div>
          </div>      
  
          <div class="iimt-frame" style="height: auto; margin-left:8px; width:500px;">
            <div class="title"><span>{{js "global.tr[global.lang].report.generate"}}</span></div>
            <div class="content" style="margin-top:8px; flex-direction: row; justify-content: space-around; align-items: center;">
              <a href="#" id="downloadLink" class="flex column" style="align-items: center;" @click="downloadReport">
                <img src="static/images/PDF.png" style="width:50px; height:50px;">
                <span>{{js "global.tr[global.lang].report.download"}}</span>
              </a>
              <a href="#" id="sendLink" class="flex column" style="align-items: center;" @click="send">
                <img src="static/images/send.png" style="width:50px; height:50px;">
                <span>{{js "global.tr[global.lang].report.send"}}</span>
              </a>
            </div>
          </div>      

        </div>
        
      </div>

    </div>

  </div>
</template>
<script>
  export default {
    on: {
      pageInit: function() {
        this.reportType = 2;

        this.media6 = {
          right: [],
          left: []
        }

        let that = this;
        let ch = parseInt($$('#thumb-right').height());
        let cw = parseInt(ch * 209 / 466);

        let leftLoaded = false, rightLoaded = false;

        // canvas right
        {
          $$('#canvas-right').css({'width': cw+'px'});
          $$('#canvas-right').attr('width', cw);
          $$('#canvas-right').attr('height', ch);

          let ctx = $$('#canvas-right')[0].getContext('2d');
          let bkgR = new Image();
          bkgR.onload=function() {
            ctx.drawImage(bkgR, 0, 0, cw, ch);
            for(let i=0; i<that.media.length; i++) {
              if(that.media[i].side=='right') {
                let src = 'static/images/area_'+that.area+'_'+(that.media[i].side=='right'?'R':(that.media[i].side=='left'?'L':''))+'_'+that.media[i].location+'_alpha.png';
                let locImage = new Image();
                locImage.onload=function() {
                  ctx.drawImage(locImage, 0, 0, cw, ch);
                }
                locImage.src = src;
              }
            }

            rightLoaded = true;
            if(leftLoaded) {
              that.postInit();
            }
          }
          bkgR.src = 'static/images/area_'+that.area+'_R'+'.png';
        }

        // canvas left
        if(this.area!='abdo')
        {
          $$('#canvas-left').css({'width': cw+'px'});
          $$('#canvas-left').attr('width', cw);
          $$('#canvas-left').attr('height', ch);

          let ctx = $$('#canvas-left')[0].getContext('2d');
          let bkgL = new Image();
          bkgL.onload=function() {
            ctx.drawImage(bkgL, 0, 0, cw, ch);
            for(let i=0; i<that.media.length; i++) {
              if(that.media[i].side=='left') {
                let src = 'static/images/area_'+that.area+'_'+(that.media[i].side=='right'?'R':(that.media[i].side=='left'?'L':''))+'_'+that.media[i].location+'_alpha.png';
                let locImage = new Image();
                locImage.onload=function() {
                  ctx.drawImage(locImage, 0, 0, cw, ch);
                }
                locImage.src = src;
              }
            }

            leftLoaded = true;
            if(rightLoaded) {
              that.postInit();
            }
          }
          bkgL.src = 'static/images/area_'+that.area+'_L'+'.png';
        }

        // emails
        for(let i=0; i<this.recipient.length; ++i) {
          this.addEmailToList(this.recipient[i].email, this.recipient[i].ID);
        }
      },
      pageBeforeOut: function() {
      }
    },
    methods: {
      postInit: function() {
        console.log("postInit");
        this.foundRightIMTfar = false;
        this.foundLeftIMTfar = false;
        for(let i=0; i<this.media.length; i++) {
          if(this.media[i].side=='left') {
            if(!this.foundLeftIMTfar) {
              for(let m=0;m<this.media[i].measure.length;m++) {
                if(this.media[i].measure[m].type=='imt' && this.media[i].measure[m].computation.nearWall==false) {
                  this.foundLeftIMTfar=this.media[i].ID;
                  $$('.report-media[id="'+this.foundLeftIMTfar+'"]').addClass('active');
                }
              }
            }
          }
          if(this.media[i].side=='right') {
            if(!this.foundRightIMTfar) {
              for(let m=0;m<this.media[i].measure.length;m++) {
                if(this.media[i].measure[m].type=='imt' && this.media[i].measure[m].computation.nearWall==false) {
                  this.foundRightIMTfar=this.media[i].ID;
                  $$('.report-media[id="'+this.foundRightIMTfar+'"]').addClass('active');
                }
              }
            }
          }
        }
        console.log("foundRightIMTfar", this.foundRightIMTfar);
        console.log("foundLeftIMTfar", this.foundLeftIMTfar);
        if(this.reportType == 2 && (!this.foundRightIMTfar || !this.foundLeftIMTfar)) {
          this.notReadyNotif();
          return;
        }
      },
      notReadyNotif: function() {
        app.notification.create({
          icon: '<i class="icon material-icons">info</i>',
          title: global.tr[global.lang].topLevel.notification.title,
          text: global.tr[global.lang].topLevel.warning.report_missing_data,
          closeTimeout: 3000,
          closeButton: true,
        }).open();
      },
      selectMedia: function(ID, side) {
        console.log(ID, side);
        if(this.reportType == 2) {
          $$('#thumb-'+side+' a').removeClass('active');
          if(side=='left') {
            this.foundLeftIMTfar=false;
          }
          else if(side=='right') {
            this.foundRightIMTfar=false;
          }

          for(let i=0; i<this.media.length; i++) {
            for(let m=0;m<this.media[i].measure.length;m++) {
              if(this.media[i].ID == ID && this.media[i].measure[m].type=='imt' && this.media[i].measure[m].computation.nearWall==false) {
                if(this.media[i].side=='left') {
                  this.foundLeftIMTfar = ID;
                  $$('.report-media[id="'+ID+'"]').addClass('active');
                  break;
                }
                else if(this.media[i].side=='right') {
                  this.foundRightIMTfar = ID;
                  $$('.report-media[id="'+ID+'"]').addClass('active');
                  break;
                }
              }
            }
          }
          console.log("foundRightIMTfar", this.foundRightIMTfar);
          console.log("foundLeftIMTfar", this.foundLeftIMTfar);
          if(!this.foundRightIMTfar || !this.foundLeftIMTfar) {
            this.notReadyNotif();
            return;
          }
        }
        else {
          if(side=='right') {
            let found = false;
            if($$('.report-media[id="'+ID+'"]').hasClass('active')) {
              for(let i=0; i<this.media6.right.length; i++) {
                if(this.media6.right[i]==ID) {
                  this.media6.right.splice(i,1);
                  found = true;
                  break;
                }
              }
            }
            if(!found) {
              this.media6.right.push(ID);
            }
            if(this.media6.right.length==4) {
              this.media6.right.splice(0,1);
            }
            $$('#thumb-right a').removeClass('active');
            for(let i=0; i<this.media6.right.length; i++) {
              $$('.report-media[id="'+this.media6.right[i]+'"]').addClass('active');
            }
          }
          else if(side=='left') {
            let found = false;
            if($$('.report-media[id="'+ID+'"]').hasClass('active')) {
              for(let i=0; i<this.media6.left.length; i++) {
                if(this.media6.left[i]==ID) {
                  this.media6.left.splice(i,1);
                  found = true;
                  break;
                }
              }
            }
            if(!found) {
              this.media6.left.push(ID);
            }
            if(this.media6.left.length==4) {
              this.media6.left.splice(0,1);
            }
            $$('#thumb-left a').removeClass('active');
            for(let i=0; i<this.media6.left.length; i++) {
              $$('.report-media[id="'+this.media6.left[i]+'"]').addClass('active');
            }
          }
        }
      },
      report2: function() {
        $$('#report-2').addClass('disabled');
        $$('#report-6').removeClass('disabled');
        this.reportType = 2;
        $$('#thumb-right a').removeClass('active');
        $$('#thumb-left a').removeClass('active');
        this.postInit();
      },
      report6: function() {
        this.media6.right = [];
        this.media6.left = [];
        $$('#report-6').addClass('disabled');
        $$('#report-2').removeClass('disabled');
        this.reportType = 6;
        $$('#thumb-right a').removeClass('active');
        $$('#thumb-left a').removeClass('active');
      },
      addEmail: function() {
        let that = this;
        let email = $$('#email-input').val();
        if(email=='') {
          return;
        }
        let data = {
          email: email,
          apiKey: ''
        };
        app.preloader.show();
        app.request.post(app.data.config.apiBaseURL + '/report/mail-add/', data, function (data) {
          console.log('report/mail-add', data);
          app.preloader.hide();
          if (data.result == 'ERROR') {
            switch (data.reason) {
              case 'denied':
                app.methods.signout(global.tr[global.lang].topLevel.warning.disconnected);
                break;
              default:
                app.dialog.alert(global.tr[global.lang].topLevel.error.internal_error);
                break;
            }
          }
          else {
            that.addEmailToList(email, data.ID);
          }
        }, function (data) {
          console.log('error', data);
        }, 'json');
      },
      addEmailToList: function(email, ID) {
        $$('#email-list').append(
          '<li style="padding:0;" id="email-'+ID+'">'+
            '<div class="item-content" style="width: 100%;">'+
              '<div class="item-media">'+
                '<label class="toggle">'+
                  '<input class="activeRecipient" type="checkbox" data-email="'+email+'">'+
                  '<span class="toggle-icon"></span>'+
                '</label>'+                
              '</div>'+
              '<div class="item-inner">'+
                '<div class="item-title">'+email+'</div>'+
                '<div class="item-after"><a href="#" class="button iimt-button" data-email="'+email+'">'+global.tr[global.lang].report.delete+'</a></div>'+
              '</div>'+
            '</div>'+
          '</li>'
        );
        $$('#email-input').val('');
        $$('#email-list li a').on('click', function(e) {
          let data = {
            ID: ID,
            apiKey: ''
          };
          app.preloader.show();
          app.request.post(app.data.config.apiBaseURL + '/report/mail-delete/', data, function (data) {
            console.log('report/mail-delete', data);
            app.preloader.hide();
            if (data.result == 'ERROR') {
              switch (data.reason) {
                case 'denied':
                  app.methods.signout(global.tr[global.lang].topLevel.warning.disconnected);
                  break;
                default:
                  app.dialog.alert(global.tr[global.lang].topLevel.error.internal_error);
                  break;
              }
            }
            else {
              $$('#email-'+ID).remove();
            }
          }, function (data) {
            console.log('error', data);
          }, 'json');
        });        
      },
      getSelectedMedia: function() {
        let mediaList = [];
        if(this.reportType == 2) {
          mediaList.push(this.foundRightIMTfar);
          mediaList.push(this.foundLeftIMTfar);
        }
        else if(this.reportType == 6) {
          mediaList = mediaList.concat(this.media6.right);
          mediaList = mediaList.concat(this.media6.left);
        }
        return mediaList;
      },
      sendMAIL: function(mediaList, emails) {
        let postData = {
          emails: emails,
          type: this.reportType,
          abacus: $$('#abacus').val(),
          indications: $$('#indications').val(),
          clinical: $$('#clinical').val(),
          report: $$('#report').val(),
          visitID: app.data.patient.visitID,
          mediaList: mediaList,
          lang: global.lang,
          subject: global.tr[global.lang].report.mailSubject,
          message: global.tr[global.lang].report.mailBody,
          apiKey: ''
        };
        app.preloader.show();
        app.request.post(app.data.config.apiBaseURL + '/report/pdf-mail/', postData, function (data) {
          console.log('report/pdf-mail', data);
          app.preloader.hide();
          if (data.result == 'ERROR') {
            switch (data.reason) {
              case 'denied':
                app.methods.signout(global.tr[global.lang].topLevel.warning.disconnected);
                break;
              default:
                app.dialog.alert(global.tr[global.lang].topLevel.error.internal_error);
                break;
            }
          }
          else {
            app.dialog.alert(global.tr[global.lang].topLevel.notification.mail_sent);
          }
        }, function (data) {
          console.log('error', data);
        }, 'json');
      },
      sendPACS: function(mediaList) {
        let postData = {
          type: this.reportType,
          abacus: $$('#abacus').val(),
          indications: $$('#indications').val(),
          clinical: $$('#clinical').val(),
          report: $$('#report').val(),
          visitID: app.data.patient.visitID,
          mediaList: mediaList,
          lang: global.lang,
          apiKey: ''
        };
        app.preloader.show();
        app.request.post(app.data.config.apiBaseURL + '/report/pdf-pacs/', postData, function (data) {
          console.log('report/pdf-pacs', data);
          app.preloader.hide();
          if (data.result == 'ERROR') {
            switch (data.reason) {
              case 'denied':
                app.methods.signout(global.tr[global.lang].topLevel.warning.disconnected);
                break;
              default:
                app.dialog.alert(global.tr[global.lang].topLevel.error.internal_error);
                break;
            }
          }
          else {
            app.dialog.alert(global.tr[global.lang].topLevel.notification.pacs_sent);
          }
        }, function (data) {
          console.log('error', data);
        }, 'json');
      },
      send: function() {
        if(this.reportType == 2 && (!this.foundRightIMTfar || !this.foundLeftIMTfar)) {
          this.notReadyNotif();
          return;
        }
        if(this.reportType == 6 && !(this.media6.right.length==3 && this.media6.left.length==3)) { 
          this.notReadyNotif();
          return;
        }

        let mediaList = this.getSelectedMedia();

        let that = this;
        let buttons = [];
        let buttonsAction = [];
        if(this.pacs && this.pacs.serverAddress != '') {
          buttons.push({text: 'PACS: '+this.pacs.serverAddress});
          buttonsAction.push('pacs');
        }

        let emails = [];
        for(let i=0; i<$$('.activeRecipient:checked').length; i++)  {
          emails.push($$($$('.activeRecipient:checked')[i]).data('email'));
        }
        let nbrcp = $$('.activeRecipient:checked').length;
        if(nbrcp > 0) {
          buttons.push({text: 'E-mail: '+nbrcp+' selected'});
          buttonsAction.push('email');
        }
        if(!buttons.length) {
          app.dialog.alert(global.tr[global.lang].topLevel.warning.noRecipientNoPacs);
        }
        else {
          if(buttons.length==2) {
            buttons.push({text: 'E-mail & PACS'});
            buttonsAction.push('both');
          }
          buttons.push({text: global.tr[global.lang].topLevel.cancel});
          app.dialog.create({
            title: global.tr[global.lang].report.sendReport,
            text: null,
            buttons: buttons,
            onClick: function (dialog, index) {
              if(buttonsAction[index]=='pacs') {
                that.sendPACS(mediaList);
              }
              else if(buttonsAction[index]=='email') {
                that.sendMAIL(mediaList, emails);
              }
              else if(buttonsAction[index]=='both') {
                that.sendPACS(mediaList);
                that.sendMAIL(mediaList, emails);
              }
            },
            verticalButtons: true,
          }).open();
        }
      },
      downloadReport: function() {
        if(this.reportType == 2 && (!this.foundRightIMTfar || !this.foundLeftIMTfar)) {
          this.notReadyNotif();
          return;
        }
        if(this.reportType == 6 && !(this.media6.right.length==3 && this.media6.left.length==3)) { 
          this.notReadyNotif();
          return;
        }

        let mediaList = this.getSelectedMedia();
        console.log('mediaList', mediaList);

        let postData = {
          type: this.reportType,
          abacus: $$('#abacus').val(),
          indications: $$('#indications').val(),
          clinical: $$('#clinical').val(),
          report: $$('#report').val(),
          visitID: app.data.patient.visitID,
          mediaList: mediaList,
          lang: global.lang,
          apiKey: ''
        };
        app.preloader.show();
        app.request.post(app.data.config.apiBaseURL + '/report/pdf-download/', postData, function (data) {
          console.log('report/pdf-download', data);
          app.preloader.hide();
          if (data.result == 'ERROR') {
            switch (data.reason) {
              case 'denied':
                app.methods.signout(global.tr[global.lang].topLevel.warning.disconnected);
                break;
              default:
                app.dialog.alert(global.tr[global.lang].topLevel.error.internal_error);
                break;
            }
          }
          else {
            //app.dialog.alert(global.tr[global.lang].report.password+'<h3>'+data.password+'</h3>');

            // convert data
            const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
              const byteCharacters = atob(b64Data);
              const byteArrays = [];

              for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                const slice = byteCharacters.slice(offset, offset + sliceSize);

                const byteNumbers = new Array(slice.length);
                for (let i = 0; i < slice.length; i++) {
                  byteNumbers[i] = slice.charCodeAt(i);
                }

                const byteArray = new Uint8Array(byteNumbers);
                byteArrays.push(byteArray);
              }

              const blob = new Blob(byteArrays, {type: contentType});
              return blob;
            }

            const blob = b64toBlob(data.base64, "application/pdf");
            const blobUrl = window.URL.createObjectURL(blob);

            // Create an invisible A element
            const a = document.createElement("a");
            a.style.display = "none";
            document.body.appendChild(a);

            // Set the HREF to a Blob representation of the data to be downloaded
            a.href = blobUrl;/*window.URL.createObjectURL(
              new Blob([data], { type })
            );*/

            // Use download attribute to set set desired file name
            a.setAttribute("download", data.filename);
            a.setAttribute("class", "link external");
            a.setAttribute("target", "_blank");

            // Trigger the download by simulating click
            a.click();

            // Cleanup
            window.URL.revokeObjectURL(a.href);
            document.body.removeChild(a);            
          }
        }, function (data) {
          console.log('error', data);
        }, 'json');
      }
    }
  }
</script>