From c087ed77068825a05d5615a95ecc9d3ccb60b608 Mon Sep 17 00:00:00 2001
From: Julian Hinxlage <hinxlage.julian@web.de>
Date: Mon, 27 May 2019 09:06:04 +0200
Subject: [PATCH 1/3] + table for clusters (gui)

---
 .../hsel/spm/baudas/web/ClusterDiagram.java   | 47 +++++++++++++++++++
 src/main/webapp/footer.jsp                    |  1 +
 src/main/webapp/index.jsp                     |  3 +-
 src/main/webapp/js/cache.js                   |  1 +
 src/main/webapp/js/clusters.js                | 39 +++++++++++++++
 5 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 src/main/java/de/hsel/spm/baudas/web/ClusterDiagram.java
 create mode 100644 src/main/webapp/js/clusters.js

diff --git a/src/main/java/de/hsel/spm/baudas/web/ClusterDiagram.java b/src/main/java/de/hsel/spm/baudas/web/ClusterDiagram.java
new file mode 100644
index 0000000..4da9a7f
--- /dev/null
+++ b/src/main/java/de/hsel/spm/baudas/web/ClusterDiagram.java
@@ -0,0 +1,47 @@
+package de.hsel.spm.baudas.web;
+
+import com.google.gson.Gson;
+import de.hsel.spm.baudas.analysis.Cluster;
+import org.jetbrains.annotations.NotNull;
+
+import javax.servlet.annotation.WebServlet;
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import java.io.File;
+import java.io.IOException;
+import java.io.PrintWriter;
+import java.nio.charset.StandardCharsets;
+import java.util.*;
+
+/**
+ * changes data from cluster analysis into a readable format
+ *
+ * @author Julian Hinxlage
+ * @version 0.1
+ * @since 0.1
+ **/
+@WebServlet("/clusters")
+public class ClusterDiagram extends HttpServlet {
+    @Override
+    protected void doGet(@NotNull HttpServletRequest req, @NotNull HttpServletResponse resp) throws IOException {
+        req.setCharacterEncoding(StandardCharsets.UTF_8.name());
+        resp.setCharacterEncoding(StandardCharsets.UTF_8.name());
+        resp.setContentType("application/json");
+        PrintWriter out = resp.getWriter();
+
+        Map<Integer, Map<String, String>> result = new HashMap<>();
+        Gson gson = new Gson();
+
+        if (req.getParameter("id") == null) {
+            out.print(gson.toJson(result));
+            return;
+        }
+        UUID uuid = UUID.fromString(req.getParameter("id"));
+        File file = Data.get(uuid);
+
+        Cluster cluster = new Cluster(file);
+        result = cluster.getResult();
+        out.print(gson.toJson(result));
+    }
+}
diff --git a/src/main/webapp/footer.jsp b/src/main/webapp/footer.jsp
index 5e91340..b496efb 100644
--- a/src/main/webapp/footer.jsp
+++ b/src/main/webapp/footer.jsp
@@ -16,6 +16,7 @@
 <script src="js/week_overview.js"></script>
 <script src="js/shopping_times.js"></script>
 <script src="js/top_flop.js"></script>
+<script src="js/clusters.js"></script>
 
 <%--<script src="js/sold_articles.js"></script>--%>
 
diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp
index 6879491..6d0cb93 100644
--- a/src/main/webapp/index.jsp
+++ b/src/main/webapp/index.jsp
@@ -85,7 +85,8 @@
                     <span class="card-title center">Gruppenübersicht</span>
                 </div>
                 <div>
-                    <p>Coming Soon</p>
+                    <tabel id="cluster_table" width="1000" height="400">
+                    </tabel>
                 </div>
             </div>
         </div>
diff --git a/src/main/webapp/js/cache.js b/src/main/webapp/js/cache.js
index 8876e59..e712e2b 100644
--- a/src/main/webapp/js/cache.js
+++ b/src/main/webapp/js/cache.js
@@ -38,6 +38,7 @@ function updateAll(uuid) {
     updateWeekOverviewChart(uuid);
     updateShoppingTimesChart(uuid);
     updateTopFlopChart(uuid);
+    updateClusters(uuid)
     //add new charts here.
 }
 
diff --git a/src/main/webapp/js/clusters.js b/src/main/webapp/js/clusters.js
new file mode 100644
index 0000000..cb04091
--- /dev/null
+++ b/src/main/webapp/js/clusters.js
@@ -0,0 +1,39 @@
+let cluster_result;
+
+function updateClusters(id) {
+    if(typeof id !== 'undefined') {
+        request('clusters', id).then(function (data) {
+            cluster_result = data;
+            drawClusterTable();
+        });
+    }else request('clusters').then(function(data) {
+        cluster_result = data;
+        drawClusterTable();
+    });
+}
+
+function drawClusterTable(){
+    let row = $("<thead>");
+    row.append("<tr>");
+    row.append("<td>Alter</td>");
+    row.append("<td>Wohnort</td>");
+    row.append("<td>Einkaufstag</td>");
+    row.append("<td>Geschlecht</td>");
+    row.append("<td>Familienstand</td>");
+    row.append("<td>Einkaufsuhrzeit</td>");
+    row.append("</tr>");
+    row.append("</thead>");
+    row.append("</tbody>");
+    for(x in cluster_result){
+        row.append($("<tr>"));
+        row.append($("<td>" + cluster_result[x].Alter +"</td>"));
+        row.append($("<td>" + cluster_result[x].Wohnort +"</td>"));
+        row.append($("<td>" + cluster_result[x].Einkaufstag +"</td>"));
+        row.append($("<td>" + cluster_result[x].Geschlecht +"</td>"));
+        row.append($("<td>" + cluster_result[x].Familienstand +"</td>"));
+        row.append($("<td>" + cluster_result[x].Einkaufsuhrzeit +"</td>"));
+        row.append($("</tr>"));
+    }
+    row.append("</tbody>");
+    $("#cluster_table").append(row);
+}

From 2f36e1a4d3ed6f59ef26820369a0628689471644 Mon Sep 17 00:00:00 2001
From: Julian Hinxlage <hinxlage.julian@web.de>
Date: Mon, 27 May 2019 17:33:56 +0200
Subject: [PATCH 2/3] +proper layout for Cluster Table

---
 src/main/webapp/footer.jsp     |  6 +++--
 src/main/webapp/index.jsp      | 30 ++++++++++++-----------
 src/main/webapp/js/clusters.js | 45 +++++++++++++++++++++-------------
 3 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/src/main/webapp/footer.jsp b/src/main/webapp/footer.jsp
index b496efb..fbc7a5f 100644
--- a/src/main/webapp/footer.jsp
+++ b/src/main/webapp/footer.jsp
@@ -1,12 +1,14 @@
 <!--Anfang Skriptbereich-->
 
 <!--Script für Diagramme-->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"
+        integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
 
 
 <!--Script für Materlialize-->
 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+<script type="text/javascript"
+        src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/google-palette@1.1.0/palette.min.js"></script>
 <script>
     M.AutoInit();
diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp
index 6d0cb93..0f73f27 100644
--- a/src/main/webapp/index.jsp
+++ b/src/main/webapp/index.jsp
@@ -63,6 +63,21 @@
         </div>
     </div>
 
+    <!--Gruppenübersicht-->
+    <div class="col s12 m12">
+        <div id="group_overview" class="card white">
+            <div class="card-content">
+                <div class="center">
+                    <span class="card-title center">Gruppenübersicht</span>
+                </div>
+                <div>
+                    <table id="cluster_table">
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!--Warenkorbanlyse-->
     <div id="shopping_card_analysis" class="col s12 m6">
         <div class="card white">
@@ -77,20 +92,7 @@
         </div>
     </div>
 
-    <!--Gruppenübersicht-->
-    <div class="col s12 m6">
-        <div id="group_overview" class="card white">
-            <div class="card-content">
-                <div class="center">
-                    <span class="card-title center">Gruppenübersicht</span>
-                </div>
-                <div>
-                    <tabel id="cluster_table" width="1000" height="400">
-                    </tabel>
-                </div>
-            </div>
-        </div>
-    </div>
+
 </div>
 
 <!--Marketing-Cards-->
diff --git a/src/main/webapp/js/clusters.js b/src/main/webapp/js/clusters.js
index cb04091..f6799b3 100644
--- a/src/main/webapp/js/clusters.js
+++ b/src/main/webapp/js/clusters.js
@@ -15,25 +15,36 @@ function updateClusters(id) {
 function drawClusterTable(){
     let row = $("<thead>");
     row.append("<tr>");
-    row.append("<td>Alter</td>");
-    row.append("<td>Wohnort</td>");
-    row.append("<td>Einkaufstag</td>");
-    row.append("<td>Geschlecht</td>");
-    row.append("<td>Familienstand</td>");
-    row.append("<td>Einkaufsuhrzeit</td>");
+    row.append("<td></td>");
+    for (x in cluster_result){
+        if(x == 0){
+            row.append("<td>" + "&oslash;" + "</td>");
+        }else{
+            row.append("<td>" + x + "</td>");
+        }
+    }
     row.append("</tr>");
     row.append("</thead>");
-    row.append("</tbody>");
-    for(x in cluster_result){
-        row.append($("<tr>"));
-        row.append($("<td>" + cluster_result[x].Alter +"</td>"));
-        row.append($("<td>" + cluster_result[x].Wohnort +"</td>"));
-        row.append($("<td>" + cluster_result[x].Einkaufstag +"</td>"));
-        row.append($("<td>" + cluster_result[x].Geschlecht +"</td>"));
-        row.append($("<td>" + cluster_result[x].Familienstand +"</td>"));
-        row.append($("<td>" + cluster_result[x].Einkaufsuhrzeit +"</td>"));
-        row.append($("</tr>"));
-    }
+
+
+    appendClusterTable(row, "Alter");
+    appendClusterTable(row, "Wohnort");
+    appendClusterTable(row, "Einkaufstag");
+    appendClusterTable(row, "Geschlecht");
+    appendClusterTable(row, "Familienstand");
+    appendClusterTable(row, "Einkaufsuhrzeit");
+
+
     row.append("</tbody>");
     $("#cluster_table").append(row);
 }
+
+function appendClusterTable(row, attrib){
+    row.append("</tbody>");
+    row.append("<tr>");
+    row.append("<td>" + attrib + "</td>");
+    for (x in cluster_result){
+        row.append($("<td>" + cluster_result[x][attrib] +"</td>"));
+    }
+    row.append("</tr>");
+}

From c113b9cda701b97d2265776e32853afd96575f2d Mon Sep 17 00:00:00 2001
From: Julian Hinxlage <hinxlage.julian@web.de>
Date: Mon, 27 May 2019 17:52:25 +0200
Subject: [PATCH 3/3] +cluster table clear before updating

---
 src/main/webapp/js/clusters.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/main/webapp/js/clusters.js b/src/main/webapp/js/clusters.js
index f6799b3..f0dfd22 100644
--- a/src/main/webapp/js/clusters.js
+++ b/src/main/webapp/js/clusters.js
@@ -13,6 +13,11 @@ function updateClusters(id) {
 }
 
 function drawClusterTable(){
+    let table = document.getElementById("cluster_table");
+    while(table.hasChildNodes()){
+        table.removeChild(table.firstChild);
+    }
+
     let row = $("<thead>");
     row.append("<tr>");
     row.append("<td></td>");