new page structure, amend table js plugin for frontend

resources/public/css/public.css

@@ -104,6 +104,11 @@ body {
     font-family: 'jetbrains-mono';
 }
 
+.breadcrumb img {
+    height: 1.4rem;
+    margin: 0 .6rem;
+}
+
 .breadcrumb-item + .breadcrumb-item::before {
     content: "//";
 }
@@ -130,3 +135,49 @@ h1 {
 h2 {
     font-weight: bold;
 }
+
+.tbl-toolbar {
+    display: flex;
+    margin-bottom: .5rem;
+    padding-top: .2rem;
+    padding-right: .2rem;
+}
+
+.tbl-toolbar .row-info {
+    flex-grow: 99;
+}
+
+.tbl-toolbar .rows::before {
+    content: " (";
+}
+
+.tbl-toolbar .rows::after {
+    content: " Zeilen)";
+}
+
+.tbl-toolbar .search {
+    display: inline;
+    width: auto;
+}
+
+.tbl-toolbar button {
+    margin-left: .5rem;
+}
+
+.tbl-toolbar .prev::after {
+    content: " << ";
+}
+
+.tbl-toolbar .next::after {
+    content: " >> ";
+}
+
+table [data-sort="desc"]::after {
+    content: "⇩";
+    display: inline;
+}
+
+table [data-sort="asc"]::after {
+    content: "⇧";
+    diplay: inline;
+}

resources/public/img/klammer.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg width="68.013" height="198.4" version="1.1" viewBox="0 0 68.013 198.4" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata>
+<style type="text/css">
+	.st0{fill:#565656;}
+	.st1{fill:#FFCC00;}
+	.st2{fill:#FFFFFF;}
+</style>
+
+
+<path class="st1" d="m60.513 198.4h-25.2c-4.1 0-7.5-3.4-7.5-7.5v-35h-20.3c-2.7 0-5.1-1.4-6.5-3.7-1.3-2.3-1.4-5.2 0-7.5l26.8-47.2v-90c0-4.1 3.4-7.5 7.5-7.5h25.2c4.1 0 7.5 3.4 7.5 7.5s-3.4 7.5-7.5 7.5h-17.7v84.5c0 1.3-0.3 2.6-1 3.7l-21.4 37.7h14.9c4.1 0 7.5 3.4 7.5 7.5v35h17.7c4.1 0 7.5 3.4 7.5 7.5s-3.3 7.5-7.5 7.5z" fill="#fc0"/>
+</svg>

resources/public/js/scripts.js

@@ -99,7 +99,8 @@ document.addEventListener('DOMContentLoaded', function () {
             const btn = document.createElement('button')
             btn.classList.add('prev')
             btn.classList.add('pg-btn')
-            btn.innerText = 'Prev'
+            btn.classList.add('btn')
+            btn.classList.add('btn-light')
             return btn;
         }
 
@@ -107,7 +108,8 @@ document.addEventListener('DOMContentLoaded', function () {
             const btn = document.createElement('button')
             btn.classList.add('next')
             btn.classList.add('pg-btn')
-            btn.innerText = 'Next'
+            btn.classList.add('btn')
+            btn.classList.add('btn-light')
             return btn
         }
 
@@ -130,6 +132,7 @@ document.addEventListener('DOMContentLoaded', function () {
         function searchBox() {
             const input = document.createElement('input')
             input.classList.add('search')
+            input.classList.add('form-control')
             input.type = 'search'
             input.placeholder = 'search...'
             return input
@@ -268,6 +271,9 @@ document.addEventListener('DOMContentLoaded', function () {
         }
 
         document.querySelectorAll('table').forEach(function (tbl) {
+            if (tbl.classList.contains('no-sort')) {
+                return
+            }
             const ctx = addToolbar(tbl)
             changePage(ctx, 0)
             enableSorting(ctx)

src/wanijo/public/db.clj

@@ -61,14 +61,14 @@
       :coc
       (assoc :key coc-key)))
 
-(neo4j/defquery level
+(neo4j/defquery instance
-  "MATCH (level:instance {uuid:{uuid}})
+  "MATCH (i:instance {uuid:{uuid}})
-   RETURN level")
+   RETURN i")
-(defn level! [uuid]
+(defn instance! [uuid]
-  (-> (neo4j/exec-query! level
+  (-> (neo4j/exec-query! instance
                          {:uuid uuid})
       first
-      :level))
+      :i))
 
 (neo4j/defquery modules-with-comps
   "MATCH (level:instance {uuid:{level_uuid}}),
@@ -99,3 +99,22 @@
                           {:level_uuid "140962fb-f55e-45ab-87fc-680c012bd8dc"
                            :moduleschema_uuid (:module schema-uuids)
                            :compschema_uuid (:component schema-uuids)}))
+
+(neo4j/defquery modules-and-levels
+  "MATCH (role:instance {uuid:{role_uuid}}),
+         (lschema:schema {uuid:{levelschema_uuid}}),
+         (level:instance)-[:of]->(lschema),
+         (role)--(:link)--(level),
+         (mschema:schema {uuid:{moduleschema_uuid}}),
+         (module:instance)-[:of]->(mschema),
+         (level)--(:link)--(module)
+   RETURN module, level
+   ORDER BY level, module")
+(defn modules-and-levels! [role-uuid]
+  (neo4j/exec-query! modules-and-levels
+                     {:role_uuid role-uuid
+                      :moduleschema_uuid (:module schema-uuids)
+                      :levelschema_uuid (:level schema-uuids)}))
+(comment
+  (modules-and-levels! "d97628f4-477d-49d7-a1c1-2fd643a0ee65")
+  (instance! "d97628f4-477d-49d7-a1c1-2fd643a0ee65"))

src/wanijo/public/routes.clj

@@ -11,15 +11,26 @@
   (view-public/show-coc (db-public/coc! coc-key)
                         (db-public/roles-with-levels-of-coc! coc-key)))
 
-(defn show-modules [coc-key level-uuid]
+(defn show-level [coc-key level-uuid]
-  (view-public/show-modules
+  (view-public/show-level
    (db-public/coc! coc-key)
-   (db-public/level! level-uuid)
+   (db-public/instance! level-uuid)
    (db-public/modules-with-comps! level-uuid)))
 
+(defn show-role [coc-key role-uuid]
+  (view-public/show-role
+   (db-public/coc! coc-key)
+   (db-public/instance! role-uuid)
+   (db-public/modules-and-levels! role-uuid)))
+
 (defroutes routes
   (GET (register! :public-index "/public") [] (index))
-  (GET (register! :public-coc-roles "/public/:coc") [coc] (show-coc coc))
+  (GET (register! :public-coc "/public/:coc")
-  (GET (register! :public-role-modules "/public/:coc/:level")
+       [coc]
+       (show-coc coc))
+  (GET (register! :public-level "/public/:coc/level/:level")
        [coc level]
-       (show-modules coc level)))
+       (show-level coc level))
+  (GET (register! :public-role "/public/:coc/role/:role")
+       [coc role]
+       (show-role coc role)))

src/wanijo/public/view.clj

@@ -3,16 +3,27 @@
             [hiccup.core :refer [h]]
             [wanijo.infrastructure.routing :refer [path]]))
 
-(defn layout [content]
+(defn breadcrumb [& links]
+  [:nav
+   [:ol.breadcrumb
+    (into
+     [:li.breadcrumb-item
+      [:a {:href (path :public-index)}
+       [:img {:src "/img/klammer.svg"}]
+       "Start"]]
+     links)]])
+
+(defn layout [title content]
   (html5
    [:head
     [:meta {:charset "utf-8"}]
     [:meta {:name "viewport"
             :content "width=device-width,initial-scale=1,shrink-to-fit=no"}]
-    [:title "Moxie!"]
+    [:title title " - Moxie!"]
     (include-css "/css/bootstrap.min.css"
                  "/css/public.css")
-    (include-js "/js/bootstrap.min.js")]
+    (include-js "/js/bootstrap.min.js"
+                "/js/scripts.js")]
    [:body
     [:nav.navbar.navbar-expand-lg.sticky-top
      [:a.navbar-brand {:href (path :public-index)}
@@ -30,18 +41,19 @@
      [:menu.global-nav
       [:ol.global-nav__card-nav
        [:li.global-nav__card-nav-item
-        [:a.global-nav__link {:href (path :public-coc-roles {:coc "dev"})}
+        [:a.global-nav__link {:href (path :public-coc {:coc "dev"})}
          "Development"]]
        [:li.global-nav__card-nav-item
-        [:a.global-nav__link {:href (path :public-coc-roles {:coc "prk"})}
+        [:a.global-nav__link {:href (path :public-coc {:coc "prk"})}
          "Projekte"]]
        [:li.global-nav__card-nav-item
-        [:a.global-nav__link {:href (path :public-coc-roles {:coc "req"})}
+        [:a.global-nav__link {:href (path :public-coc {:coc "req"})}
          "Req. Eng."]]]]
      (into [:div.content] content)]]))
 
 (defn index []
   (layout
+   "Index"
    [[:main.main
      [:h1 "Schön, dass du da bist!"]
      [:h2 "Willkommen auf der TRIO-Wissensplattform"]
@@ -53,10 +65,11 @@
 
 (defn show-coc [coc roles-with-levels]
   (layout
+   (h (:name coc))
    [[:main.main
      [:h1 "CoC " (h (:name coc))]
      [:div.table-responsive
-      [:table.table
+      [:table.table.no-sort
        [:thead
         [:tr
          [:th "Rolle"]
@@ -68,30 +81,31 @@
           (list
            [:tr
             [:td {:rowspan (max 1 (count levels))}
-             (h (:name role))]
+             [:a {:href (path :public-role
+                              {:coc (:key coc)
+                               :role (:uuid role)})}
+              (h (:name role))]]
             [:td
-             [:a {:href (path :public-role-modules
+             [:a {:href (path :public-level
                               {:coc (:key coc)
                                :level (:uuid level)})}
               (h (:name level))]]]
            (for [level (rest levels)]
              [:tr
-              [:td [:a {:href (path :public-role-modules
+              [:td [:a {:href (path :public-level
                                     {:coc (:key coc)
                                      :level (:uuid level)})}
                     (h (:name level))]]])))]]]]
-    [:nav
+    (breadcrumb
-     [:ol.breadcrumb
+     [:li.breadcrumb-item.active (h (:name coc))])]))
-      [:li.breadcrumb-item
-       [:a {:href (path :public-index)} "Start"]]
-      [:li.breadcrumb-item.active (h (:name coc))]]]]))
 
-(defn show-modules [coc level modules-with-comps]
+(defn show-level [coc level modules-with-comps]
   (layout
+   (h (:name level))
    [[:main.main
      [:h1 "Erfahrungsstufe " (h (:name level))]
      [:div.table-responsive
-      [:table.table
+      [:table.table.no-sort
        [:thead
         [:tr
          [:th "Modul"]
@@ -108,12 +122,35 @@
            (for [compo (rest comps)]
              [:tr
               [:td (h (:name compo))]])))]]]]
-    [:nav
+    (breadcrumb
-     [:ol.breadcrumb
-      [:li.breadcrumb-item
-       [:a {:href (path :public-index)} "Start"]]
       [:li.breadcrumb-item
-       [:a {:href (path :public-coc-roles
+       [:a {:href (path :public-coc
                         {:coc (:key coc)})}
         (h (:name coc))]]
-      [:li.breadcrumb-item.active (h (:name level))]]]]))
+      [:li.breadcrumb-item.active (h (:name level))])]))
+
+(defn show-role [coc role modules-and-levels]
+  (layout
+   (h (:name role))
+   [[:main.main
+     [:h1 "Rolle " (h (:name role))]
+     [:div.table-responsive
+      [:table.table
+       [:thead
+        [:tr
+         [:th "Modul"]
+         [:th "Qualifikationsstufe"]]]
+       [:tbody
+        (for [{:keys [module level]} modules-and-levels]
+          [:tr
+           [:td (h (:name module))]
+           [:td
+            [:a {:href (path :public-level
+                             {:coc (:key coc)
+                              :level (:uuid level)})}
+             (h (:name level))]]])]]]]
+    (breadcrumb
+     [:li.breadcrumb-item
+      [:a {:href (path :public-coc {:coc (:key coc)})}
+       (h (:name coc))]]
+     [:li.breadcrumb-item.active (h (:name role))])]))