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*/
        }
        .panel-actions {
          margin-top: -20px;
          margin-bottom: 0;
          text-align: right;
        }
        .panel-actions a {
          color:#333;
        }
        .panel-fullscreen {
            display: block;
            z-index: 9999;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            overflow: auto;
        }       
        
}
        </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 url = "rest/commands/dawa";
                
                
                $.get(url, function() {
                        loadTasks(); //Force reload of tasks immediately
                } );
                
        });
        
    //Toggle fullscreen
    $("#panel-fullscreen").click(function (e) {
        e.preventDefault();
        
        var $this = $(this);
    
        if ($this.children('i').hasClass('glyphicon-resize-full'))
        {
            $this.children('i').removeClass('glyphicon-resize-full');
            $this.children('i').addClass('glyphicon-resize-small');
        }
        else if ($this.children('i').hasClass('glyphicon-resize-small'))
        {
            $this.children('i').removeClass('glyphicon-resize-small');
            $this.children('i').addClass('glyphicon-resize-full');
        }
        $(this).closest('.panel').toggleClass('panel-fullscreen');
    });

        
});

</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">
        <div class="panel panel-primary">
                <div class="panel-heading">
                        <h3 class="panel-title">Log</h3>
                         <ul class="list-inline panel-actions">

                        <li><a href="#" id="panel-fullscreen" role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
                        
                  </ul>
                        </div>
                        <div class="panel-body">
                            <pre id="logview">
                        </pre>
                        </div>
                </div>
      </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">
                          
                          <button class="btn btn-primary" id="dawaBtn">Beregn</button>

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

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