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] +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>");
+}