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" />

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