{% layout="layout.html" %}
{-css-}
<style>
.layers-list-item {
  height: 32px;
}

.layers-list-item .feather {
  width: 18px;
  height: 18px;
}


.layers-list-item .btn {
  height: 24px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 8px;
  padding-right: 8px;
}

.layers-list-item .btn-toolbar {
  display: none;
}

.layers-list-item:hover  .btn-toolbar {
  display: inline-block;
}


.btn .feather {
  margin-left: 0px;
  margin-right: 6px;
  margin-top: 0px;
  width: 20px;
  height: 20px;
}

.layers-list-item .btn .feather {
  margin-left: 4px;
  margin-right: 4px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  width: 18px;
  height: 18px;
}


</style>
{-css-}
{-jslibs-}
{-jslibs-}

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">

  <h1 class="h2">PCB</h1>
  <div class="btn-toolbar mb-2 mb-md-0">
    
  </div>


</div>

<div id = "alert_placeholder"></div>

<div class="row">
	<div class="col-sm-8">
 		<div class="pcb-view-cont" style="width: 100%; height: 400px; border:1px solid black;">
			{* printer.pcb:get_svg() *}
		</div>
	</div>
	
	<div class="form col-sm-4" >
    <div class="form-row " >
      <div class="form-group col-sm-6"> 
        <label for="config-flash-time">Flash time (us)</label>
        <input type="number" class="form-control" id="config-flash-time" value="{* printer.pcb:get_config().flash_time *}">
      </div>
      <div class="form-group col-sm-6"> 
        <label for="config-speed">Speed (mm/s)</label>
        <input type="number" class="form-control" id="config-speed" value="{* printer.pcb:get_config().speed *}">
      </div>
    </div>

    <div class="form-row">
      <div class="form-group col-sm-6"> 
        <label for="config-position-x">Offset X (mm)</label>
        <input type="number" class="form-control" id="config-position-x" value="{* printer.pcb:get_config().position_x *}">
      </div>
      <div class="form-group col-sm-6"> 
        <label for="config-position-y">Offset Y(mm)</label>
        <input type="number" class="form-control" id="config-position-y" value="{* printer.pcb:get_config().position_y *}">
      </div>
    </div>

     <div class="form-row">
      <div class="input-group input-group-sm col-sm-6"> 
        <input type="text" class="form-control" id="pnt1-info-x" value="{* (printer.pcb:get_pnt('pnt1') or {}).x or '-' *}" />
        <input type="text" class="form-control" id="pnt1-info-y" value="{* (printer.pcb:get_pnt('pnt1') or {}).y or '-' *}"/>
        <div class="input-group-append">
          <button class="btn btn-outline-secondary" type="button" id="pnt1-select">
            <span class="mr-0" data-feather="crosshair"></span>
          </button>
        </div>
      </div>
      <div class="input-group input-group-sm col-sm-6"> 
        <input type="text" class="form-control" id="pnt2-info-x" value="{* (printer.pcb:get_pnt('pnt2') or {}).x or '-' *}"/>
        <input type="text" class="form-control" id="pnt2-info-y" value="{* (printer.pcb:get_pnt('pnt2') or {}).y or '-' *}"/>
        <div class="input-group-append">
          <button class="btn btn-outline-secondary" type="button" id="pnt2-select">
            <span class="mr-0" data-feather="crosshair"></span>
          </button>
        </div>
      </div>
    </div>

    <div class="form-row">
      <div class="form-group col-sm-6">
        <div class="form-check">
          <input class="form-control form-check-input" type="checkbox" value="" {* printer.pcb:get_config().negative and 'checked' or '' *} id="config-negative">
          <label class="form-check-label" for="config-negative">Negative</label>
        </div>
      </div>     
    </div>
    <div class="form-row">
      <div class="form-group col-sm-6">
        <div class="form-check">
          <input class="form-control form-check-input" type="checkbox" value="" {* printer.pcb:get_config().flip_x and 'checked' or '' *} id="config-flip-x">
          <label class="form-check-label" for="config-flip-x">Flip X</label>
        </div>
      </div>     
      <div class="form-group col-sm-6">
        <div class="form-check">
          <input class="form-control form-check-input" type="checkbox" value="" {* printer.pcb:get_config().flip_y and 'checked' or '' *} id="config-flip-y">
          <label class="form-check-label" for="config-flip-y">Flip Y</label>
        </div>
      </div>
    </div>
   
		

		<ul id="layers-table" class="list-group mb-2">
		</ul>
		<button id="update" class="btn btn-outline-secondary mt-1 mr-4" >
	      <span data-feather="save"></span>Update</button> 
    <button id="print" class="btn btn-outline-primary mt-1 mr-4" >
        <span data-feather="play-circle"></span>Print</button> 
    <button id="preview" class="btn btn-outline-primary mt-1 mr-4" >
        <span data-feather="monitor"></span>Preview</button> 
	</div>
</div>
	

{-scripts-}

<script type="text/javascript">

page_ctx.layers = [
{% for i, llayer in ipairs(api.pcb:get_layers()) do %}
	{name:"{* llayer.name *}",type:"{* llayer.type *}",icon:"{* llayer.icon *}",visible:{*llayer.visible*}},
{% end %}
];

{% local p1 = printer.pcb:get_pnt('pnt1') 
  if p1 then
    %}page_ctx.pnt1 = {x: {*p1.x*}, y: {*p1.y*}}; 
  {%
  end
  local p2 = printer.pcb:get_pnt('pnt2') 
  if p2 then
    %}page_ctx.pnt2 = {x: {*p2.x*}, y: {*p2.y*}}; 
  {%
  end
%}

page_ctx.on_change_state = function(state) {
	//location.reload();
	reload_svg();
	reload_layers();
}

function update_svg() {
  $(".pcb-view-cont svg:first-child .point-select").bind("click", function(ev) {
    let pnt = $(ev.target);
    let idx = pnt.data('idx');
    let layer = pnt.data('layer');
    console.log('select point:' + layer + ':' + idx);
    on_point_selected(layer,idx);
  });
}

function update_points_pos() {
  if (page_ctx.pnt1) {
    $(".pcb-view-cont svg:first-child #pnt1-pos").attr(
      'transform','translate(' + page_ctx.pnt1.x +','+page_ctx.pnt1.y +')')
  }
  if (page_ctx.pnt2) {
    $(".pcb-view-cont svg:first-child #pnt2-pos").attr(
      'transform','translate(' + page_ctx.pnt2.x +','+page_ctx.pnt2.y +')')
  }
}

update_svg();
update_points_pos();

function reload_svg() {
	fetch('/api/pcb.svg')
		.then(checkStatus)
		.then(r => r.text())
		.then(text => {
			$(".pcb-view-cont").empty();
			$(".pcb-view-cont").append( text );
      update_svg();
		})
		.catch(function(error) {
        	bootstrap_alert.error(
            	'<p>Failed load svg</p>'+
           	 '<hr><p class="mb-0">' + error + '</p>'
          	);
    	});
}

function update_layers(data) {
	if (data) {
		page_ctx.layers = data;
	}
	$( "#layers-table" ).empty();
	$.each(page_ctx.layers, function(i, item) {
		let el = $('<il class="pt-1 pb-1">').appendTo('#layers-table');
		el.append( feather.icons[item.icon].toSvg()).addClass("pl-2 pr-2");
		el.append(item.name);
		el.addClass("list-group-item")
		    .addClass("list-group-item-action")
		    .addClass('layers-list-item');
		var btns = $('<div class="btn-toolbar float-right">').appendTo(el);
    var bnt_visible = $('<button class="btn btn-outline-info btn-sm mr-0">');

    if (item.visible) {
        bnt_visible.append(feather.icons["eye"].toSvg());
    } else {
        bnt_visible.append(feather.icons["eye-off"].toSvg());
    }
    bnt_visible.click(function(event){
                    event.stopPropagation();
                    //console.log('click remove ' + item.name);
                    visible_layer(i+1,!item.visible);
                  });
    btns.append( bnt_visible );
		btns.append( $('<button class="btn btn-outline-danger btn-sm mr-0">')
		        			.append(feather.icons["trash-2"].toSvg())
		        			.click(function(event){
		        				event.stopPropagation();
		        				//console.log('click remove ' + item.name);
		        				remove_layer(i+1);
		        			}));
	});
}

update_layers();

function reload_layers() {
	fetch('/api/pcb/layers',{
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body:JSON.stringify({})
      })
      .then(checkStatus)
      .then(parseJSON)
      .then(checkResultStatus)
      .then(function(data) {
        update_layers(data.layers);
      }).catch(function(error) {
        console.log('request failed', error);
      });   
}

function remove_layer(i) {
	fetch('/api/pcb/remove_layer',{
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body:JSON.stringify({layer:i})
      })
      .then(checkStatus)
      .then(parseJSON)
      .then(checkResultStatus)
      .then(function(data) {
        update_layers(data.layers);
        update_state(data);
        reload_svg();
      }).catch(function(error) {
        console.log('request failed', error);
      });   
}

function visible_layer(i,v) {
  fetch('/api/pcb/visible_layer',{
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body:JSON.stringify({layer:i,visible:v})
      })
      .then(checkStatus)
      .then(parseJSON)
      .then(checkResultStatus)
      .then(function(data) {
        update_layers(data.layers);
        update_state(data);
        reload_svg();
      }).catch(function(error) {
        console.log('request failed', error);
      });   
}

$("#update").click(function() {
	let config = {
		negative: $("#config-negative").is(":checked"),
    speed: parseFloat($("#config-speed").val()),
    position_x: parseFloat($("#config-position-x").val()),
    position_y: parseFloat($("#config-position-y").val()),
    flip_x: $('#config-flip-x').is(":checked"),
    flip_y: $('#config-flip-y').is(":checked")
	};
	fetch('/api/pcb/update',{
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body:JSON.stringify(config)
      })
      .then(checkStatus)
      .then(parseJSON)
      .then(checkResultStatus)
      .then(function(data) {
       	update_state(data)
        reload_svg()
      }).catch(function(error) {
        console.log('request failed', error);
      });   
});

$("#print").click(function() {
  fetch('/api/pcb/print',{
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body:JSON.stringify({})
      })
      .then(checkStatus)
      .then(parseJSON)
      .then(checkResultStatus)
      .then(function(data) {
        if (data.redirect) {
          window.location.href = data.redirect;
        }
      }).catch(function(error) {
        console.log('request failed', error);
      });   
});

$("#preview").click(function() {
  fetch('/api/pcb/preview',{
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body:JSON.stringify({})
      })
      .then(checkStatus)
      .then(parseJSON)
      .then(checkResultStatus)
      .then(function(data) {
        if (data.redirect) {
          window.location.href = data.redirect;
        }
      }).catch(function(error) {
        console.log('request failed', error);
      });   
});

let select_pnt_state = 'none';

$("#pnt1-select").click(function() {
  select_pnt_state = 'select1';
  $(".pcb-view-cont svg:first-child #points").attr('visibility','visible');
});
$("#pnt2-select").click(function() {
  select_pnt_state = 'select2';
  $(".pcb-view-cont svg:first-child #points").attr('visibility','visible');
});

function on_point_selected(layer,idx) {
   let pnt = null;
   if (select_pnt_state === 'select1') {
      pnt = 'pnt1';
   } else if (select_pnt_state == 'select2') {
      pnt = 'pnt2';
   } else {
      return;
   }
   $(".pcb-view-cont svg:first-child #points").attr('visibility','hidden');
   select_pnt_state = 'none';
   fetch('/api/pcb/select_pnt',{
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body:JSON.stringify({
          pnt: pnt,
          layer: layer,
          idx: idx
        })
      })
      .then(checkStatus)
      .then(parseJSON)
      .then(checkResultStatus)
      .then(function(data) {
        if (data.pnt) {
          $('#'+pnt+'-info-x').val(data.pnt.x);
          $('#'+pnt+'-info-y').val(data.pnt.y);
          page_ctx[pnt] = data.pnt;
          update_points_pos();
        }
      }).catch(function(error) {
        console.log('request failed', error);
      });
};

</script>

{-scripts-}