add dashbord information in xlsx

code/web_utils.nim

@@ -9,7 +9,8 @@
 import xlsx # read dashbord.xlsx
 import jester
 import joplin_utils
-
+import strutils
+import std/asyncdispatch
 
 # --==--==--==--==--==--==--==--==--==--==-- #
 # TYPE : Selected Option for master web page
@@ -20,6 +21,26 @@ type
         notes = "Notes", notebooks = "Notesbooks", tags = "Tags",
             notes_selectednote = "Notes-SelectedNote", dashbord = "Dashboard"
 
+# --==--==--==--==--==--==--==--==--==--==-- #
+# TYPE : Dashbord information
+# --==--==--==--==--==--==--==--==--==--==-- #
+type DashbordData* = object
+  position*: seq[int]
+  ext_link*: seq[string]
+  int_link*: seq[string]
+  ip_link*: seq[string]
+  title*: seq[string]
+  description*: seq[string]
+  server*: seq[string]
+  ip*: seq[string]
+  port*: seq[int]
+  ssl*: seq[bool]
+  category*: seq[string]
+  icon*: seq[string]
+  open_method*: seq[string]
+  tag*: seq[string]
+  hotkey*: seq[string]
+  color*: seq[string]
 
 # --==--==--==--==--==--==--==--==--==--==-- #
 # TYPE : Data Informations for Left Colomn
@@ -33,6 +54,7 @@ type ColomnLeftData* = ref object of RootObj
   j_notebooks_nb*: int
   j_tags*: joplin_tags
   j_tags_nb*: int
+  dashbord*: DashbordData
   req*: Request
 
 # --==--==--==--==--==--==--==--==--==--==-- #
@@ -47,36 +69,41 @@ type ColomnRightData* = ref object of RootObj
   req*: Request
 
 
-# --==--==--==--==--==--==--==--==--==--==-- #
-# TYPE : Dashbord information
-# --==--==--==--==--==--==--==--==--==--==-- #
-type DashbordData* = ref object of RootObj
-  position*: seq[int]
-  ext_link*: seq[string]
-  int_link*: seq[string]
-  title*: seq[string]
-  category*: seq[string]
-  icon*: seq[string]
-  open_method*: seq[string]
-  tag*: seq[string]
-  hotkey*: seq[string]
-  color*: seq[string]
-  req*: Request
-
-
 # --==--==--==--==--==--==--==--==--==--==--==--==--==--==-- #
-# PROC :
+# PROC : get data from dashbord file
 # --==--==--==--==--==--==--==--==--==--==--==--==--==--==-- #
-proc getDashbordData(ddata: var DashbordData) =
+proc getDashbordData*(): Future[DashbordData] {.async.} =
+
+  var ddata: DashbordData
+
   let
     data = parseExcel("data/dashbord.xlsx", header = true)
     sheetName = "dashbord"
-  echo data[sheetName]
+  #echo data[sheetName]
 
   let rows = data[sheetName].toSeq(true)
   echo rows.len()
-  # for i in 0 ..data[sheetName]:
+  for i in 0..(rows.len()-1):
-  #   ddata.position[i] = row[i]
+    ddata.position.add(parseInt(rows[i][0]))
-  for row in rows:
+    ddata.ext_link.add(rows[i][1])
-    echo "position: " & row[0]
+    ddata.int_link.add(rows[i][2])
-    echo "URL externe: " & row[1]
+    ddata.ip_link.add(rows[i][3])
+    ddata.title.add(rows[i][4])
+    ddata.description.add(rows[i][5])
+    ddata.server.add(rows[i][6])
+    ddata.ip.add(rows[i][7])
+    ddata.port.add(parseInt(rows[i][8]))
+    if rows[i][9] == "OUI":
+      ddata.ssl.add(true)
+    else:
+      ddata.ssl.add(false)
+
+    ddata.category.add(rows[i][10])
+    ddata.icon.add(rows[i][11])
+    ddata.open_method.add(rows[i][12])
+    ddata.tag.add(rows[i][13])
+    ddata.hotkey.add(rows[i][14])
+    ddata.color.add(rows[i][15])
+
+  echo ddata
+  return ddata

main.nim

@@ -200,13 +200,13 @@ template createTFD() =
   var crd {.inject.}: ColomnRightData
 
   # Assign the dashData to DashbordData
-  var dashData {.inject.}: DashbordData
+  # var dashData {.inject.}: DashbordData
 
   # New instance of c
   new(c)
   new(cld)
   new(crd)
-  new(dashData)
+  # new(dashData)
 
   # Set standard values
   init(c, cld, crd)
@@ -215,7 +215,7 @@ template createTFD() =
   c.req = request
   cld.req = request
   crd.req = request
-  dashData.req = request
+  # dashData.req = request
 
   # Check for cookies (we need the cookie named sid)
   if cookies(request).len > 0:
@@ -224,6 +224,9 @@ template createTFD() =
   # Use the func()
   c.loggedIn = loggedIn(c)
 
+  # Read Dashbord file
+  # dashData = getDashbordData()
+
 
 # isMainModule
 # ---------------------------- #
@@ -256,19 +259,18 @@ when isMainModule:
 # Include template files
 # ---------------------------- #
 #include "tmpl/main.tmpl"
-include "tmpl/user.tmpl"
+include "tmpl/user.nim"
-include "tmpl/website.tmpl"
+include "tmpl/website.nim"
 
 # Tests pages include
 # ---------------------------- #
-include "tmpl/tests/test_homepage.tmpl"
+include "tmpl/tests/test_homepage.nim"
-include "tmpl/tests/test_ping.tmpl"
+include "tmpl/tests/test_ping.nim"
-include "tmpl/tests/test_notebooks.tmpl"
+include "tmpl/tests/test_notebooks.nim"
-include "tmpl/tests/test_notes.tmpl"
+include "tmpl/tests/test_notes.nim"
-include "tmpl/tests/test_tags.tmpl"
+include "tmpl/tests/test_tags.nim"
-include "tmpl/tests/test_viewtree.tmpl"
+include "tmpl/tests/test_viewtree.nim"
-include "tmpl/tests/test_bouton.tmpl"
+include "tmpl/tests/test_bouton.nim"
-
 
 # --==--==--==--==--==--==--==--==--==--==-- #
 # Setup routes (URL's)
@@ -350,15 +352,15 @@ routes:
 
       elif @"msg" == "dashbord":
         echo "=> Section dashbord"
-        #cld.option = dashbord
+        #url_note = "/secret?msg=dashbord"
+        cld.option = dashbord
 
-        # getDashbordData(dashData)
 
       elif @"msg" == "sendFeedBack":
         echo "Todo"
 
       resp Http200, {"Access-Control-Allow-Origin": "http://127.0.0.1:7000"},
-          genSecret(c, cld, crd, dashData)
+          genSecret(c, cld, crd)
 
 
   # Login route
@@ -455,7 +457,12 @@ routes:
   # --==--==--==--==--==--==--==--==--==--==-- #
   get "/test_bouton":
     createTFD()
-    resp test_bonton(dashData)
+    cld.dashbord = waitFor getDashbordData()
+
+    #dashData.title.add("test de titre ...")
+    # echo dashData.title[0]
+
+    resp test_bouton(cld)
 
   # Test geting all tags as JSON output
   # --==--==--==--==--==--==--==--==--==--==-- #

public/css/bouton.css

@@ -103,6 +103,13 @@ div.footer.sorts {
     }
 }
 
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #333;
+        color: #fff;
+    }
+}
+
 .content>div {
     max-width: 350px;
 }
@@ -338,6 +345,7 @@ body.dark {
 .grid-container-description {
     grid-area: description;
     font-size: min(max(3.25vw, 8px), 18px);
+    padding: 10px;
 }
 
 .grid-container-description.jp {
@@ -368,6 +376,7 @@ body.dark {
 /** https://webdeasy.de/en/top-css-buttons-en */
 
 .glow-on-hover {
+    display: inline-block;
     width: 90vw;
     max-width: 400px;
     height: 45vw;
@@ -513,3 +522,178 @@ div.crossfade>img.top {
         opacity: 0;
     }
 }
+
+
+/* loading.css   */
+
+#fountainG {
+    position: relative;
+    width: 234px;
+    height: 38px;
+    margin: auto;
+}
+
+.fountainG {
+    position: absolute;
+    top: 0;
+    background-color: rgb(255, 255, 255);
+    width: 28px;
+    height: 28px;
+    animation-name: bounce_fountainG;
+    -o-animation-name: bounce_fountainG;
+    -ms-animation-name: bounce_fountainG;
+    -webkit-animation-name: bounce_fountainG;
+    -moz-animation-name: bounce_fountainG;
+    animation-duration: 0.975s;
+    -o-animation-duration: 0.975s;
+    -ms-animation-duration: 0.975s;
+    -webkit-animation-duration: 0.975s;
+    -moz-animation-duration: 0.975s;
+    animation-iteration-count: infinite;
+    -o-animation-iteration-count: infinite;
+    -ms-animation-iteration-count: infinite;
+    -webkit-animation-iteration-count: infinite;
+    -moz-animation-iteration-count: infinite;
+    animation-direction: normal;
+    -o-animation-direction: normal;
+    -ms-animation-direction: normal;
+    -webkit-animation-direction: normal;
+    -moz-animation-direction: normal;
+    transform: scale(.3);
+    -o-transform: scale(.3);
+    -ms-transform: scale(.3);
+    -webkit-transform: scale(.3);
+    -moz-transform: scale(.3);
+    border-radius: 19px;
+    -o-border-radius: 19px;
+    -ms-border-radius: 19px;
+    -webkit-border-radius: 19px;
+    -moz-border-radius: 19px;
+}
+
+#fountainG_1 {
+    left: 0;
+    animation-delay: 0.386s;
+    -o-animation-delay: 0.386s;
+    -ms-animation-delay: 0.386s;
+    -webkit-animation-delay: 0.386s;
+    -moz-animation-delay: 0.386s;
+}
+
+#fountainG_2 {
+    left: 29px;
+    animation-delay: 0.4825s;
+    -o-animation-delay: 0.4825s;
+    -ms-animation-delay: 0.4825s;
+    -webkit-animation-delay: 0.4825s;
+    -moz-animation-delay: 0.4825s;
+}
+
+#fountainG_3 {
+    left: 58px;
+    animation-delay: 0.589s;
+    -o-animation-delay: 0.589s;
+    -ms-animation-delay: 0.589s;
+    -webkit-animation-delay: 0.589s;
+    -moz-animation-delay: 0.589s;
+}
+
+#fountainG_4 {
+    left: 88px;
+    animation-delay: 0.6855s;
+    -o-animation-delay: 0.6855s;
+    -ms-animation-delay: 0.6855s;
+    -webkit-animation-delay: 0.6855s;
+    -moz-animation-delay: 0.6855s;
+}
+
+#fountainG_5 {
+    left: 117px;
+    animation-delay: 0.782s;
+    -o-animation-delay: 0.782s;
+    -ms-animation-delay: 0.782s;
+    -webkit-animation-delay: 0.782s;
+    -moz-animation-delay: 0.782s;
+}
+
+#fountainG_6 {
+    left: 146px;
+    animation-delay: 0.8785s;
+    -o-animation-delay: 0.8785s;
+    -ms-animation-delay: 0.8785s;
+    -webkit-animation-delay: 0.8785s;
+    -moz-animation-delay: 0.8785s;
+}
+
+#fountainG_7 {
+    left: 175px;
+    animation-delay: 0.975s;
+    -o-animation-delay: 0.975s;
+    -ms-animation-delay: 0.975s;
+    -webkit-animation-delay: 0.975s;
+    -moz-animation-delay: 0.975s;
+}
+
+#fountainG_8 {
+    left: 205px;
+    animation-delay: 1.0715s;
+    -o-animation-delay: 1.0715s;
+    -ms-animation-delay: 1.0715s;
+    -webkit-animation-delay: 1.0715s;
+    -moz-animation-delay: 1.0715s;
+}
+
+@keyframes bounce_fountainG {
+    0% {
+        transform: scale(1);
+        background-color: rgb(255, 0, 0);
+    }
+    100% {
+        transform: scale(.3);
+        background-color: rgb(255, 255, 255);
+    }
+}
+
+@-o-keyframes bounce_fountainG {
+    0% {
+        -o-transform: scale(1);
+        background-color: rgb(255, 0, 0);
+    }
+    100% {
+        -o-transform: scale(.3);
+        background-color: rgb(255, 255, 255);
+    }
+}
+
+@-ms-keyframes bounce_fountainG {
+    0% {
+        -ms-transform: scale(1);
+        background-color: rgb(255, 0, 0);
+    }
+    100% {
+        -ms-transform: scale(.3);
+        background-color: rgb(255, 255, 255);
+    }
+}
+
+@-webkit-keyframes bounce_fountainG {
+    0% {
+        -webkit-transform: scale(1);
+        background-color: rgb(255, 0, 0);
+    }
+    100% {
+        -webkit-transform: scale(.3);
+        background-color: rgb(255, 255, 255);
+    }
+}
+
+@-moz-keyframes bounce_fountainG {
+    0% {
+        -moz-transform: scale(1);
+        background-color: rgb(255, 0, 0);
+    }
+    100% {
+        -moz-transform: scale(.3);
+        background-color: rgb(255, 255, 255);
+    }
+}

tmpl/tests/test_bouton.nim

@@ -0,0 +1,71 @@
+#? stdtmpl | standard
+#
+#proc test_bouton(columnLeftInfo: var ColomnLeftData): string =
+# result = ""
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+     <meta charset="UTF-8">
+     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <title>Document</title>
+     <link rel="stylesheet" href="css/bouton.css">
+
+     <link href="js/viewtree/skin-win8/ui.fancytree.css" class="skinswitcher" rel="stylesheet">
+
+     <script src="js/viewtree.js" defer></script>
+     <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
+     <script src="js/viewtree/jquery.fancytree-all-deps.min.js"></script>
+</head>
+
+<body>
+     <h2>TEST Bouton Dashbord</h2>
+     <div>
+          <a href="/test" class="test_ping"><h4>Back to Test Home page ...</h4></a>
+     </div>
+     <div class="panel">
+          <div style="overflow: auto; position: relative; zoom: 1; height: 731px;">
+                    <div style="position: relative; zoom: 1;">
+                    <div class="apps">
+                         # var count: int = 1
+                         # var i: int
+                         # for i in 0 .. (columnLeftInfo.dashbord.position.len() - 1) :
+                              # count += 1                              
+                              # if columnLeftInfo.dashbord.ext_link[i] == "" and columnLeftInfo.dashbord.int_link[i] == "":
+                                   <button type="button" class="glow-on-hover" onclick="window.location.href='';">                              
+                              # elif columnLeftInfo.dashbord.ext_link[i] == "":
+                                   <button type="button" class="glow-on-hover" onclick="window.location.href='${columnLeftInfo.dashbord.int_link[i]}';">
+                              # else:
+                                   <button type="button" class="glow-on-hover" onclick="window.location.href='${columnLeftInfo.dashbord.ext_link[i]}';">     
+                              # end if
+                              
+                              <div class="grid-container">
+                                   <div class="grid-container-title">${columnLeftInfo.dashbord.title[i]}</div>
+                                   <div class="grid-container-logo crossfade">
+
+                                        <i class="fa fa-bookmark-o fa x5" aria-hidden="true"></i>
+                                        <img class="top" alt="Logo" src="images/bookmarks.jpg">
+
+                                   </div>
+                                   <div class="grid-container-description">${columnLeftInfo.dashbord.description[i]}
+                                   </div>
+
+                              </div>
+                         </button>
+                         # end for
+                    </div>
+               </div>
+          </div>
+
+          <div class="footer">
+               <hr>
+          </div>
+          <div class="footer version">
+               <div class="gwt-Label">The NewWebJoplin V15 le 2022-10-28 10:56 par Bruno Charest.</div>
+          </div>
+     </div>
+</body>
+
+</html>
+#end proc

tmpl/tests/test_bouton.tmpl

@@ -1,36 +0,0 @@
-#? stdtmpl | standard
-# 
-#proc test_bonton(dashData: var DashbordData): string =
-# result = ""
-   <!DOCTYPE html>
-    <html lang="en">
-        <head>
-            <meta charset="UTF-8">
-            <meta http-equiv="X-UA-Compatible" content="IE=edge">
-            <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            <title>Document</title>
-            <link rel="stylesheet" href="css/bouton.css">
-            <link href="js/viewtree/skin-win8/ui.fancytree.css" class="skinswitcher" rel="stylesheet">
-
-            <script src="js/viewtree.js" defer></script>
-            <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
-            <script src="js/viewtree/jquery.fancytree-all-deps.min.js"></script>
-        </head>
-        <body>            
-            <h2>TEST Bouton Dashbord</h2>
-               <div>
-                    <button type="button" class="glow-on-hover">
-                         <div class="grid-container">	
-                              <div class="grid-container-title">Jeu de codage </div>	
-                              <div class="grid-container-logo crossfade">		
-                                   <img class="bottom" alt="Logo" src="https://gurusushi.dyndns.org/CodingBoardGame/images/CodingBoardGameLogo-144.png">		
-                                   <img class="top" alt="Logo" src="https://gurusushi.dyndns.org/CodingBoardGame/images/CodingBoardGame-144.png">	
-                              </div>	
-                              <div class="grid-container-description">Programme le robot pour atteindre la pomme du savoir informatique!</div>	
-                              <div class="grid-container-languages">Disponible en français, anglais, japonais et coréen.</div>
-                         </div>
-                    </button>
-               </div>
-        </body>
-    </html>
-#end proc

tmpl/tests/test_homepage.nim

@@ -19,7 +19,7 @@
             <a href="/test_notebooks" class="test_notebooks"><h3>Test joplin Notebooks</h3></a>
             <a href="/test_notes" class="test_notes"><h3>Test Joplin Notes</h3></a>
             <a href="/test_tags" class="test_tags"><h3>Test Joplin Tags</h3></a>
-            <a href="/test_viewtree" class="test_viewtree"><h3>Test View Tree</h3></a>
+            <a href="/test_viewtree" class="test_viewtree"><h3>Test View Tree</h3></a><a href="/test_bouton" class="test_bouton"><h3>Test Bouton</h3></a>
 
         </body>
     </html>

tmpl/website.nim

@@ -13,7 +13,7 @@
 #
 # import snippet_html
 # import snippet_icons
-#proc genSecret(c: var TData, columnLeftInfo: var ColomnLeftData, ColomnRightInfo: var ColomnRightData, DashbordInfo: var DashbordData): string =
+#proc genSecret(c: var TData, columnLeftInfo: var ColomnLeftData, ColomnRightInfo: var ColomnRightData): string =
 # result = ""
     <!DOCTYPE html>
     <html lang="en">