<html>
	<head>
		<meta charset="UTF-8">
    	<title>3DPrinterOS Client</title>
		<link rel="stylesheet" type="text/css" href="/static/styles/style.css">
	</head>
	<body>
		<div id='host_version' align='right' style='align: right; color: #006666'>!!!URL!!! !!!VERSION!!!</div>
		<div class="block1" style="width: 60%; margin:-160px 0 0 -30%;">
			<div class="block2">
				3DPrinterOS Client
			</div>
			<center>
			<div class="block3">
                <p><h3>Network printers list</h3></p>
				<table class="network_printers">
					<thead>
					<tr>
						<th style="width: 70%;"></th>
						<th style="width: 30%;"></th>
					</tr>
					</thead>
					<tbody id="printer_list">
					<tr id="empty_list" style="display: none;">
						<td colspan="2" style="width: 100%; text-align: center;">No printers</td>
					</tr>
					</tbody>
				</table>
				<input type="button" onclick="location.href='/'" value="Back" class="big_button">
			</div>
			</center>
		</div>
	<script src="/static/scripts/jquery.js"></script>

	<script type="text/javascript">
		$(function() {
			//Send request for network printers list
			$.ajax({
				'url': '/network_printers_list',
				'type': 'GET',
				'dataType': 'json',
				'success': function(response) {
					//Check printers count
					if (!response.length) {
						//show message - empty list
						$('#empty_list').show();
						return;
					}
					//Draw table with printers list
					var $tableBody = $('#printer_list');
					for (var i in response) {
						var printerName = response[i].profile.name != undefined ? response[i].profile.name : '';
						var $column = $('<tr>');
              var ip = response[i].usb_info.IP;
              var snr = response[i].usb_info.SNR;
              if (ip !== snr) {
                  $column.append('<td class="title">' + printerName + ' | ' + ip + '(SN: ' + snr + ')' + '</td>');
              } else {
                  $column.append('<td class="title">' + printerName + ' | ' + ip + '</td>');
              };
						$column.append('<td class="action"><button class="small_button" id="edit">Edit</button></td>');
						$column.find('#edit').data('usb_info', response[i].usb_info);
						$column.find('#edit').on('click', function() {
							edit_printer(this);
						});
						$column.append('<td class="action"><button id="forget" class="small_button">Forget</button></td>');
						$column.find('#forget').data('usb_info', response[i].usb_info);
						$column.find('#forget').on('click', function() {
							forget_printer(this);
						});
						$tableBody.append($column);
					}
				}
			})
		});

		/**
		 * Send request to forget network printer
		 * @param {Element} buttonElement
         */
		function forget_printer(buttonElement) {
			$.ajax({
				'url': '/forget_network_printer',
				'type': 'POST',
				'data': {'usb_info': JSON.stringify($(buttonElement).data('usb_info'))},
				'success': function() {
					//Remove column with current printer
					$(buttonElement).closest('tr').remove();
					//Check printers count and show message if list is empty
					if ($('#printer_list').find('tr').length <= 1) {
						$('#empty_list').show();
					}
				}
			})
		}
		function edit_printer(buttonElement) {
            var usb_info = $(buttonElement).data('usb_info');
            location.href = "/pages/edit_printer?printer_id=" + usb_info['VID'] + "_" + usb_info['PID'] + "_" + usb_info['SNR'];
		}
	</script>

	</body>
</html>
