HackathonDec21/index.html at master · kndb-star/HackathonDec21 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
.queued {background-color: yellow;}
.AssignedToPool {background-color: yellow;}
.AssignedToAgent {background-color: orange;}
.PreProcessing {background-color: orange;}
.Running {background-color: orange;}
.Postprocessing {background-color: orange;}
.CompletedSuccess {background-color: green;}
</style>
</head>
<body>


<i class="fas fa-tasks fa-2x" onclick="addSimulation()"></i>
<i class="fas fa-file-alt fa-2x" onclick="streamlog()"></i>


<div id="cards" class="card-columns">
</div>

<script>


function addSimulation() {

	var randomId = Math.random().toString(36).substr(2, 5);

	var cards = document.getElementById("cards");

	var cardHtml = '<div class="card" style="background-color: #efefef!important; "><div class="card-header" style="background: #4aa7a9; margin-bottom:10px">Simulation id -> ' + randomId + '</div><div class="card-body" style="background: #ebffff; color: black"><p class="card-text">Triggered by: Konark Debbarma</p><p class="card-text">Configuration: 8 Core-16 GB</p><p class="card-text">Engine: 8.3 R04 RC1</p><p class="card-text">Solver: CPLEX</p><p class="card-text">Status: <span id="' + randomId + '">--</span> </p></div></div>';

	cards.insertAdjacentHTML("beforeend", cardHtml);

	var oReq = new XMLHttpRequest();
	oReq.open("POST", 'https://kd-playground-functionapp.azurewebsites.net/api/SubmitASimulation?code=DkKMG6VOJS0rx0ShbJXBBUr/Fd/ackbzFw1i2LzauzenuN4kyzISbw==&simid=' + randomId, true);

	oReq.onreadystatechange = function() {
    if(oReq.status == 204) {
        console.log('Success');
    }}

	oReq.send();
}

function streamlog() {

	var cards = document.getElementById("cards");

	var cardHtml = '<div class="card" style="background-color: #343a40!important; min-width:300px; height:400px; overflow-y: scroll;"><div class="card-header" style="background: #343a40; color:white">Log</div><div class="card-body" style="background: #343a40; color: yellow"><p id="log"></p></div></div>'

	cards.insertAdjacentHTML("beforeend", cardHtml);

}


if(typeof(EventSource) !== "undefined") {
	  var simSource = new EventSource("https://kd-playground-functionapp.azurewebsites.net/api/RunSimulation?code=FwJswALzr5U1mzBSJ/cUUgK2yvTjD5iZCutqplSUcWYphuaTvFTUkw==");

	  simSource.onmessage = function(event)
	  {
	  var fields = event.data.split(',');
	  var type = fields[0];
	  var identifier = fields[1];
	  var value = fields[2];
		console.log(fields);
	  var element = document.getElementById(identifier);
	  if (element)
	  {
	  element.className = value;
	  element.textContent=value;
	  }
		};

 	 var logSource = new EventSource('https://kd-playground-functionapp.azurewebsites.net/api/StreamLogs?code=MuFPYxFQhc1q7CaxM2X8e8PLoJGoJWpo/8QUWABctC1g7WCObi9cOQ==');

	  logSource.onmessage = function(event123)
	  {
	  var fields123 = event123.data.split(',');
	  var type123 = fields123[0];
	  var value123 = fields123[1];
	  var element = document.getElementById('log');
	  if (element)
	  {
	    element.textContent += value123;
	  }};

  }
 else {
  console.log("Sorry, your browser does not support server-sent events...");
}
</script>


</body>
</html>