+ working version

Signed-off-by: Johannes Theiner <j.theiner@live.de>

#SPM-27: add work 6h development

src/main/java/de/hsel/spm/baudas/web/ShoppingTimesDiagram.java

@@ -23,6 +23,7 @@ import java.util.Map;
 import java.util.Set;
 import java.util.TreeSet;
 import java.util.UUID;
+import java.util.regex.Pattern;
 
 /**
  * changes data from shopping times diagram into a readable format for chart.js
@@ -34,6 +35,8 @@ import java.util.UUID;
 @WebServlet("/shopping_times")
 public class ShoppingTimesDiagram extends HttpServlet {
 
+    private static Map<UUID, Map> cache = new HashMap<>();
+
     private static final long serialVersionUID = 6567531484L;
 
     @Override
@@ -50,13 +53,21 @@ public class ShoppingTimesDiagram extends HttpServlet {
 
         Gson gson = new Gson();
 
-
+        String id = req.getParameter("id");
-        if (req.getParameter("id") == null) {
+        boolean match = Pattern.matches("[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}", id);
-            result.put("labels", definedOrder);
+        if (id == null || !match) {
-            out.print(gson.toJson(result));
             return;
         }
-        UUID uuid = UUID.fromString(req.getParameter("id"));
+
+        UUID uuid = UUID.fromString(id);
+
+
+        if(cache.containsKey(uuid)) {
+            out.print(gson.toJson(cache.get(uuid)));
+            return;
+        }
+
+
         File file = Data.get(uuid);
 
         ShoppingTimes shoppingTimes = new ShoppingTimes(file);
@@ -81,7 +92,7 @@ public class ShoppingTimesDiagram extends HttpServlet {
             }
         }
 
-
+        cache.put(uuid, result);
         out.print(gson.toJson(result));
 
     }

src/main/java/de/hsel/spm/baudas/web/TopFlopArticleDiagram.java

@@ -13,6 +13,7 @@ import java.io.IOException;
 import java.io.PrintWriter;
 import java.nio.charset.StandardCharsets;
 import java.util.*;
+import java.util.regex.Pattern;
 
 /**
  * @author Johannes Theiner
@@ -23,6 +24,8 @@ import java.util.*;
 @WebServlet("/top_flop")
 public class TopFlopArticleDiagram extends HttpServlet {
 
+    private static Map<UUID, Map> cache = new HashMap<>();
+
     private static final long serialVersionUID = 6567531464214L;
 
     @Override
@@ -34,7 +37,19 @@ public class TopFlopArticleDiagram extends HttpServlet {
 
         Gson gson = new Gson();
 
-        UUID uuid = UUID.fromString(req.getParameter("id"));
+        String id = req.getParameter("id");
+        boolean match = Pattern.matches("[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}", id);
+        if(id == null || !match) {
+            return;
+        }
+
+        UUID uuid = UUID.fromString(id);
+
+        if(cache.containsKey(uuid)) {
+            out.println(gson.toJson(cache.get(uuid)));
+            return;
+        }
+
         File file = Data.get(uuid);
 
         TopFlopArticle articles = new TopFlopArticle(file);
@@ -53,6 +68,8 @@ public class TopFlopArticleDiagram extends HttpServlet {
         result.put("labels", labels);
         result.put("data", data);
 
+
+        cache.put(uuid, result);
         out.print(gson.toJson(result));
     }
 }

src/main/java/de/hsel/spm/baudas/web/Upload.java

@@ -48,7 +48,5 @@ public class Upload extends HttpServlet {
         }
 
         Files.copy(inputStream, path, StandardCopyOption.REPLACE_EXISTING);
-
-        resp.sendRedirect("");
     }
 }

src/main/java/de/hsel/spm/baudas/web/WeekOverviewDiagram.java

@@ -19,6 +19,7 @@ import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 import java.util.UUID;
+import java.util.regex.Pattern;
 
 /**
  * changes data from week overview into readable format for chart.js
@@ -30,6 +31,8 @@ import java.util.UUID;
 @WebServlet("/week_overview")
 public class WeekOverviewDiagram extends HttpServlet {
 
+    private static Map<UUID, Map> cache = new HashMap<>();
+
     private static final long serialVersionUID = 8484151844118L;
 
 
@@ -45,16 +48,20 @@ public class WeekOverviewDiagram extends HttpServlet {
 
         Gson gson = new Gson();
 
+        String id = req.getParameter("id");
+        boolean match = Pattern.matches("[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}", id);
 
-        if (req.getParameter("id") == null) {
+
-            result.put("labels", definedOrder);
+        if (id == null || !match) {
-            result.put("count", new ArrayList<>());
+            return;
-            result.put("revenue", new ArrayList<>());
+        }
-            out.print(gson.toJson(result));
+
+        UUID uuid = UUID.fromString(id);
+        if(cache.containsKey(uuid)) {
+            out.println(gson.toJson(cache.get(uuid)));
             return;
         }
 
-        UUID uuid = UUID.fromString(req.getParameter("id"));
         File file = Data.get(uuid);
 
         WeekOverview overview = new WeekOverview(file);
@@ -79,6 +86,7 @@ public class WeekOverviewDiagram extends HttpServlet {
         result.put("count", count);
         result.put("revenue", revenue);
 
+        cache.put(uuid, result);
         out.print(gson.toJson(result));
     }
 }

src/main/webapp/footer.jsp

@@ -12,6 +12,7 @@
     M.AutoInit();
 </script>
 
+<script src="js/upload.js"></script>
 <script src="js/cache.js"></script>
 <script src="js/week_overview.js"></script>
 <script src="js/shopping_times.js"></script>

src/main/webapp/header.jsp

@@ -12,6 +12,7 @@
           media="screen,projection"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"
           integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous"/>
+
     <meta charset="UTF-8">
     <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8">
 
@@ -37,7 +38,7 @@
         <div class="nav-wrapper col 2 right">
             <ul class="right hide-on-med-and-down">
                 <li><a data-target="slide-out" class="sidenav-trigger show-on-large"><i
-                        class="material-icons left">menu</i>Men&uuml;</a></li><!--Sidenav-->
+                        class="material-icons left">menu</i>Datens&auml;tze</a></li><!--Sidenav-->
                 <li><a href="login.html"><i class="material-icons left">person_outline</i>Logout</a></li><!--Logout-->
             </ul>
             <ul class="right">
@@ -77,13 +78,13 @@
     <li>
         <div class="divider"></div>
     </li>
-    <form action="upload" method="post" enctype="multipart/form-data">
+    <form action="upload" method="post" enctype="multipart/form-data" id="upload">
         <li>
             <br>
             <div class="file-field input-field container">
                 <div class="btn blue-grey lighten-2">
                     <span>File</span>
-                    <input type="file" name="file">
+                    <input type="file" name="file" id="file">
                 </div>
                 <div class="file-path-wrapper">
                     <input class="file-path validate" type="text" placeholder="Datei hochladen">
@@ -91,9 +92,80 @@
             </div>
         </li>
         <li>
-            <div class="col s12 offset-s6">
+            <div class="col s12">
-                <button class="btn blue-grey waves-effect waves-light" type="submit" name="action">Hochladen<i class="material-icons right">file_upload</i></button>
+                <button class="btn blue-grey waves-effect waves-light" type="submit" name="action">Hochladen<i
+                        class="material-icons right">file_upload</i></button>
             </div>
         </li>
     </form>
-</ul>
+
+</ul>
+
+
+<!-- Modal Structure -->
+<div id="loading" class="modal">
+    <div class="modal-content">
+        <div class="row">
+            <div class="col s1">
+                <div class="preloader-wrapper big active">
+                    <div class="spinner-layer spinner-blue">
+                        <div class="circle-clipper left">
+                            <div class="circle"></div>
+                        </div>
+                        <div class="gap-patch">
+                            <div class="circle"></div>
+                        </div>
+                        <div class="circle-clipper right">
+                            <div class="circle"></div>
+                        </div>
+                    </div>
+
+                    <div class="spinner-layer spinner-red">
+                        <div class="circle-clipper left">
+                            <div class="circle"></div>
+                        </div>
+                        <div class="gap-patch">
+                            <div class="circle"></div>
+                        </div>
+                        <div class="circle-clipper right">
+                            <div class="circle"></div>
+                        </div>
+                    </div>
+
+                    <div class="spinner-layer spinner-yellow">
+                        <div class="circle-clipper left">
+                            <div class="circle"></div>
+                        </div>
+                        <div class="gap-patch">
+                            <div class="circle"></div>
+                        </div>
+                        <div class="circle-clipper right">
+                            <div class="circle"></div>
+                        </div>
+                    </div>
+
+                    <div class="spinner-layer spinner-green">
+                        <div class="circle-clipper left">
+                            <div class="circle"></div>
+                        </div>
+                        <div class="gap-patch">
+                            <div class="circle"></div>
+                        </div>
+                        <div class="circle-clipper right">
+                            <div class="circle"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <h3 class="center-align">Analyse wird durchgef&uuml;hrt</h3>
+
+    </div>
+    <div class="modal-footer">
+
+    </div>
+</div>
+
+
+

src/main/webapp/js/cache.js

@@ -1,4 +1,33 @@
+let loading = $('#loading');
+
+Chart.plugins.register({
+    afterDraw: function(chart) {
+        if (chart.data.datasets[0].data.length === 0) {
+            // No data is present
+            var ctx = chart.chart.ctx;
+            var width = chart.chart.width;
+            var height = chart.chart.height;
+            chart.clear();
+
+            ctx.save();
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.font = "16px normal 'Helvetica Nueue'";
+            ctx.fillText('Kein Datenset ausgewählt', width / 2, height / 2);
+            ctx.restore();
+        }
+    }
+});
+
 $(document).ready(function () {
+    updateDatasets();
+});
+
+function clearSelected(){
+    $('#dataset').prop('selectedIndex', -1);
+}
+
+function updateDatasets() {
     let dataset = $('#dataset');
     request('files').then(results => {
         dataset.empty();
@@ -11,7 +40,7 @@ $(document).ready(function () {
         dataset.formSelect();
     });
     updateCache();
-});
+}
 
 /**
  * update all charts with correct values for dataset

src/main/webapp/js/shopping_times.js

@@ -3,10 +3,10 @@ let shopping_result;
 let shopping_chart = new Chart(document.getElementById("shopping_times_chart"), {
     type: 'bar',
     data: {
-        labels: [1, 2, 3, 4, 5],
+        labels: [],
         datasets: [{
             label: 'Anzahl verkaufter Artikel',
-            data: [0, 0, 0, 0, 0],
+            data: [],
             backgroundColor: [
                 'rgba(143, 170, 220, 0.9)',
                 'rgba(143, 170, 220, 0.9)',

src/main/webapp/js/upload.js

@@ -0,0 +1,38 @@
+let form = document.getElementById("upload");
+
+form.onsubmit = function (event) {
+    event.preventDefault();
+    let formData = new FormData(form);
+
+    formData.append('file', document.getElementById("file"));
+
+    let xhr = new XMLHttpRequest();
+
+    xhr.onloadstart = function(e) {
+        loading.removeClass("hide");
+        $('.sidenav').sidenav('close');
+        loading.modal('open');
+    }
+
+    xhr.upload.addEventListener("progress", function (event) {
+        if (event.lengthComputable) {
+            self.progress = Math.round(100 / event.total * event.loaded);
+        } else if (this.explicitTotal) {
+            self.progress = Math.min(1, event.loaded / self.explicitTotal);
+        } else {
+            self.progress = 0;
+        }
+
+    }, false);
+
+    xhr.onloadend = function (e) {
+        clearSelected();
+        updateDatasets();
+        form.reset();
+    };
+
+    xhr.open('POST', form.getAttribute('action'), true);
+    xhr.send(formData);
+
+    return false;
+};

src/main/webapp/js/week_overview.js

@@ -3,16 +3,16 @@ let week_result;
 let week_overview = new Chart($("#overview_chart"), {
     type: 'line',
     data: {
-        labels: [0, 0, 0, 0, 0],
+        labels: [],
         datasets: [{
             label: "Warenanzahl",
-            data: [0, 0, 0, 0, 0],
+            data: [],
             fill: true,
             backgroundColor: 'rgba(104, 216, 154, 0.5)',
             lineTension: 0
         }, {
             label: "Einnahmen in €",
-            data: [0, 0, 0, 0, 0],
+            data: [],
             fill: true,
             backgroundColor: 'rgba(113, 114, 231, 1)',
             lineTension: 0
@@ -71,5 +71,5 @@ function updateWeekOverview() {
     week_overview.data.datasets[0].data = week_result.count;
     week_overview.data.datasets[1].data = week_result.revenue;
     week_overview.update();
-
+    loading.modal('close');
 }