Added statistics window

KikyTokamuro · Sep 3, 2022 · 0034dce · 0034dce
1 parent 6572ddd
commit 0034dce
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 4 deletions.
diff --git a/index.lisp b/index.lisp
@@ -14,15 +14,19 @@
      (:head
       (:title "todolist")
       (:link :rel "stylesheet" :href "./static/style.css")
-      (:link :rel "stylesheet" :href "https://fonts.googleapis.com/css?family=Ubuntu+Mono")
+      (:link :rel "stylesheet" :href "./static/libs/jquery-ui.css")
+      (:link :rel "stylesheet" :href "./static/libs/liner-bar.css")
       (:link :rel "icon" :type "image/x-icon" :href "./static/images/favicon.ico")
-      (:script :src "https://code.jquery.com/jquery-3.6.0.min.js")
-      (:script :src "https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"))
+      (:script :src "./static/libs/jquery.min.js")
+      (:script :src "./static/libs/jquery-ui.min.js")
+      (:script :src "./static/libs/liner-bar.js"))
      (:body
       (:div :class "todolist-wrapper"
 	    (:div :class "todolist-tools"
 		  (:a :id "generate-csv" :href "/api/generate/csv"
 		      (:img :src "./static/images/csv.svg"))
+		  (:div :id "statistics"
+		      (:img :src "./static/images/stats.svg"))
 		  (:a :href "https://github.com/KikyTokamuro/todolist-cl" :target "_blank"
 		      (version)))
 	    (:div :class "todolist-groups-wrapper"
@@ -47,4 +51,5 @@
 		  (:div :class "separator")
 		  (:div :class "send-task-button"
 			(:img :src "./static/images/send.svg"))))
+      (:div :class "todolist-statistics-modal" :style "display:none" :title "Statistics")
       (:script :type "module" :src "./static/app.js")))))
diff --git a/static/style.css b/static/style.css
@@ -17,10 +17,60 @@ body {
     align-items: center;
 }
 
-#generate-csv {
+#generate-csv,
+#statistics {
     margin-right: 10px;
 }
 
+#statistics img {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}
+
+.ui-button .ui-icon {
+    background-image: url("./images/ui-icons_777777_256x240.png") !important;
+}
+
+.ui-widget-content .ui-icon {
+	background-image: url("./images/ui-icons_444444_256x240.png") !important;
+}
+
+.ui-widget-header .ui-icon {
+	background-image: url("./images/ui-icons_444444_256x240.png") !important;
+}
+
+.ui-widget-header {
+    background: #f4f4f4 !important;
+}
+
+.ui-button:active {
+    border: 1px solid #ebebeb !important;
+    background: #ebebeb !important;
+}
+
+.todolist-statistics-modal {
+    overflow-y: scroll;
+}
+
+.statistic-element {
+    margin-bottom: 10px;
+}
+
+.liner-bar-card {
+    border-radius: 3px !important;
+    border: 1px solid rgba(34, 60, 80, 0.18) !important;
+    box-shadow: none !important;
+}
+
+.liner-bar-card-title {
+    font-size: 17px !important;
+}
+
+.liner-bar-progess-item {
+    border-radius: 3px !important;
+}
+
 .todolist-tools a,
 .todolist-tools a:visited,
 .todolist-tools a:hover,

diff --git a/static/ui.js b/static/ui.js
@@ -46,9 +46,52 @@ export class TodolistUI {
                 .click((event) => this.createTodo(event));
             $("#search-input")
                 .keyup((event) => this.searchTodo(event));
+            $("#statistics")
+                .click(() => this.showStatistics());
         });
     };
 
+    /**
+     * Show statistics modal window
+     */
+    showStatistics () {
+        this.api.getTodosStats().done((data) => {
+            let content = "";
+            let lineData = [];
+
+            // Setup data
+            Object.entries(data).forEach((group) => {
+                content += `<div class="statistic-element" data-group="${group[1].ORIGNAME}"></div>`;
+                lineData.push({
+                    title: group[1].ORIGNAME,
+                    items: [
+                        { name: "TODO",  value: group[1].TODO,  color: "#999999" }, 
+                        { name: "DOING", value: group[1].DOING, color: "#555555" },
+                        { name: "DONE",  value: group[1].DONE,  color: "#222222" },
+                    ]
+                });
+            });
+
+            // Show modal window
+            $(".todolist-statistics-modal").dialog({
+                height: window.innerHeight / 1.2,
+                width: window.innerWidth / 2,
+                modal: true,
+                open: function( event, ui ) {
+                    $(event.target).html(content);
+
+                    // Setup liner bars
+                    lineData.forEach((element) => {
+                        (new LinerBar(
+                            `.statistic-element[data-group="${element.title}"]`, 
+                            element
+                        )).render();
+                    });
+                }
+            });
+        })
+    };
+
     /**
      * Generate html for todo element
      *