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("TaskServlet", 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 += entry.detail;
                        
                        html += "<br/><div style='font-size: 8px; margin: 7px;'>" + entry.state + "</div>";
                        
                        html += "</div>";
                        
                });
                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');
        });
        
});

</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">Actions</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>
      </div>
    </div>
      
  </div>
</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/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	$.get("TaskServlet", function(data) {
23	//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
46	html += entry.detail;
47
48	html += "<br/><div style='font-size: 8px; margin: 7px;'>" + entry.state + "</div>";
49
50	html += "</div>";
51
52	});
53	if (html == "") {
54	html = "<div class='panel panel-primary'>Queue is empty</div>";
55	}
56
57	$("#queue").html(html);
58
59	}, "json");
60	}
61
62	function genUploadExtraData (previewId, index) {
63	var dist = $("#distributor").val();
64	var wb = $("#writeback").val();
65
66	var obj = {
67	distributor: dist,
68	writeback: wb
69	};
70
71	return obj;
72	}
73
74	$(document).ready( function() {
75	loadTasks();
76	setInterval(loadTasks, 2500);
77
78
79	$("#file").fileinput({
80	//'showUpload':false,
81	'showRemove': false,
82	'showPreview': false,
83	'showUpload': false,
84	'uploadUrl': 'FileUploadServlet',
85	'uploadExtraData': genUploadExtraData, //brug callback til at finde ekstra data
86
87	'maxFileCount': 1,
88	'minFileCount': 1
89
90
91	});
92
93	$("#uploadBtn").click( function() {
94	var dist = $("#distributor").val();
95	if (dist == "") {
96	alert("Du skal vælge distributør");
97	return;
98	}
99
100	$('#file').fileinput('upload');
101	});
102
103	});
104
105	</script>
106
107	</head>
108	<body>
109
110	<div class="container">
111	<div class="page-header">
112	<h1>Dao Adresse Vedligehold</h1>
113	</div>
114	<div id="body">
115	<div class="row">
116	<div class="col-sm-3" id="leftCol" >
117	<div class="panel panel-primary">
118	<div class="panel-heading">
119	<h3 class="panel-title">Queue</h3>
120	</div>
121	<div class="panel-body" id="queue">
122
123
124
125	</div>
126	</div>
127	</div>
128
129	<div class="col-sm-6" id="center" >
130	b
131	</div>
132
133	<div class="col-sm-3" id="rightCol" >
134	<div class="panel panel-primary">
135	<div class="panel-heading">
136	<h3 class="panel-title">Actions</h3>
137	</div>
138	<div class="panel-body">
139
140
141	<label for="distributor">Distributør:</label>
142	<select class="form-control" id="distributor" name="distributor">
143	<option></option>
144	<option>BK</option>
145	<!--
146	<option>DAO</option>
147	<option>FD</option>
148	<option>NS</option>
149	-->
150	</select>
151
152	<label for="writeback">Write-back:</label>
153	<select class="form-control" id="writeback" name="writeback">
154	<option value="false">Nej</option>
155	<option value="true">Ja</option>
156	</select>
157
158
159	<label class="control-label">Select File</label>
160
161	<input type="hidden" name="distributor" value="BK">
162	<input type="file" name="file" id="file"><br>
163
164	<button class="btn btn-primary" id="uploadBtn">Upload</button>
165
166
167
168	</div>
169	</div>
170	</div>
171	</div>
172
173	</div>
174	</div>
175
176
177
178	</body>
179	</html>