po1son
/
WAS


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
							<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EVVA</title>
    <link rel="stylesheet" href="css/evva.css">
    <link rel="stylesheet" href="css/button.css">
  </head>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>


$(function() {
  

  $("#buttonImage").hide();

  updateloadfiledropdown();  
  
  $.getJSON( "../../server/json/LaserUI.json", function( data ) {
    $.each( data["Row1"], createButtons);
    $('#ButtonRows').append("<div style='flex-basis: 100%; height: 0;'></div>");
    $.each( data["Row2"], createButtons);
    $.each( data["SpecialButtons"], createSpecialButtons);
  });

});

function createButtons(i, item){
  var clone = document.importNode(document.querySelector('#Buttonentry').content,true);
  $('[data-class=entryitem]',clone).text(item["Label"]);
  $('[data-class=entryitem]',clone).attr('onclick', "buttonclick('" + item["File"] + "','" + item["Image"] + "','" + item["Label"] + "')");
  
  $('#ButtonRows').append(clone);
}


function createSpecialButtons(i, item){
  var clone = document.importNode(document.querySelector('#Buttonentryspecial').content,true);
  
  
  $('[data-class=entryitem]',clone).text(item["Label"]);
  $('[data-class=entryitem]',clone).attr('onclick', "buttonclick('" + item["File"] + "','" + item["Image"] + "','" + item["Label"] + "')");
  
  
  $('[data-class=entrydiv]',clone).css({"left": item["PositionX"], "top": item["PositionY"] });
  $('[data-class=entryitem]',clone).css({"width": item["SizeX"], "height": item["SizeY"]});
  
   
  $('#ButtonRows').append(clone);
}

function buttonclick(imgfile, imgimg, buttontext){
  //alert(imgimg);
  $("#actualbuttonImage").attr("src","https://centurio.work/customers/evva/universal-storage/storage/Laser/VorschauBilder/" + imgimg)
  
  $("#currentFile").text("Current Selection: " + buttontext);
  
  $("#ButtonRows").hide(); 
  $("#buttonImage").show();
  
}

function showallbuttons(){
  $("#buttonImage").hide();
  $("#ButtonRows").show();
}

function updateloadfiledropdown(){
  $('#loadfiledropdown')
    .find('option')
    .remove()
  $.ajax({
    type: "GET",
    url: "/listfiles",
    datatype: "json",
    success: function(data){
      $(data).each(function(item, val){
    	var $dropdown = $("#loadfiledropdown");
	    $dropdown.append($("<option />").val(val).text(val));
      });
    }
  });
}

function ListFiles() {
  updateloadfiledropdown()
  $.ajax({
    type: "GET",
    url: "/listfiles",
    datatype: "json",
    success: function(data){
      $("#loadedfiles").text(JSON.stringify(data, undefined, 2))
    }
  });
}


function LoadNewFile() {
  $.ajax({
    type: "GET",
    url: "/setfile?filename=" + $("#loadfiledropdown :selected").text(),
    datatype: "json",
    success: function(data){
    
    }
  
  });
}

function ShowLoadedFile() {
  $.ajax({
    type: "GET",
    url: "/getfile",
    datatype: "json",
    success: function(data){
      $("#loadedfile").text(JSON.stringify(data, undefined, 2))
    }
  });
}

function ShowStats() {
  $.ajax({
    type: "GET",
    url: "/statistics",
    datatype: "json",
    success: function(data){
    	$("#stats").text(JSON.stringify(data, undefined, 2))
    }
  });
}

function ShowInputstates() {
  $.ajax({
    type: "GET",
    url: "/getinputstate",
    datatype: "json",
    success: function(data){
    	$("#inputstates").text(JSON.stringify(data, undefined, 2))
    }
  });
}

function SetText() {
  $.ajax({
    type: "GET",
    url: "/settext?t=0&val=" + $("#seriennummber").val(),
    datatype: "json",
    success: function(data){
    	$("#inputstates").text(JSON.stringify(data, undefined, 2))
    }
  });
}


function SetSlot(slot) {
  $.ajax({
    type: "GET",
    url: "/setslot?t=" + slot +"&val=" + $("#slotvalue").val(),
    datatype: "json",
    success: function(data){
      $("#laserwrite").text("Seriennummer: " + $("#slotvalue").val() + " geschrieben.")    
    }
  });
}


function GetSlot(slot) {
  $.ajax({
    type: "GET",
    url: "/getslot?t=" + slot,
    datatype: "json",
    success: function(data){
      $("#getSlot").text(JSON.stringify(data, undefined, 2))
    }
  });
}

function ShowOutputStates() {
  alert("Not yet implemented");
}


function StartLaser() {
  $.ajax({
    type: "GET",
    url: "/startlaser",
    datatype: "json",
    success: function(data){
      $("#startlaser").text("Laser gestartet.")
    }
  });
}

</script>
  <body>
    <div id="LogoTop">
      
    </div>


    <template id="Buttonentry">      
      <div class="" style="width: 8em;">
        <button data-class='entryitem' onclick="openimg()" class="small blue button" <!--- style="margin-top:3em; height:8em; padding:1.5em; width:7.5em" -->>ButtonText</button>
      </div>
    </template>
    
    
    <template id="Buttonentryspecial">      
      <div data-class='entrydiv' style="position: absolute;" >
        <button data-class='entryitem' onclick="openimg()" class="small green button" <!--- style="margin-top:3em; height:8em; padding:1.5em; width:7.5em" -->>ButtonText</button>
      </div>
    </template>
        
    <div id="Content">
      <div class="row paddingleft3" id="ButtonRows"  >
      
      </div>
      
      
      <div id="buttonImage" class="paddingleft3" >
        <img id="actualbuttonImage" style="max-height:700px" src="" alt=""><br>
			  <button onclick="showallbuttons()" style="margin-top:3em; padding:2em;">Zurück zur File auswahl</button>
        <span id="currentFile"></span>
        <br>
        
      </div>


    <div id="Footer">
      Footer Content
    </div>
  </body>
</html>