-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (163 loc) · 7.53 KB
/
index.html
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<html>
<head>
<title>Javascript (Simple) Process Scheduling Simulator</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/ripples.min.css" rel="stylesheet">
<link href="css/material-wfont.min.css" rel="stylesheet">
<script type="text/javascript" src="js/lib/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ripples.min.js"></script>
<script src="js/material.min.js"></script>
<script type="text/javascript" src="src/jsProScheSim.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<div class="container">
<h1>Javascript (Simple) Process Scheduling Simulator</h1>
<h3 class="text-muted">This is a sample application using the jsProScheSim simulator</h3>
<p>First configure the system with the desired parameters.</p>
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#systemPanel" aria-controls="systemPanel" role="tab" data-toggle="tab">System</a></li>
<li role="presentation"><a href="#queuesPanel" aria-controls="queuesPanel" role="tab" data-toggle="tab">Queues</a></li>
<li role="presentation"><a href="#processesPanel" aria-controls="processesPanel" role="tab" data-toggle="tab">Processes</a></li>
<li role="presentation"><a href="#summaryPanel" aria-controls="summaryPanel" role="tab" data-toggle="tab">Summary</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="systemPanel">
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<label for="processors">Number of CPUs</label>
<input type="number" class="form-control" id="processors" placeholder="Enter # processors">
</div>
<a id="setProcessorsButton" href="javascript:void(0)" class="btn btn-warning"><i class="mdi-action-done"></i> Set processors</a>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="queuesPanel">
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<label for="queue_name">Name</label>
<input type="text" class="form-control" id="queue_name" placeholder="Name">
</div>
<div class="form-group">
<label for="queue_priority">Priority</label>
<input type="text" class="form-control" id="queue_priority" placeholder="Priority">
</div>
<div class="form-group">
<label for="queue_policy">Policy</label>
<select id="queue_policy" class="form-control">
<option value="FCFS">FCFS</option>
<option value="RoundRobin">RoundRobin</option>
<option value="SRT">SRT</option>
</select>
</div>
<div id="queue_quantum_group" class="form-group hidden">
<label for="queue_quantum">Quantum</label>
<input type="number" id="queue_quantum" class="form-control" placeholder="Quantum">
</div>
<a id="addQueueButton" href="javascript:void(0)" class="btn btn-warning"><i class="mdi-action-done"></i> Add queue</a>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="processesPanel">
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<label for="process_name">Name</label>
<input type="text" class="form-control" id="process_name" placeholder="Name">
</div>
<div class="form-group">
<label for="process_queue">Queue</label>
<select id="process_queue" class="form-control">
</select>
</div>
<div class="form-group">
<label for="process_arrivalTime">Arrival time</label>
<input type="number" class="form-control" id="process_arrivalTime" placeholder="Arrival time">
</div>
<div class="form-group">
<label for="process_priority">Priority</label>
<input type="number" class="form-control" id="process_priority" placeholder="Priority">
</div>
<div class="form-group">
<label for="process_exec">Execution bursts</label>
<input type="text" class="form-control" id="process_exec" placeholder="Execution bursts">
<span class="help-block">Type 0 for a CPU burst and 1 for an I/O burst. Example: 01001110 means 1CPU, 1I/O, 2CPU, 3I/O, 1CPU</span>
</div>
<a id="addProcessButton" href="javascript:void(0)" class="btn btn-success"><i class="mdi-action-done"></i> Add process</a>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="summaryPanel">
<div class="panel panel-default">
<div class="panel-body">
<div class="panel panel-primary">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
<samp>Processors: <span id="summary_processors" class="badge">0</span></samp>
</li>
<li class="list-group-item">
<samp>Queues: <span id="summary_queues_number" class="badge">0</span></samp>
<ul class="list-group" id="summary_queues">
</ul>
</li>
<li class="list-group-item">
<samp>Processes: <span id="summary_process_number" class="badge">0</span></samp>
<ul class="list-group" id="summary_processes">
</ul>
</li>
</ul>
<a id="readySimButton" href="javascript:void(0)" class="btn btn-primary disabled"><i class="mdi-action-input"></i> Ready</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bs-component">
<div class="progress progress-striped active">
<div id="progressBar" class="progress-bar"></div>
</div>
</div>
<p>When the configuration is done, click on the 'Next step' button in order to start the simulation.</p>
<a id="nextStepButton" href="javascript:void(0)" class="btn btn-primary disabled"><i class="mdi-av-skip-next"></i> Next step</a>
<div class="panel panel-success" style="overflow: auto;">
<div class="panel-heading">
<h3 class="panel-title">Simulation result</h3>
</div>
<div class="panel-body">
<div class="bs-component" id="result">
No results yet.
</div>
</div>
</div>
</div>
<!-- Modal alerts -->
<div class="modal fade" id="modalAlert" tabindex="-1" role="dialog" aria-labelledby="modalAlertLabel" aria-hidden="true">
<div class="modal-dialog">
<div id="modalAlertContent" class="modal-content alert">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="modalAlertLabel"></h4>
</div>
<div class="modal-body" id="modalAlertBody"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$.material.init();
});
</script>
</body>
</html>