From ca294dd17ae7d4968d2f3ee5183620f727c07a5f Mon Sep 17 00:00:00 2001 From: schrom01 Date: Sat, 27 Aug 2022 00:29:46 +0200 Subject: [PATCH] implemented autorefresh --- .../Templates/dashboard/irrigationJob.html | 7 ++ Webserver/Templates/footer.html | 15 +++ Webserver/static/Styles/scrollingTable.css | 118 ++++++++++++++++++ 3 files changed, 140 insertions(+) create mode 100644 Webserver/Templates/dashboard/irrigationJob.html create mode 100644 Webserver/Templates/footer.html create mode 100644 Webserver/static/Styles/scrollingTable.css diff --git a/Webserver/Templates/dashboard/irrigationJob.html b/Webserver/Templates/dashboard/irrigationJob.html new file mode 100644 index 0000000..d552487 --- /dev/null +++ b/Webserver/Templates/dashboard/irrigationJob.html @@ -0,0 +1,7 @@ + + + {{ job.zone.number|string}} + {{job.zone.name }} + {{ ((job.duration/60)|int)|string + " " + translater.getTranslation("minutes")}} + + \ No newline at end of file diff --git a/Webserver/Templates/footer.html b/Webserver/Templates/footer.html new file mode 100644 index 0000000..149a04d --- /dev/null +++ b/Webserver/Templates/footer.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/Webserver/static/Styles/scrollingTable.css b/Webserver/static/Styles/scrollingTable.css new file mode 100644 index 0000000..c43fba8 --- /dev/null +++ b/Webserver/static/Styles/scrollingTable.css @@ -0,0 +1,118 @@ +.scrollingtable { + box-sizing: border-box; + display: inline-block; + vertical-align: middle; + overflow: hidden; + width: auto; /*set table width here if using fixed value*/ + /*min-width: 100%;*/ /*set table width here if using %*/ + height: 300px; /*set table height here; can be fixed value or %*/ + /*min-height: 104px;*/ /*if using % height, make this at least large enough to fit scrollbar arrows + captions + thead*/ + font-family: Verdana, Tahoma, sans-serif; + font-size: 15px; + line-height: 20px; + padding-top: 20px; /*this determines top caption height*/ + padding-bottom: 20px; /*this determines bottom caption height*/ + text-align: left; +} +.scrollingtable * {box-sizing: border-box;} +.scrollingtable > div { + position: relative; + border-top: 1px solid black; /*top table border*/ + height: 100%; + padding-top: 20px; /*this determines column header height*/ +} +.scrollingtable > div:before { + top: 0; + background: cornflowerblue; /*column header background color*/ +} +.scrollingtable > div:before, +.scrollingtable > div > div:after { + content: ""; + position: absolute; + z-index: -1; + width: 100%; + height: 50%; + left: 0; +} +.scrollingtable > div > div { + /*min-height: 43px;*/ /*if using % height, make this at least large enough to fit scrollbar arrows*/ + max-height: 100%; + overflow: scroll; /*set to auto if using fixed or % width; else scroll*/ + overflow-x: hidden; + border: 1px solid black; /*border around table body*/ +} +.scrollingtable > div > div:after {background: white;} /*match page background color*/ +.scrollingtable > div > div > table { + width: 100%; + border-spacing: 0; + margin-top: -20px; /*inverse of column header height*/ + /*margin-right: 17px;*/ /*uncomment if using % width*/ +} +.scrollingtable > div > div > table > caption { + position: absolute; + top: -20px; /*inverse of caption height*/ + margin-top: -1px; /*inverse of border-width*/ + width: 100%; + font-weight: bold; + text-align: center; +} +.scrollingtable > div > div > table > * > tr > * {padding: 0;} +.scrollingtable > div > div > table > thead { + vertical-align: bottom; + white-space: nowrap; + text-align: center; +} +.scrollingtable > div > div > table > thead > tr > * > div { + display: inline-block; + padding: 0 6px 0 6px; /*header cell padding*/ +} +.scrollingtable > div > div > table > thead > tr > :first-child:before { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 20px; /*match column header height*/ + border-left: 1px solid black; /*leftmost header border*/ +} +.scrollingtable > div > div > table > thead > tr > * > div[label]:before, +.scrollingtable > div > div > table > thead > tr > * > div > div:first-child, +.scrollingtable > div > div > table > thead > tr > * + :before { + position: absolute; + top: 0; + white-space: pre-wrap; + color: white; /*header row font color*/ +} +.scrollingtable > div > div > table > thead > tr > * > div[label]:before, +.scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);} +.scrollingtable > div > div > table > thead > tr > * + :before { + content: ""; + display: block; + min-height: 20px; /*match column header height*/ + padding-top: 1px; + border-left: 1px solid black; /*borders between header cells*/ +} +.scrollingtable .scrollbarhead {float: right;} +.scrollingtable .scrollbarhead:before { + position: absolute; + width: 100px; + top: -1px; /*inverse border-width*/ + background: white; /*match page background color*/ +} +.scrollingtable > div > div > table > tbody > tr:after { + content: ""; + display: table-cell; + position: relative; + padding: 0; + border-top: 1px solid black; + top: -1px; /*inverse of border width*/ +} +.scrollingtable > div > div > table > tbody {vertical-align: top;} +.scrollingtable > div > div > table > tbody > tr {background: white;} +.scrollingtable > div > div > table > tbody > tr > * { + border-bottom: 1px solid black; + padding: 0 6px 0 6px; + height: 20px; /*match column header height*/ +} +.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;} +.scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: gainsboro;} /*alternate row color*/ +.scrollingtable > div > div > table > tbody > tr > * + * {border-left: 1px solid black;} /*borders between body cells*/ \ No newline at end of file