main/webapp/index.html

<html>
  <head>
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <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/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);
        
        
        $(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
                } );
                
        });
        
});

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