Cue-View/plugins/qlab/qlab.html

<header>
  <h1><%= listName %></h1>
  <h2><%= data.version || "" %></h2>
</header>

<%
  const fs = require('fs');
  let _ = require('lodash');

  let cueTemplate = _.template(fs.readFileSync(`./plugins/qlab/cue.ejs`));
  let tileTemplate = _.template(fs.readFileSync(`./plugins/qlab/tile.ejs`));
  let cartTemplate = _.template(fs.readFileSync(`./plugins/qlab/cart.ejs`));
  let listTemplate = _.template(fs.readFileSync(`./plugins/qlab/cuelist.ejs`));

%>



<%
  for(const workspace_id in data.workspaces){
  const workspace = data.workspaces[workspace_id];

  for(const cueList_id in workspace.cueLists){
  const ql = workspace.cueLists[cueList_id];
%>



  <% if(ql.type=="Cue List"){ %>

    <%= listTemplate({cueList: ql, allCues: workspace.cues, rowTemplate: cueTemplate}) %>

  <% }else if(ql.type=="Cart"){ %>

    <%= cartTemplate({cueList: ql, allCues: workspace.cues, tileTemplate: tileTemplate}) %>


  <% } %>



<% }} %>



<script src="node_modules/lodash/core.min.js"></script>

<script>


function updateElement(type, data){


  if(type=="updateCueData"){
    $elem = document.getElementById(data.cue.uniqueID);

    if($elem){

      if(data.cue.type=="Cue List"){
        $elem.outerHTML = '<h3>'+data.workspace.displayName+' - '+data.cue.name+'</h3>';

      }else if(data.cue.type=="Cart"){

        $elem.outerHTML = cartTemplate({cueList: data.cue, allCues: data.workspace.cues});
        
      }else if(data.cue.cartPosition[0]!=0){
        $elem.outerHTML = tileTemplate(data);
        
      }else{
        $elem.outerHTML = cueTemplate(data);
      }
    }

  }else if(type=="updatePlaybackPosition"){

    Array.from(document.getElementsByClassName("playback-position")).forEach(
    function($elem, index, array) {
        $elem.classList.remove("playback-position");
    });

    document.getElementById(data.cue.uniqueID).classList.add("playback-position");
  }
  
}



</script>