main/webapp/index.html

<html>
  <head>
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <link rel="stylesheet" href="webjars/jquery-ui/1.11.4/jquery-ui.css" />

        <link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
        
        <link rel="stylesheet" href="webjars/bootstrap-fileinput/4.2.7/css/fileinput.min.css" />
        
        <style>
        
@media (min-width: 1300px) {
        .container {
            width: 1300px; /*default 1170px*/
        }
}
        </style>

<!--  use webjars for dependencies -->
        <script src="webjars/jquery/2.1.4/jquery.js"></script>
        <script src="webjars/jquery-ui/1.11.4/jquery-ui.js"></script>
        <script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        
        <script src="webjars/bootstrap-fileinput/4.2.7/js/fileinput.min.js"></script>
        
        <script src="webjars/chartjs/1.0.2/Chart.min.js"></script>
        
<script>


function loadTasks() {
        $.get("rest/tasks/list", function(data) {
                //console.log(data);
                
                
                var html = "";
                data.forEach( function(entry) {
                        var pclass;
                        
                        if (entry.state == "STATE_DONE")
                                pclass = "panel-success";
                        
                        if (entry.state == "STATE_RUNNING")
                                pclass = "panel-info";
                        
                        if (entry.state == "STATE_QUEUED")
                                pclass = "panel-warning";               
                        
                        if (entry.state == "STATE_ABORTED")
                                pclass = "panel-danger";
                        
                        
                        html += "<div class='panel " + pclass + "'>";
                        html += "<div class='panel-heading'>";
                        if (entry.state == "STATE_DONE" || entry.state == "STATE_ABORTED" || entry.state ==  "STATE_QUEUED") {
                                html += "<button type='button' class='close removetask' aria-label='Close' taskid='" + entry.id+ "'><span aria-hidden='true'>&times;</span></button>";
                        }
                        html += "<h4 class='panel-title'>" + entry.description + "</h4>";
                        html += "</div>";
                        html += "  <div class='panel-body'>";

                        html += entry.detail;
                        
                        if (entry.state == "STATE_ABORTED")
                                html += "<br><div style='color: red'>" + entry.errorMessage + "</div>";
                                
                        if (entry.state == "STATE_RUNNING") {
                                if (entry.percentCompleted >= 0) {
                                        var percent = entry.percentCompleted.toFixed(2);
                                        html += "<div class='progress'>";
                                        html += "<div class='progress-bar' role='progressbar' aria-valuenow='" + percent + "' aria-valuemin='0' aria-valuemax='100' style='width:" + percent + "%'> " ;
                                        html +=  percent + "%";
                                        html += " </div>";
                                        html += "</div>";
                                }
                        }
                        
                        var viewlog = "";
                        if (entry.state == "STATE_RUNNING" || entry.state == "STATE_DONE" || entry.state == "STATE_ABORTED") {
                                viewlog = "<span style='float: right'><a href='#' class='viewlog' taskid='" + entry.id+ "'>Log</a></span>";
                        }
                        
                        html += "  <div style='font-size: 8px; '>" + entry.state + viewlog + "</div>";
                        
                        html += "  </div>"; //panel-body
                        html += "</div>"; //panel
                        
                });
                if (html == "") {
                        html = "<div class='panel panel-primary'>Queue is empty</div>";
                }
                
                $("#queue").html(html);
                
        }, "json");
}

function genUploadExtraData (previewId, index) {
        var dist = $("#distributor").val();
        var wb = $("#writeback").val();
        
    var obj = {
        distributor: dist,
        writeback: wb
    };
    
    return obj;
}

$(document).ready( function() {
        loadTasks(); 
        setInterval(loadTasks, 5000);
        
        $("#center").resizable({
        handles: 'e, w'
        });
        
        
        $(document).on('click', '.viewlog', function(event) { // Bind future elements
                var taskid = $(this).attr('taskid');
                $("#logview").load('rest/tasks/log/' + taskid);
                
        });
        
        $(document).on('click', '.removetask', function(event) { // Bind future elements
                var taskid = $(this).attr('taskid');
                $.get('rest/tasks/remove/' + taskid, function() {
                        loadTasks();
                });             
        });
        
        $("#file").fileinput({
                //'showUpload':false, 
                'showRemove': false,            
                'showPreview': false,
                'showUpload': false,
                'uploadUrl': 'FileUploadServlet',
                'uploadExtraData': genUploadExtraData, //brug callback til at finde ekstra data
                
                'maxFileCount': 1,
                'minFileCount': 1
                

                });
        
        $("#uploadBtn").click( function() {
                var dist = $("#distributor").val();
                if (dist == "") {
                        alert("Du skal vælge distributør");
                        return;
                }
                
                $('#file').fileinput('upload');
        });
        
        
        $("#afstandBtn").click( function(){
                var dist = $("#afstand_distributor").val();
                if (dist == "") {
                        alert("Du skal vælge distributør");
                        return;
                }
                var type = $("#afstand_type").val();
                var url = "rest/commands/distancecalculation/" + dist + "/" + type;
                
                
                $.get(url, function() {
                        loadTasks(); //Force reload of tasks immediately
                } );
                
        });
        
        $("#dawaBtn").click( function(){
                var regionCode = $("#dawa_region").val();

                
                var regionName = $('#dawa_region option:selected').text();
                var url = "rest/commands/dawa/" + regionCode + "/" + regionName;
                
                
                $.get(url, function() {
                        loadTasks(); //Force reload of tasks immediately
                } );
                
        });

        
});

</script>       
  
  </head>
  <body>
  
<div class="container">
  <div class="page-header">
    <h1>Dao Adresse Vedligehold</h1> 
  </div>
  <div id="body">
    <div class="row"> 
      <div class="col-sm-3" id="leftCol" >
        <div class="panel panel-primary">
                <div class="panel-heading">
                        <h3 class="panel-title">Queue</h3>
                        </div>
                        <div class="panel-body" id="queue">

                        
                        </div>
        </div>
      </div>
      
      <div class="col-sm-6" id="center">
      <pre id="logview">
      </pre>
      </div>
      
      <div class="col-sm-3" id="rightCol" >
        <div class="panel panel-primary">
                <div class="panel-heading">
                        <h3 class="panel-title">Upload File</h3>
                        </div>
                        <div class="panel-body">
                        
                        
                          <label for="distributor">Distributør:</label>
                          <select class="form-control" id="distributor" name="distributor">
                                <option></option>
                            <option>BK</option>
                            <option>DAO</option>
                            <option>FD</option>
                            <option>NS</option>
                          </select>
  
                <label for="writeback">Write-back:</label>
                          <select class="form-control" id="writeback" name="writeback">
                                <option value="false">Nej</option>
                            <option value="true">Ja</option>
                          </select>
                        
                        
                                <label class="control-label">Select File</label>
                        
                        <input type="hidden" name="distributor" value="BK">
                        <input type="file" name="file" id="file"><br>
                        
                        <button class="btn btn-primary" id="uploadBtn">Upload</button>
                                
                                
                        </div>
        </div> <!--  upload panel -->
        
          <div class="panel panel-primary">
                <div class="panel-heading">
                        <h3 class="panel-title">Afstand anden rute</h3>
                        </div>
                        <div class="panel-body">
                        
                        
                          <label for="distributor">Distributør:</label>
                          <select class="form-control" id="afstand_distributor" name="afstand_distributor">
                                <option></option>
                            <option>BK</option>
                            <option>DAO</option>
                          </select>

                          
                          <label for="type">Type:</label>
                          <select class="form-control" id="afstand_type" name="afstand_type">
                            <option>Incremental</option>
                            <option>Full</option>                           
                          </select>
                          <br>

                          
                          <button class="btn btn-primary" id="afstandBtn">Beregn</button>
  
                          
                        </div>
                </div><!-- Afstand-andenrute panel -->

          <div class="panel panel-primary">
                <div class="panel-heading">
                        <h3 class="panel-title">Dawa Indlæsning</h3>
                        </div>
                        <div class="panel-body">
                        
                          <label for="type">Region:</label>
                          <select class="form-control" id="dawa_region" name="dawa_region">
                            <option value="1081">Nordjylland</option>
                            <option value="1082">Midtjylland</option>
                            <option value="1083">Syddanmark</option>
                            <option value="1084">Hovedstaden</option>
                            <option value="1085">Sjælland</option>
                                                    
                          </select>
                          <br>

                          
                          <button class="btn btn-primary" id="dawaBtn">Beregn</button>

                        </div>
                </div> <!-- DAWA -->                    
        
        
      </div><!-- rightcol -->
    </div> <!-- row -->
      
  </div><!-- body -->
  
  
</div> 
  

  </body>
</html>
1	<html>
2	<head>
3	<head>
4	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5
6	<link rel="stylesheet" href="webjars/jquery-ui/1.11.4/jquery-ui.css" />
7
8	<link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
9
10	<link rel="stylesheet" href="webjars/bootstrap-fileinput/4.2.7/css/fileinput.min.css" />
11
12	<style>
13
14	@media (min-width: 1300px) {
15	.container {
16	width: 1300px; /default 1170px/
17	}
18	}
19	</style>
20
21	<!-- use webjars for dependencies -->
22	<script src="webjars/jquery/2.1.4/jquery.js"></script>
23	<script src="webjars/jquery-ui/1.11.4/jquery-ui.js"></script>
24	<script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
25
26	<script src="webjars/bootstrap-fileinput/4.2.7/js/fileinput.min.js"></script>
27
28	<script src="webjars/chartjs/1.0.2/Chart.min.js"></script>
29
30	<script>
31
32
33	function loadTasks() {
34	$.get("rest/tasks/list", function(data) {
35	//console.log(data);
36
37
38	var html = "";
39	data.forEach( function(entry) {
40	var pclass;
41
42	if (entry.state == "STATE_DONE")
43	pclass = "panel-success";
44
45	if (entry.state == "STATE_RUNNING")
46	pclass = "panel-info";
47
48	if (entry.state == "STATE_QUEUED")
49	pclass = "panel-warning";
50
51	if (entry.state == "STATE_ABORTED")
52	pclass = "panel-danger";
53
54
55	html += "<div class='panel " + pclass + "'>";
56	html += "<div class='panel-heading'>";
57	if (entry.state == "STATE_DONE" \|\| entry.state == "STATE_ABORTED" \|\| entry.state == "STATE_QUEUED") {
58	html += "<button type='button' class='close removetask' aria-label='Close' taskid='" + entry.id+ "'><span aria-hidden='true'>×</span></button>";
59	}
60	html += "<h4 class='panel-title'>" + entry.description + "</h4>";
61	html += "</div>";
62	html += " <div class='panel-body'>";
63
64	html += entry.detail;
65
66	if (entry.state == "STATE_ABORTED")
67	html += "<br><div style='color: red'>" + entry.errorMessage + "</div>";
68
69	if (entry.state == "STATE_RUNNING") {
70	if (entry.percentCompleted >= 0) {
71	var percent = entry.percentCompleted.toFixed(2);
72	html += "<div class='progress'>";
73	html += "<div class='progress-bar' role='progressbar' aria-valuenow='" + percent + "' aria-valuemin='0' aria-valuemax='100' style='width:" + percent + "%'> " ;
74	html += percent + "%";
75	html += " </div>";
76	html += "</div>";
77	}
78	}
79
80	var viewlog = "";
81	if (entry.state == "STATE_RUNNING" \|\| entry.state == "STATE_DONE" \|\| entry.state == "STATE_ABORTED") {
82	viewlog = "<span style='float: right'><a href='#' class='viewlog' taskid='" + entry.id+ "'>Log</a></span>";
83	}
84
85	html += " <div style='font-size: 8px; '>" + entry.state + viewlog + "</div>";
86
87	html += " </div>"; //panel-body
88	html += "</div>"; //panel
89
90	});
91	if (html == "") {
92	html = "<div class='panel panel-primary'>Queue is empty</div>";
93	}
94
95	$("#queue").html(html);
96
97	}, "json");
98	}
99
100	function genUploadExtraData (previewId, index) {
101	var dist = $("#distributor").val();
102	var wb = $("#writeback").val();
103
104	var obj = {
105	distributor: dist,
106	writeback: wb
107	};
108
109	return obj;
110	}
111
112	$(document).ready( function() {
113	loadTasks();
114	setInterval(loadTasks, 5000);
115
116	$("#center").resizable({
117	handles: 'e, w'
118	});
119
120
121	$(document).on('click', '.viewlog', function(event) { // Bind future elements
122	var taskid = $(this).attr('taskid');
123	$("#logview").load('rest/tasks/log/' + taskid);
124
125	});
126
127	$(document).on('click', '.removetask', function(event) { // Bind future elements
128	var taskid = $(this).attr('taskid');
129	$.get('rest/tasks/remove/' + taskid, function() {
130	loadTasks();
131	});
132	});
133
134	$("#file").fileinput({
135	//'showUpload':false,
136	'showRemove': false,
137	'showPreview': false,
138	'showUpload': false,
139	'uploadUrl': 'FileUploadServlet',
140	'uploadExtraData': genUploadExtraData, //brug callback til at finde ekstra data
141
142	'maxFileCount': 1,
143	'minFileCount': 1
144
145
146	});
147
148	$("#uploadBtn").click( function() {
149	var dist = $("#distributor").val();
150	if (dist == "") {
151	alert("Du skal vælge distributør");
152	return;
153	}
154
155	$('#file').fileinput('upload');
156	});
157
158
159
160
161	$("#afstandBtn").click( function(){
162	var dist = $("#afstand_distributor").val();
163	if (dist == "") {
164	alert("Du skal vælge distributør");
165	return;
166	}
167	var type = $("#afstand_type").val();
168	var url = "rest/commands/distancecalculation/" + dist + "/" + type;
169
170
171	$.get(url, function() {
172	loadTasks(); //Force reload of tasks immediately
173	} );
174
175	});
176
177	$("#dawaBtn").click( function(){
178	var regionCode = $("#dawa_region").val();
179
180
181
182	var regionName = $('#dawa_region option:selected').text();
183	var url = "rest/commands/dawa/" + regionCode + "/" + regionName;
184
185
186	$.get(url, function() {
187	loadTasks(); //Force reload of tasks immediately
188	} );
189
190	});
191
192
193	});
194
195	</script>
196
197	</head>
198	<body>
199
200	<div class="container">
201	<div class="page-header">
202	<h1>Dao Adresse Vedligehold</h1>
203	</div>
204	<div id="body">
205	<div class="row">
206	<div class="col-sm-3" id="leftCol" >
207	<div class="panel panel-primary">
208	<div class="panel-heading">
209	<h3 class="panel-title">Queue</h3>
210	</div>
211	<div class="panel-body" id="queue">
212
213
214
215	</div>
216	</div>
217	</div>
218
219	<div class="col-sm-6" id="center">
220	<pre id="logview">
221	</pre>
222	</div>
223
224	<div class="col-sm-3" id="rightCol" >
225	<div class="panel panel-primary">
226	<div class="panel-heading">
227	<h3 class="panel-title">Upload File</h3>
228	</div>
229	<div class="panel-body">
230
231
232	<label for="distributor">Distributør:</label>
233	<select class="form-control" id="distributor" name="distributor">
234	<option></option>
235	<option>BK</option>
236	<option>DAO</option>
237	<option>FD</option>
238	<option>NS</option>
239	</select>
240
241	<label for="writeback">Write-back:</label>
242	<select class="form-control" id="writeback" name="writeback">
243	<option value="false">Nej</option>
244	<option value="true">Ja</option>
245	</select>
246
247
248	<label class="control-label">Select File</label>
249
250	<input type="hidden" name="distributor" value="BK">
251	<input type="file" name="file" id="file"><br>
252
253	<button class="btn btn-primary" id="uploadBtn">Upload</button>
254
255
256
257	</div>
258	</div> <!-- upload panel -->
259
260	<div class="panel panel-primary">
261	<div class="panel-heading">
262	<h3 class="panel-title">Afstand anden rute</h3>
263	</div>
264	<div class="panel-body">
265
266
267	<label for="distributor">Distributør:</label>
268	<select class="form-control" id="afstand_distributor" name="afstand_distributor">
269	<option></option>
270	<option>BK</option>
271	<option>DAO</option>
272	</select>
273
274
275	<label for="type">Type:</label>
276	<select class="form-control" id="afstand_type" name="afstand_type">
277	<option>Incremental</option>
278	<option>Full</option>
279	</select>
280	<br>
281
282
283	<button class="btn btn-primary" id="afstandBtn">Beregn</button>
284
285
286	</div>
287	</div><!-- Afstand-andenrute panel -->
288
289	<div class="panel panel-primary">
290	<div class="panel-heading">
291	<h3 class="panel-title">Dawa Indlæsning</h3>
292	</div>
293	<div class="panel-body">
294
295	<label for="type">Region:</label>
296	<select class="form-control" id="dawa_region" name="dawa_region">
297	<option value="1081">Nordjylland</option>
298	<option value="1082">Midtjylland</option>
299	<option value="1083">Syddanmark</option>
300	<option value="1084">Hovedstaden</option>
301	<option value="1085">Sjælland</option>
302
303	</select>
304	<br>
305
306
307	<button class="btn btn-primary" id="dawaBtn">Beregn</button>
308
309	</div>
310	</div> <!-- DAWA -->
311
312
313	</div><!-- rightcol -->
314	</div> <!-- row -->
315
316	</div><!-- body -->
317
318
319	</div>
320
321
322
323	</body>
324	</html>