{% extends "layout.html" %}
{% block container %}
          <div class="card" id="data-el-4">
            <div id="tgr-list" class="card-body ov-auto">
              <h5 class="card-title">Available TGR's</h5>
	      {% if sg_status['tgr'].items() %}
	      <div class="card">
	        <div class="card-body pl-4 pr-3" style="height: 40vh; overflow: auto;">
	          {% for tgr_name, tgr_ip in sg_status['tgr'].items() %}
	          <div class="row">
		    <input name="tgr_name" class="mt-1 mr-1" type="checkbox" value="{{tgr_name}}">
		    <span class="tgr-col" style="width: 200px;"> {{tgr_name}}</span>
		    <span class="tgr-col">{{tgr_ip}} (<span id="{{tgr_name}}_status">Checking...</span>)</span>
                    <table class="table table-condensed mx-3 mt-2">
		      <tr><th class="p-1">Start Time</th><th class="p-1">End Time</th><th class="p-1">Status</th><th class="p-1">Data Transferred</th><th class="p-1">Data Size</th><th class="p-1">Duration</th></tr>
                      <tr id="dataRow-{{tgr_name}}"><td class="p-1"></td><td class="p-1"></td><td class="p-1"></td><td class="p-1"></td><td class="p-1"></td><td class="p-1"></td></tr>
                    </table>
                  </div>
	          {% endfor %}
                </div>
              </div>
              <div class="row" style="margin-top: 25px">
                <div class="col"><input id="tgr-did" class="form-control" type="text" placeholder="Data Admin-ID"></div>
	        <div class="col"><input id="tgr-dmk" class="form-control" type="password" placeholder="DMK"></div>
              </div>
              <div class="input-group" style="margin-top: 10px">
	        <div id="tgr_list_status" class="form-control scroll-x"></div>
                <div class="input-group-append">
	          <button id="push" class="btn btn-dark text-white">Push Data</button>
                </div>
              </div>
              <div class="card scroll" id="data-el-4" style="height: 25vh;">
	        <h5 class="card-title" style="margin: 5px;">Transfer Results</h5>
                <pre id='xfr-results' style="margin: 5px; line-height: 100%"></pre>
              </div>
	      {% else %}
	      No TGR's Are Available.<br>
	      <a href="/tgr/add">Add TGR</a>
	      {% endif %}
	    </div>
	  </div>
<script>
$(function(){
	var auth = {did:'', dmk:''};
	var vault_closed_attention = 0;

	function check_status(tgr_name) {
		$('#' + tgr_name + '_status').text('Checking...');
		$('#xfr-results').append(tgr_name + ': Checking...\n');
		$.getJSON('/tgr/status?type=push&name=' + tgr_name, function(data) {
			//$('#' + tgr_name + '_status').html(data['status_html']);
			//return data['status'];
			$('#' + tgr_name + '_status').html(data['status_html']);
			if (data['status'] == 'in-progress') {
				$('#xfr-results').append(tgr_name + ': ' + data['message'] +'\n');
				openvault(tgr_name);
			} else if (data['status'] == 'close') {
				$('#xfr-results').append(tgr_name + ': Vault [closed]\n');
				$('#xfr-results').append(tgr_name + ': ' + data['message'] +'\n');
			} else {
				$('#xfr-results').append(tgr_name + ': Vault [' + data['status'] +']\n');
				$('#xfr-results').append(tgr_name + ': ' + data['message'] +'\n');
			}
			if (data['transfer_status']['result']){
				insertData(data['transfer_status']['data'], tgr_name);
			}
		});
	}
	
	$('input:checkbox[name="tgr_name"]').each(function() {
		check_status($(this).val());
	});

	function check_dmk() {
		auth = { did: $('#tgr-did').val(), dmk: $('#tgr-dmk').val() };
		$('#tgr-did').val('');
		$('#tgr-dmk').val('');
		var res = {};
		$.ajax({
			url: "/tgr/check_dmk",
			type: "POST",
			data: JSON.stringify(auth),
			contentType: "application/json",
			success: function(result) {
				res = result;
			},
			async: false
		});
		return res;
	}

	function manage_vault(tgr_name, command) {
		data = {
			did: auth['did'],
			dmk: auth['dmk'],
	       		tgr_name: tgr_name,
			command: command
		};
		if (command == 'push') {
			vault_closed_attention = 0;
			url = '/tgr/direct-push';
			$('#xfr-results').append(tgr_name + ': Closing the TGM/TGR Data Vault and starting the transfer...\n');
		} else {
			url = '/tgr/manage_vault';
		}
		$.ajax({
			url: url,
			type: "POST",
			data: JSON.stringify(data),
			contentType: "application/json",
			success: function(data) {
				$('#xfr-results').append(tgr_name + ': ' + data['message'] + '\n');
				if (data['result'] == 'FAIL' && command == 'open' && vault_closed_attention == 0) {
					if (data['running_push_pid'] == 0) {
						vault_closed_attention = 1;
						VaultClosedAttentionModal();
					}
				} 
				if (data['result'] == 'OK' && command == 'push') {
					openvault(tgr_name);
				} else {
					check_status(tgr_name);
				}
			}
		});
	}
	$('#status').click(function(){
		$('input:checkbox[name="tgr_name"]:checked').each(function() {
			check_status($(this).val());
		});
	});
	$('#open').click(async function(){
		$('#tgr_list_status').text('Authentication...');
		res = check_dmk();
		if (res['result'] == 'OK') {
			$('#tgr_list_status').text('Authentication...Done.');
			data = { did: auth['did'], dmk: auth['dmk'] };
			$('input:checkbox[name="tgr_name"]:checked').each(function() {
				tgr_name = $(this).val();
				$('#' + tgr_name + '_status').text('Opening vault...');
				data['tgr_name'] = tgr_name;
				manage_vault(tgr_name, 'open');
			});
		} else {
			$('#tgr_list_status').text('Authentication...Failed.');
			alert('Authentication...Failed.');
		}
	});
	$('#close').click(function(){
		$('#tgr_list_status').text('Authentication...');
		res = check_dmk();
		if (res['result'] == 'OK') {
			$('#tgr_list_status').text('Authentication...Done.');
			data = { did: auth['did'], dmk: auth['dmk'] };
			$('input:checkbox[name="tgr_name"]:checked').each(function() {
				tgr_name = $(this).val();
				$('#' + tgr_name + '_status').text('Closing vault...');
				data['tgr_name'] = tgr_name;
				manage_vault(tgr_name, 'close');
			});
		} else {
			$('#tgr_list_status').text('Authentication...Failed.');
		}
	});
	$('#push').click(async function(){
		await showWaitingScreen();
		$('#tgr_list_status').text('Authentication...');
		$('#xfr-results').append('Authentication...');
		tgrs = [];
		res = check_dmk();
		$('#tgr_list_status').text(res['message']);
		if (res['result'] == 'OK') {
			$('#tgr_list_status').text('Authentication...Done.');
			$('#xfr-results').append('Done.\n');
			data = { did: auth['did'], dmk: auth['dmk'] };
			count = 0;
			$('input:checkbox[name="tgr_name"]:checked').each(function() {
				tgr_name = $(this).val();
				tgrs[count] = tgr_name;
				$('#' + tgr_name + '_status').text('Pushing data...');
				$('#xfr-results').append('In order to maintain the integrity of the data, we will now close the Data Vaults.\n');
				data['tgr_name'] = tgr_name;
				manage_vault(tgr_name, 'push');
				count = count + 1;
			});
			if (count == 0) {
				$('#tgr_list_status').text('No TGR selected!');
				alert('No TGR selected!');
				hideWaitingScreen();
			} else {
				$('#tgr_list_status').text('Push requested for ' + count + ' TGR(s)');
				hideWaitingScreen();
			}
		} else {
			$('#tgr_list_status').text('Authentication...Failed.');
			await $('#xfr-results').append('Failed.\n');
			alert('Authentication...Failed.');
			hideWaitingScreen();
		}
	});

	function openvault(tgr_name) {
		var id = setTimeout(function(){openvault(tgr_name)}, 5000);
		$('#' + tgr_name + '_status').text('Checking...');
		$.getJSON('/tgr/status?type=push&name=' + tgr_name, function(data) {
			//$('#' + tgr_name + '_status').html(data['status_html']);
			//if (data['status'] == 'close') {
			//	$('#' + tgr_name + '_status').text('Opening vault...');
			//	manage_vault(tgr_name, 'open');
			//} else if (data['status'] == 'open') {
			//	clearTimeout(id);
			//}
			$('#' + tgr_name + '_status').html(data['status_html']);
			if (data['status'] == 'close') {
				clearTimeout(id);
				hideWaitingScreen();
				$('#xfr-results').append(tgr_name + ': Transfer job has finished.\n');
				$('#xfr-results').append(tgr_name + ': ' + data['message2'] + '\n');
				$('#' + tgr_name + '_status').text('Opening vault...');
				//$('#xfr-results').append(tgr_name + ': Vault [closed]\n');
				$('#xfr-results').append(tgr_name + ': Opening vault...\n');
				manage_vault(tgr_name, 'open');
			} else if (data['status'] == 'open') {
				clearTimeout(id);
				hideWaitingScreen();
				$('#xfr-results').append(tgr_name + ': ' + data['message'] + '\n');
			} else {
				$('#xfr-results').append(tgr_name + ': ' + data['message'] +'\n');
			}
			if (data['transfer_status']['result']){
				insertData(data['transfer_status']['data'], tgr_name);
			}
		});
	}
	function VaultClosedAttentionModal() {
	  var message = `
	    <div class="modal-content vault-closed-attention-modal">
	    <p class="my-0">To access your data, please open Data Vaults.</p>
	    <p class="my-0">Steps to Open the TGM Data Vault:</p>
	    <ol class="my-0">
	      <li>Go to the "Dashboard."</li>
	      <li>Select the option labeled "Open Data Vault."</li>
	      <li>Follow the prompts to securely unlock and open your Data Vault.</li>
	      <li>After successfully opening the vault, you will be able to access your data.</li>
	    </ol>
	    <p class="my-0"><a href="/data/vault/open">Click here</a> to open the TGM Data Vault.</p>
	    <p class="mb-0 mt-2">Steps to Open the TGR Data Vault:</p>
	    <ol class="my-0">
	      <li>Go to the "Dashboard."</li>
	      <li>Select the option labeled "Manage TGR."</li>
	      <li>Follow the prompts to securely unlock and open your Data Vault.</li>
	      <li>After successfully opening the vault, you will be able to access your data.</li>
	    </ol>
	    <p class="my-0"><a href="/tgr/list">Click here</a> to open the TGR Data Vault.</p>
	    <p class="mt-2">Note: It is essential to keep your credentials secure to prevent unauthorized access to your Data Vaults.</p>
	    </div>
	  `;

	  bootbox.dialog({
	    title: "Attention: The TGM and the TGR Data Vaults are Closed",
	    message: message,
	    buttons: {
	      ok: {
		label: "OK",
		className: "btn-primary"
	      }
	    }
	  });
	}

        // Function to insert data into table cells
        function insertData(data, tgr_name) {
            var cells = document.getElementById("dataRow-" + tgr_name).getElementsByTagName("td");
            for (var i = 0; i < data.length; i++) {
                if (i === 3 || i === 4) {
                    // For data size, convert and display with appropriate units
                    var dataSize = data[i];
                    var dataSizeStr = formatDataSize(dataSize);
                    cells[i].textContent = dataSizeStr;
                } else if (i === 5) {
                    // For Duration, convert and display in hours, minutes, and seconds
                    var duration = data[i];
                    var durationStr = formatDuration(duration);
                    cells[i].textContent = durationStr;
                } else {
                    cells[i].textContent = data[i];
                }
            }
        }

        // Function to format data size with appropriate units
        function formatDataSize(dataSize) {
            var units = ['B', 'KB', 'MB', 'GB', 'TB'];
            var unitIndex = 0;

            while (dataSize >= 1024 && unitIndex < units.length - 1) {
                dataSize /= 1024;
                unitIndex++;
            }

            return dataSize.toFixed(2) + ' ' + units[unitIndex];
        }

        // Function to format Duration in hours, minutes, and seconds
        function formatDuration(duration) {
            var hours = Math.floor(duration / 3600);
            var minutes = Math.floor((duration % 3600) / 60);
            var seconds = duration % 60;

            var durationStr = "";
            if (hours > 0) {
                durationStr += hours + " hour ";
            }
            if (minutes > 0) {
                durationStr += minutes + " min ";
            }
            if (seconds >= 0) {
                durationStr += seconds + " sec";
            }

            return durationStr;
        }
});
</script>
{% endblock %}