{% extends "layout.html" %}
{% block container %}
          <div class="card" id="data-el-4">
            <div class="card-body ov-auto">
		    <h5 class="card-title">Google Transfer Agent Status({{sg_status['agent_msg']|safe}})</h5>
              <div class="row" style="margin-top: 10px">
	      {% if sg_status['docker_status'] == False %}
              <form id="upload_form" action="/data/upload/install-docker" method="post">
	      {% else %}
              <form id="upload_form" action="/data/upload/agent" method="post">
	        {% if sg_status['agent_status'] == False %}
                <div class="col">
		      Project-ID: {{sg_status['project_id']}}
		</div>
	        {% else %}
	      <div class="col">
	      Project-ID: {{sg_status['project_id']}} Prefix: {{sg_status['prefix']}}
	      </div>
	        {% endif %}
	      {% endif %}
              </div>
	      {% if sg_status['docker_status'] == True %}
              <div class="row" style="margin-top: 25px">
                <div class="col"><input class="form-control" type="text" placeholder="Data Admin-ID" id="did" name="did"></div>
                <div class="col"><input class="form-control" type="password" placeholder="DMK" id="dmk" name="dmk"></div>
              </div>
              <div class="input-group" style="margin-top: 10px">
                <input id="start_stop_agent_status" type="text" class="form-control" placeholder="{{ command_status['agent_status'] }}" readonly>
                <div class="input-group-append">
	        {% if sg_status['agent_status'] == False %}
                  <input type="button" id="start_agent" class="btn btn-dark text-white" value="Start agent">
	        {% else %}
                  <input type="button" id="stop_agent" class="btn btn-dark text-white" value="Stop agent">
	        {% endif %}
                </div>
              </div>
	      {% else %}
	      <p>Please configure transfer service <a href='/gcloud/configure'>here</a></p>
	      {% endif %}
	      </form>
	    </div>
	  </div>
          <div class="card" id="data-el-4">
            <div id="data-transfer-job" class="card-body ov-auto">
              {% if 'transferjob' in sg_status.keys() %}
	      <h5 class="card-title" style="margin-top: 25px">Transfer Job: {{sg_status['transferjob'].split('/')[1]}} (<span id="transferjob_status">{{sg_status['transferjob_status']|safe}}</span>)</h5>
	      <div id="stats" class="mb-2"></div>
              <div id="last_run">
		      <div class="row">
		      <div class="col mx-2 mb-2">
		      <table class="table table-sm table-borderless">
			      <tr><th colspan="2" style="font-size: 1.2em;"> Job information</th></tr>
			      <tr><th>Full resource name</th><td>{{sg_status['transferjob']}}</td></tr>
			      <tr><th>Description</th><td>{{sg_status['bucket_name']}}</td></tr>
			      <tr><th>Scheduling mode</th><td>Batch</td></tr>
		      </table>
		      </div>
		      <div class="col mx-2 mb-2">
		      <table class="table table-sm table-borderless">
			      <tr><th colspan="2" style="font-size: 1.2em;">Destination</th></tr>
			      <tr><th>Type</th><td>Google Cloud Storage</td></tr>
			      <tr><th>Bucket Name</th><td>{{sg_status['bucket_name']}}</td></tr>
		      </table>
		      </div>
		      </div>
                      <table class="table table-condensed">
			      <tr><th>Start Time</th><th>End Time</th><th>Status</th><th>Data Transferred</th><th>Data Size</th><th>Duration</th></tr>
                              <tr id="dataRow"><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                      </table>
              </div>
              <div class="row" style="margin-top: 25px">
                <div class="col"><input id="tj-did" class="form-control" type="text" placeholder="Data Admin-ID"></div>
		<div class="col"><input id="tj-dmk" class="form-control" type="password" placeholder="DMK"></div>
              </div>
              <div class="input-group" style="margin-top: 10px">
                <input id="start_stop_transferjob_status" type="text" class="form-control" placeholder="{{ command_status['transferjob_status'] }}" readonly>
                <div class="input-group-append">
		      <button id="start" class="btn btn-dark text-white d-none">Start Transfer Job</button>
		      <button id="stop" class="btn btn-dark text-white d-none">Stop Transfer Job</button>
                </div>
	      </div>
	      {% else %}
	      <h5 class="card-title" style="margin-top: 25px">Transfer Job: (<span id="transferjob_status">{{sg_status['transferjob_status']|safe}}</span>)</h5>
	      <p>Please configure transfer service <a href='/gcloud/configure'>here</a></p>
	      {% endif %}
	    </div>
          </div>
<script>
$(function(){
	var auth = {};
	async function check_dmk(prefix) {
	  try {
	    const auth = { did: $('#' + prefix + 'did').val(), dmk: $('#' + prefix + 'dmk').val() };
	    const result = await $.ajax({
	      url: "/tgr/check_dmk",
	      type: "POST",
	      data: JSON.stringify(auth),
	      contentType: "application/json"
	    });
	    return result;
	  } catch (error) {
	    console.error("Error occurred:", error);
	    return { error: error };
	  }
	}

	$('#start').click(async function(){
		showWaitingScreen();
		$('#start_stop_agent_status').val('');
		const res = await check_dmk('tj-');
		if (res['result'] == 'OK') {
			$('#start_stop_transferjob_status').val('Authentication...Done.');
			$.ajax({
				type: 'get',
				url: '/gcloud/start_transferjob',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		} else {
			hideWaitingScreen();
			$('#start_stop_transferjob_status').val('Authentication...Failed.');
		}
	});
	$('#stop').click(async function(){
		showWaitingScreen();
		$('#start_stop_agent_status').val('');
		const res = await check_dmk('tj-');
		if (res['result'] == 'OK') {
			$('#start_stop_transferjob_status').val('Authentication...Done.');
			$.ajax({
				type: 'get',
				url: '/gcloud/stop_transferjob',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		} else {
			$('#start_stop_transferjob_status').val('Authentication...Failed.');
		}
	});
	$('#start_agent').click(async function(){
		$('#start_stop_transferjob_stauts').val('');
		showWaitingScreen();
		const res = await check_dmk('');
		if (res['result'] == 'OK') {
			$('#start_stop_agent_status').val('Authentication...Done.');
			$.ajax({
				type: 'get',
				url: '/gcloud/start_agent',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		} else {
			hideWaitingScreen();
			$('#start_stop_agent_status').val('Authentication...Failed.');
		}
	});
	$('#stop_agent').click(async function(){
		$('#start_stop_transferjob_stauts').val('');
		showWaitingScreen();
		const res = await check_dmk('');
		if (res['result'] == 'OK') {
			$('#start_stop_agent_status').val('Authentication...Done.');
			$.ajax({
				type: 'get',
				url: '/gcloud/stop_agent',
				dataType: 'json',
				success: function(data) {
					alert(data['message']);
					location.reload(true);
				},
				error: function() {
					alert('Server Error');
					location.reload(true);
				}
			});
		} else {
			hideWaitingScreen();
			$('#start_stop_agent_status').val('Authentication...Failed.');
		}
	});
	function checkTransferStats() {
		var apiUrl = '/tgm/transferjob_stats';
		var interval = 5000; // 5秒ごとに確認
		$('#stats').text('Checking...');

		$.get(apiUrl, function(response) {
			if (response.result === 'OK') {
				$('#stats').text(response.stats);

				// 転送が進行中であれば、再度確認する
				if (response.stats.includes('transferJobs')) {
					setTimeout(checkTransferStats, interval);
					$('#start').addClass('d-none');
					$('#stop').removeClass('d-none');
				} else {
					$('#transferjob_status').html(response.transferjob_status);
					if (response.last_run['result']) {
						insertData(response.last_run['data']);
					}
					$('#start').removeClass('d-none');
					$('#stop').addClass('d-none');
				}
			} else {
				if (response.last_run['result']) {
					insertData(response.last_run['data']);
				}
				$('#transferjob_status').html(response.transferjob_status);
				$('#start').removeClass('d-none');
				$('#stop').addClass('d-none');
			}
		});
	}
	// 最初の確認を実行
	checkTransferStats();

        // Function to insert data into table cells
        function insertData(data) {
            console.log(data);
            var cells = document.getElementById("dataRow").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 %}