adding dashbord section
This commit is contained in:
parent
9a7d23d24d
commit
d40eea6eab
|
|
@ -6,6 +6,7 @@
|
|||
# web_utils : procedure related web interface
|
||||
#
|
||||
# --==--==--==--==--==--==--==--==--==--==--==--==--==--==--==-- #
|
||||
import xlsx # read dashbord.xlsx
|
||||
import jester
|
||||
import joplin_utils
|
||||
|
||||
|
|
@ -46,3 +47,36 @@ 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 getDashbordData(ddata: var DashbordData) =
|
||||
let
|
||||
data = parseExcel("data/dashbord.xlsx", header = true)
|
||||
sheetName = "dashbord"
|
||||
echo data[sheetName]
|
||||
|
||||
let rows = data[sheetName].toSeq(true)
|
||||
echo rows.len()
|
||||
# for i in 0 ..data[sheetName]:
|
||||
# ddata.position[i] = row[i]
|
||||
for row in rows:
|
||||
echo "position: " & row[0]
|
||||
echo "URL externe: " & row[1]
|
||||
|
|
|
|||
Binary file not shown.
40
main.nim
40
main.nim
|
|
@ -18,7 +18,7 @@
|
|||
# --==--==--==--==--==--==--==--==--==--==-- #
|
||||
import os # Used to get arguments
|
||||
import uri # We need to encode urls: encodeUrl()
|
||||
import xlsx # read dashbord.xlsx
|
||||
|
||||
import times # Time and date
|
||||
import jester # Our webserver
|
||||
import logging # Logging utils
|
||||
|
|
@ -50,9 +50,9 @@ let db_host = dict.getSectionValue("Database", "host")
|
|||
# Website
|
||||
let mainURL = dict.getSectionValue("Server", "url")
|
||||
let mainPort = parseInt dict.getSectionValue("Server", "port")
|
||||
let mainWebsite = dict.getSectionValue("Server", "website")
|
||||
#let mainWebsite = dict.getSectionValue("Server", "website")
|
||||
|
||||
# Joplin
|
||||
# Joplin
|
||||
let joplin_token = dict.getSectionValue("Joplin", "token")
|
||||
|
||||
# --==--==--==--==--==--==--==--==--==--==-- #
|
||||
|
|
@ -195,21 +195,27 @@ template createTFD() =
|
|||
# Assign the c to TDATA
|
||||
var c {.inject.}: TData
|
||||
|
||||
# Assign the c to TDATA
|
||||
# Assign the cld et crd to ColomnData
|
||||
var cld {.inject.}: ColomnLeftData
|
||||
var crd {.inject.}: ColomnRightData
|
||||
|
||||
# Assign the dashData to DashbordData
|
||||
var dashData {.inject.}: DashbordData
|
||||
|
||||
# New instance of c
|
||||
new(c)
|
||||
new(cld)
|
||||
new(crd)
|
||||
new(dashData)
|
||||
|
||||
# Set standard values
|
||||
init(c, cld, crd)
|
||||
|
||||
# Get users request
|
||||
c.req = request
|
||||
cld.req = request
|
||||
crd.req = request
|
||||
dashData.req = request
|
||||
|
||||
# Check for cookies (we need the cookie named sid)
|
||||
if cookies(request).len > 0:
|
||||
|
|
@ -261,6 +267,7 @@ include "tmpl/tests/test_notebooks.tmpl"
|
|||
include "tmpl/tests/test_notes.tmpl"
|
||||
include "tmpl/tests/test_tags.tmpl"
|
||||
include "tmpl/tests/test_viewtree.tmpl"
|
||||
include "tmpl/tests/test_bouton.tmpl"
|
||||
|
||||
|
||||
# --==--==--==--==--==--==--==--==--==--==-- #
|
||||
|
|
@ -300,8 +307,6 @@ routes:
|
|||
# Start joplin terminal cli if stropped
|
||||
if @"msg" == "startStopJoplin":
|
||||
var isStart = joplin_cli_start_stop()
|
||||
|
||||
|
||||
redirect(url_note)
|
||||
|
||||
# if Joplin application work
|
||||
|
|
@ -335,10 +340,6 @@ routes:
|
|||
cld.j_notes = waitFor get_joplin_notes(joplin_token)
|
||||
cld.j_notes_nb = cld.j_notes.id.len()
|
||||
|
||||
# for i in 0 .. (cld.j_notes.id.len() - 1):
|
||||
# echo cld.j_notes.id[i]
|
||||
# echo cld.j_notes.created_time[i]
|
||||
|
||||
if selectedNoteId != "":
|
||||
crd.j_SelectedNote = waitFor get_joplin_note(joplin_token, selectedNoteId)
|
||||
|
||||
|
|
@ -351,22 +352,13 @@ routes:
|
|||
echo "=> Section dashbord"
|
||||
#cld.option = dashbord
|
||||
|
||||
let
|
||||
data = parseExcel("data/dashbord.xlsx", header = true)
|
||||
sheetName = "dashbord"
|
||||
echo data[sheetName]
|
||||
|
||||
let rows = data[sheetName].toSeq(true)
|
||||
for row in rows:
|
||||
echo "position: " & row[0]
|
||||
echo "URL externe: " & row[1]
|
||||
|
||||
# getDashbordData(dashData)
|
||||
|
||||
elif @"msg" == "sendFeedBack":
|
||||
echo "Todo"
|
||||
|
||||
resp Http200, {"Access-Control-Allow-Origin": "http://127.0.0.1:7000"},
|
||||
genSecret(c, cld, crd)
|
||||
genSecret(c, cld, crd, dashData)
|
||||
|
||||
|
||||
# Login route
|
||||
|
|
@ -459,6 +451,12 @@ routes:
|
|||
createTFD()
|
||||
resp test_viewtree(c)
|
||||
|
||||
# Test a viewtree
|
||||
# --==--==--==--==--==--==--==--==--==--==-- #
|
||||
get "/test_bouton":
|
||||
createTFD()
|
||||
resp test_bonton(dashData)
|
||||
|
||||
# Test geting all tags as JSON output
|
||||
# --==--==--==--==--==--==--==--==--==--==-- #
|
||||
get "/test_tags_json":
|
||||
|
|
|
|||
|
|
@ -0,0 +1,515 @@
|
|||
@charset "UTF-8";
|
||||
body {
|
||||
margin: auto;
|
||||
font-family: Tahoma, sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: .5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.apps {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div.footer.version {
|
||||
font-size: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
div.footer.sorts {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dialog>div {
|
||||
margin: 5px 20px;
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dialog>div.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dialog>div>button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.headline {
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.logout {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-gap: 10px;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
margin: auto;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 800px) {
|
||||
.content {
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.content {
|
||||
grid-template-columns: auto auto auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1600px) {
|
||||
.content {
|
||||
grid-template-columns: auto auto auto auto;
|
||||
}
|
||||
}
|
||||
|
||||
.content>div {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.gwt-Button {
|
||||
margin: 0px;
|
||||
border: none;
|
||||
padding: 6px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.gwt-Anchor.spacer,
|
||||
.gwt-Button.spacer {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.gwt-Button:disabled {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.gwt-DialogBox {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.gwt-DialogBox .Caption {
|
||||
padding: 4px 8px 4px 4px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.gwt-DialogBox .dialogTopLeftInner {
|
||||
width: 10px;
|
||||
height: 8px;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.gwt-DialogBox .dialogTopRightInner {
|
||||
width: 12px;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.gwt-DialogBox .dialogBottomLeftInner {
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.gwt-DialogBox .dialogBottomRightInner {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.gwt-DialogBox .dialogMiddleCenter {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
|
||||
/** Light theme */
|
||||
|
||||
body.light {
|
||||
background: #f5f5f5 url("images/Background.png") no-repeat center fixed;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.light a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.light a:hover {
|
||||
color: #248bfb;
|
||||
}
|
||||
|
||||
.light a.pagination:hover {
|
||||
color: #248bfb;
|
||||
background: #ececec;
|
||||
}
|
||||
|
||||
.light a.pagination.current {
|
||||
color: #248bfb;
|
||||
background: #ececec;
|
||||
}
|
||||
|
||||
.light .title {
|
||||
background-color: #248bfb;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.light .content {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.light .gwt-Button {
|
||||
border: 1px solid navy;
|
||||
background-color: #248bfb;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.light .gwt-Button:hover {
|
||||
background-color: #0362cb;
|
||||
}
|
||||
|
||||
.light .gwt-Button:disabled {
|
||||
border-color: #aaa;
|
||||
background-color: #ccc;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.light .gwt-Button.sort:disabled {
|
||||
border-color: green;
|
||||
background-color: #03cb62;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.light .gwt-DialogBox {
|
||||
background-color: #248bfb;
|
||||
border: 3px solid #abd2fe;
|
||||
}
|
||||
|
||||
.light .gwt-DialogBox .Caption {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.light .gwt-DialogBox .dialogMiddleCenter {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.light .gwt-PopupPanelGlass {
|
||||
background-color: black;
|
||||
opacity: 0.3;
|
||||
filter: alpha(opacity=30);
|
||||
}
|
||||
|
||||
.light .content>div {
|
||||
border: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
|
||||
/** Dark theme */
|
||||
|
||||
body.dark {
|
||||
background: #272c30 url("images/Background-Dark.png") no-repeat center fixed;
|
||||
background-size: contain;
|
||||
color: #95c7fd;
|
||||
}
|
||||
|
||||
.dark a {
|
||||
color: #95c7fd;
|
||||
}
|
||||
|
||||
.dark a:hover {
|
||||
color: #e7e9eb;
|
||||
}
|
||||
|
||||
.dark a.pagination:hover {
|
||||
color: #e7e9eb;
|
||||
background: #95a0aa;
|
||||
}
|
||||
|
||||
.dark a.pagination.current {
|
||||
color: #e7e9eb;
|
||||
background: #95a0aa;
|
||||
}
|
||||
|
||||
.dark .title {
|
||||
background-color: #024793;
|
||||
color: #95c7fd;
|
||||
}
|
||||
|
||||
.dark .content {
|
||||
background-color: #202326;
|
||||
}
|
||||
|
||||
.dark .gwt-Button {
|
||||
border: 1px solid black;
|
||||
background-color: #95a0aa;
|
||||
color: #04356b;
|
||||
}
|
||||
|
||||
.dark .gwt-Button:hover {
|
||||
background-color: #bec5cb;
|
||||
}
|
||||
|
||||
.dark .gwt-Button:disabled {
|
||||
border-color: #666;
|
||||
background-color: #333;
|
||||
color: #248bfb;
|
||||
}
|
||||
|
||||
.dark .gwt-Button.sort:disabled {
|
||||
color: #03cb62;
|
||||
}
|
||||
|
||||
.dark .gwt-DialogBox {
|
||||
background-color: #555;
|
||||
border: 3px solid #999;
|
||||
}
|
||||
|
||||
.dark .gwt-DialogBox .Caption {
|
||||
color: #95c7fd;
|
||||
}
|
||||
|
||||
.dark .gwt-DialogBox .dialogMiddleCenter {
|
||||
background: #272c30;
|
||||
}
|
||||
|
||||
.dark .gwt-PopupPanelGlass {
|
||||
background-color: black;
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
}
|
||||
|
||||
.dark .content>div {
|
||||
border: 1px solid #b9b9b9;
|
||||
}
|
||||
|
||||
.grid-container-title {
|
||||
grid-area: title;
|
||||
text-align: center;
|
||||
font-size: min(max(5vw, 10px), 24px);
|
||||
}
|
||||
|
||||
.grid-container-title.jp {
|
||||
font-size: min(max(3.75vw, 6px), 21px);
|
||||
}
|
||||
|
||||
.grid-container-logo {
|
||||
grid-area: logo;
|
||||
}
|
||||
|
||||
.grid-container-description {
|
||||
grid-area: description;
|
||||
font-size: min(max(3.25vw, 8px), 18px);
|
||||
}
|
||||
|
||||
.grid-container-description.jp {
|
||||
font-size: min(max(3vw, 5px), 15px);
|
||||
}
|
||||
|
||||
.grid-container-languages {
|
||||
grid-area: languages;
|
||||
font-size: min(max(3vw, 7px), 16px);
|
||||
}
|
||||
|
||||
.grid-container-languages.jp {
|
||||
font-size: min(max(2.75vw, 5px), 13px);
|
||||
;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-areas: 'logo title' 'logo description' 'logo languages';
|
||||
gap: 2px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
/** Glow */
|
||||
|
||||
|
||||
/** https://webdeasy.de/en/top-css-buttons-en */
|
||||
|
||||
.glow-on-hover {
|
||||
width: 90vw;
|
||||
max-width: 400px;
|
||||
height: 45vw;
|
||||
max-height: 200px;
|
||||
margin: 5px;
|
||||
border: 1px solid #111;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
border-radius: 10px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.light .glow-on-hover {
|
||||
color: white;
|
||||
background-color: rgba(36, 139, 251, 0.5);
|
||||
}
|
||||
|
||||
.dark .glow-on-hover {
|
||||
color: #95c7fd;
|
||||
background-color: rgba(190, 197, 203, 0.3);
|
||||
}
|
||||
|
||||
.glow-on-hover:before {
|
||||
content: '';
|
||||
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
background-size: 400%;
|
||||
z-index: -1;
|
||||
filter: blur(5px);
|
||||
width: calc(100% + 4px);
|
||||
height: calc(100% + 4px);
|
||||
animation: glowing 20s linear infinite;
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease-in-out;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.glow-on-hover:active {
|
||||
color: #888888
|
||||
}
|
||||
|
||||
.glow-on-hover:active:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.glow-on-hover:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.glow-on-hover:after {
|
||||
z-index: -1;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.light .glow-on-hover:hover:after {
|
||||
background-color: rgba(0, 33, 122, 1);
|
||||
}
|
||||
|
||||
.dark .glow-on-hover:hover:after {
|
||||
background-color: rgba(25, 25, 25, 1);
|
||||
}
|
||||
|
||||
@keyframes glowing {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
50% {
|
||||
background-position: 400% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
div.crossfade {
|
||||
position: relative;
|
||||
width: min(32.4vw, 144px);
|
||||
height: min(32.4vw, 144px);
|
||||
}
|
||||
|
||||
div.crossfade>img {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
bottom: 0;
|
||||
left: -1px;
|
||||
right: 0;
|
||||
width: min(32.4vw, 144px);
|
||||
height: min(32.4vw, 144px);
|
||||
}
|
||||
|
||||
div.crossfade>img.bottom {
|
||||
animation-name: fade-bottom;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 5s;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
div.crossfade>img.top {
|
||||
animation-name: fade-top;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 5s;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
@keyframes fade-bottom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
opacity: 0;
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-top {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
25% {
|
||||
opacity: 1;
|
||||
}
|
||||
75% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
#? 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
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
#
|
||||
# import snippet_html
|
||||
# import snippet_icons
|
||||
#proc genSecret(c: var TData, columnLeftInfo: var ColomnLeftData, ColomnRightInfo: var ColomnRightData): string =
|
||||
#proc genSecret(c: var TData, columnLeftInfo: var ColomnLeftData, ColomnRightInfo: var ColomnRightData, DashbordInfo: var DashbordData): string =
|
||||
# result = ""
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
|
|
|||
Loading…
Reference in New Issue