Merge branch 'master' of http://git.osufx.com/Gr1/husstanden

credits.md

@@ -0,0 +1 @@
+https://github.com/kylestetz/CLNDR (MIT License)

filters.py

@@ -0,0 +1,8 @@
+from flask import render_template
+from objects import glob
+
+"""
+@glob.app.template_filter('load_module')
+def load_module(module_name):
+	return render_template("modules/%s.html" % module_name)
+"""

main.py

@@ -5,6 +5,7 @@ from objects import glob # Global sharing of python objects in a manageable way
 glob.app = Flask(__name__)
 
 import routes # All flask app routes
+import filters # All flask app filters
 
 if glob.config["git"]["auto_pull_and_restart"]: # Only used on the VPS (Do not enable in config)
 	@glob.app.route(glob.config["git"]["webhook_endpoint"], methods = ["POST"])

routes.py

@@ -3,8 +3,9 @@ from objects import glob # Global sharing of python objects in a manageable way
 
 @glob.app.route("/")
 @glob.app.route("/home")
+@glob.app.route("/dashboard")
 def home():
-	return render_template("home.html")
+	return render_template("pages/dashboard.html")
 
 @glob.app.route("/login", methods = ["GET", "POST"])
 def serve_login():
@@ -12,19 +13,4 @@ def serve_login():
 		return "TODO: Login handle", 501
 	return render_template("login.html")
 
-@glob.app.route("/testing")
-def we_are_testing():
-	return render_template("testing.html")
-
-@glob.app.route("/bill")
-def serve_bill():
-	return render_template("bill.html")
-
-@glob.app.route("/regninger")
-def serve_regninger():
-	return render_template("regninger.html")
-
-@glob.app.route("/kvittering")
-def serve_kvittering():
-	return render_template("kvittering.html") 
 	

static/const/img/flags/gb.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-gb" viewBox="0 0 640 480">
+  <defs>
+    <clipPath id="a">
+      <path fill-opacity=".7" d="M-85.3 0h682.6v512H-85.3z"/>
+    </clipPath>
+  </defs>
+  <g clip-path="url(#a)" transform="translate(80) scale(.94)">
+    <g stroke-width="1pt">
+      <path fill="#012169" d="M-256 0H768v512H-256z"/>
+      <path fill="#fff" d="M-256 0v57.2L653.5 512H768v-57.2L-141.5 0H-256zM768 0v57.2L-141.5 512H-256v-57.2L653.5 0H768z"/>
+      <path fill="#fff" d="M170.7 0v512h170.6V0H170.7zM-256 170.7v170.6H768V170.7H-256z"/>
+      <path fill="#c8102e" d="M-256 204.8v102.4H768V204.8H-256zM204.8 0v512h102.4V0H204.8zM-256 512L85.3 341.3h76.4L-179.7 512H-256zm0-512L85.3 170.7H9L-256 38.2V0zm606.4 170.7L691.7 0H768L426.7 170.7h-76.3zM768 512L426.7 341.3H503l265 132.5V512z"/>
+    </g>
+  </g>
+</svg>

static/const/img/flags/no.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-no" viewBox="0 0 640 480">
+  <path fill="#ed2939" d="M0 0h640v480H0z"/>
+  <path fill="#fff" d="M180 0h120v480H180z"/>
+  <path fill="#fff" d="M0 180h640v120H0z"/>
+  <path fill="#002664" d="M210 0h60v480h-60z"/>
+  <path fill="#002664" d="M0 210h640v60H0z"/>
+</svg>

static/css/calendar.css

@@ -0,0 +1,230 @@
+.clearfix:after {
+  content: ".";
+  display: block;
+  clear: both;
+  visibility: hidden;
+  line-height: 0;
+  height: 0;
+}
+.clearfix {
+  display: inline-block;
+}
+html[xmlns] .clearfix {
+  display: block;
+}
+* html .clearfix {
+  height: 1%;
+}
+.noselect {
+  -webkit-user-select: none;
+  /* Chrome/Safari */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* IE10+ */
+}
+.calendar h4 {
+  width: 75%;
+  text-align: center;
+  font-weight: normal;
+  color: white;
+  font-size: 14px;
+  margin: 0 auto 1em auto;
+  padding: 1em;
+  background: #b63642;
+}
+.calendar h5 {
+  font-size: 1em;
+  font-weight: bold;
+}
+.calendar p {
+  text-align: center;
+  margin: 3em auto 1em auto;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  border-bottom: 2px solid #414141;
+  background: #f4f4f4;
+}
+.left-align {
+  text-align: left;
+}
+.right-align {
+  text-align: right;
+}
+.calendar {
+  margin: 30px auto;
+  max-width: 600px;
+  font-size: 14px;
+}
+.calendar .clndr .clndr-controls {
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  margin-bottom: 10px;
+}
+.calendar .clndr .clndr-controls .month {
+  float: left;
+  width: 33%;
+  text-align: center;
+}
+.calendar .clndr .clndr-controls .clndr-control-button {
+  float: left;
+  width: 33%;
+}
+.calendar .clndr .clndr-controls .clndr-control-button.rightalign {
+  text-align: right;
+  width: 34%;
+}
+.calendar .clndr .clndr-controls .clndr-control-button .clndr-next-button {
+  cursor: pointer;
+  -webkit-user-select: none;
+  /* Chrome/Safari */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* IE10+ */
+}
+.calendar .clndr .clndr-controls .clndr-control-button .clndr-next-button:hover {
+  background: #ddd;
+}
+.calendar .clndr .clndr-controls .clndr-control-button .clndr-next-button.inactive {
+  opacity: 0.5;
+}
+.calendar .clndr .clndr-controls .clndr-control-button .clndr-next-button.inactive:hover {
+  background: none;
+  cursor: default;
+}
+.calendar .clndr .clndr-controls .clndr-control-button .clndr-previous-button {
+  cursor: pointer;
+  -webkit-user-select: none;
+  /* Chrome/Safari */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* IE10+ */
+}
+.calendar .clndr .clndr-controls .clndr-control-button .clndr-previous-button:hover {
+  background: #ddd;
+}
+.calendar .clndr .clndr-controls .clndr-control-button .clndr-previous-button.inactive {
+  opacity: 0.5;
+}
+.calendar .clndr .clndr-controls .clndr-control-button .clndr-previous-button.inactive:hover {
+  background: none;
+  cursor: default;
+}
+.calendar .clndr .clndr-table {
+  table-layout: fixed;
+  width: 100%;
+}
+.calendar .clndr .clndr-table .header-days {
+  height: 30px;
+  font-size: 10px;
+  background: #0D70A6;
+}
+.calendar .clndr .clndr-table .header-days .header-day {
+  vertical-align: middle;
+  text-align: center;
+  border-left: 1px solid #000000;
+  border-top: 1px solid #000000;
+  color: #fff;
+}
+.calendar .clndr .clndr-table .header-days .header-day:last-child {
+  border-right: 1px solid #000000;
+}
+.calendar .clndr .clndr-table tr {
+  height: 85px;
+}
+.calendar .clndr .clndr-table tr td {
+  vertical-align: top;
+}
+.calendar .clndr .clndr-table tr .day {
+  border-left: 1px solid #000000;
+  border-top: 1px solid #000000;
+  width: 100%;
+  height: inherit;
+}
+.calendar .clndr .clndr-table tr .day:hover {
+  background: #eee;
+}
+.calendar .clndr .clndr-table tr .day.today,
+.calendar .clndr .clndr-table tr .day.my-today {
+  background: #9AD6E3;
+}
+.calendar .clndr .clndr-table tr .day.today:hover,
+.calendar .clndr .clndr-table tr .day.my-today:hover {
+  background: #72c6d8;
+}
+.calendar .clndr .clndr-table tr .day.today.event,
+.calendar .clndr .clndr-table tr .day.my-today.event {
+  background: #a7dbc1;
+}
+.calendar .clndr .clndr-table tr .day.event,
+.calendar .clndr .clndr-table tr .day.my-event {
+  background: #B4E09F;
+}
+.calendar .clndr .clndr-table tr .day.event:hover,
+.calendar .clndr .clndr-table tr .day.my-event:hover {
+  background: #96d478;
+}
+.calendar .clndr .clndr-table tr .day.inactive,
+.calendar .clndr .clndr-table tr .day.my-inactive {
+  background: #ddd;
+}
+.calendar .clndr .clndr-table tr .day:last-child {
+  border-right: 1px solid #000000;
+}
+.calendar .clndr .clndr-table tr .day .day-contents {
+  box-sizing: border-box;
+  padding: 8px;
+  font-size: 12px;
+  text-align: right;
+}
+.calendar .clndr .clndr-table tr .empty,
+.calendar .clndr .clndr-table tr .adjacent-month,
+.calendar .clndr .clndr-table tr .my-empty,
+.calendar .clndr .clndr-table tr .my-adjacent-month {
+  border-left: 1px solid #000000;
+  border-top: 1px solid #000000;
+  width: 100%;
+  height: inherit;
+  background: #eee;
+}
+.calendar .clndr .clndr-table tr .empty:hover,
+.calendar .clndr .clndr-table tr .adjacent-month:hover,
+.calendar .clndr .clndr-table tr .my-empty:hover,
+.calendar .clndr .clndr-table tr .my-adjacent-month:hover {
+  background: #ddd;
+}
+.calendar .clndr .clndr-table tr .empty:last-child,
+.calendar .clndr .clndr-table tr .adjacent-month:last-child,
+.calendar .clndr .clndr-table tr .my-empty:last-child,
+.calendar .clndr .clndr-table tr .my-adjacent-month:last-child {
+  border-right: 1px solid #000000;
+}
+.calendar .clndr .clndr-table tr:last-child .day,
+.calendar .clndr .clndr-table tr:last-child .my-day {
+  border-bottom: 1px solid #000000;
+}
+.calendar .clndr .clndr-table tr:last-child .empty,
+.calendar .clndr .clndr-table tr:last-child .my-empty {
+  border-bottom: 1px solid #000000;
+}
+.clndr-next-button,
+.clndr-previous-button,
+.clndr-next-year-button,
+.clndr-previous-year-button {
+  -webkit-user-select: none;
+  /* Chrome/Safari */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* IE10+ */
+}
+.clndr-next-button.inactive,
+.clndr-previous-button.inactive,
+.clndr-next-year-button.inactive,
+.clndr-previous-year-button.inactive {
+  opacity: 0.5;
+  cursor: default;
+}

static/css/custom.css

@@ -0,0 +1,7 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins');
+
+html, body {
+	height: 100%;
+	background-color: #eee;
+	font-family: "Poppins", sans-serif;
+}

static/img/logo.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="230" width="300">
+	<path d="M150 0 L0 130 L55 130 L150 50 L240 130 L300 130 Z" fill="#fff"/>
+	<line x1="70" y1="92" x2="70" y2="250" style="stroke:#fff;stroke-width:45" />
+	<line x1="230" y1="30" x2="230" y2="250" style="stroke:#fff;stroke-width:45" />
+	<line x1="70" y1="150" x2="230" y2="150" style="stroke:#fff;stroke-width:45" />
+</svg>

static/js/interact.js

@@ -0,0 +1,25 @@
+function openCategory(DOM) {
+	DOM.parentNode.children[1].classList.remove("hidden");
+}
+
+function closeCategory(DOM) {
+	DOM.parentNode.children[1].classList.add("hidden");
+}
+
+function toggleCategory(DOM) {
+	let classes = DOM.parentNode.children[1].classList;
+	classes[classes.contains("hidden") ? "remove" : "add"]("hidden");
+}
+
+/*
+function postPageLoad() {
+	let ent = document.getElementById("sidenav").children[1].children[0].children[0].children;
+
+	for (let i = 0; i < ent.length; i++) {
+		if (!ent[i].children[0].classList.contains("item"))
+			continue;
+		
+		ent[i].children[0].onclick = toggleCategory(ent[i].children[0]);
+	}
+}
+*/

templates/home.html

@@ -1,10 +0,0 @@
-{% set title = "Home" %}
-
-{% extends "layout/dash.html" %}
-
-{% block content %}
-<p>Template usage</p>
-<i class="fas fa-user"></i> <!-- uses solid style -->
-<i class="far fa-user"></i> <!-- uses regular style -->
-<i class="fab fa-github-square"></i> <!-- uses brands style -->
-{% endblock %}

templates/layout/dash.html

@@ -2,15 +2,16 @@
 <html lang="en">
 <head>
 {% include 'layout/includes/boot-head.html' %}
+<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/custom.css') }}">
 {% if title %}
 	<title>Husstanden - {{ title }}</title>
 {% else %}
 	<title>Husstanden</title>
 {% endif %}
 </head>
-<body>
+<body style="height:100%">
-    <div class="p-2">
+    <div class="p-2" style="height:100%">
-        <div class="d-flex">
+        <div class="d-flex" style="height:100%">
             <div class="col p-2" style="flex:0 0 320px;">
 {% include 'layout/includes/side_nav.html' %}
             </div>
@@ -21,5 +22,6 @@
         </div>
     </div>
 {% include 'layout/includes/boot-body.html' %}
+<script src="{{ url_for('static', filename='js/interact.js') }}"></script>
 </body>
 </html>

templates/layout/includes/boot-body.html

@@ -1,3 +1,2 @@
-<script src="{{ url_for('static', filename='const/js/jquery-3.3.1.slim.min.js') }}"></script>
 <script src="{{ url_for('static', filename='const/js/popper.min.js') }}"></script>
 <script src="{{ url_for('static', filename='const/js/bootstrap.min.js') }}"></script>

templates/layout/includes/boot-head.html

@@ -2,3 +2,4 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='const/css/bootstrap.min.css') }}">
 <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='const/css/fontawesome.min.css') }}">
+<script src="{{ url_for('static', filename='const/js/jquery-3.3.1.slim.min.js') }}"></script>

templates/layout/includes/side_nav.html

@@ -1,4 +1,11 @@
 <style>
+#sidenav-parent {
+	display: flex;
+	flex-direction: column;
+	height:100%;
+	min-height: 100%;
+}
+
 #sidenav {
     background-color: #B507DB;
     border-radius: 4px;
@@ -9,95 +16,146 @@
     flex-direction: column;
 
     max-width: 100%;
-    height: 100%;
+	height: 100%;
 }
 
-#sidenav ul > li {
+#sidenav div {
     display: flex;
     flex-direction: column;
 }
 
-#sidenav a, #sidenav h4 {
+#sidenav h4 {
+	margin-top: 20px;
     color: white;
 }
 
-.navlist ul > li, .navlist ul > li > a {
+#sidenav a {
+	color: #e9d9fc;
+	line-height: 1;
+}
+#sidenav a:hover {
+	color: white;
+}
+
+.navlist div, .navlist div > a {
     display: flex;
     flex-grow: 1;
+	text-decoration: none;
 }
 
-.navlist ul > li > a > span {
+.navlist div > a > span {
     flex-grow: 1;
 }
 
-.navlist ul > li > a > i:last-child {
+.navlist div > a > i:last-child {
     justify-content: flex-end;
 }
 
+.navlist div > a > * {
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+.navlist .item {
+	cursor: pointer;
+	padding-top: 3px;
+	padding-bottom: 3px;
+}
+
+#sidenav .flex-column .flex-column {
+	margin-left: 30px;
+	margin-right: 30px;
+}
+
+#sidenav .flex-column .flex-column > div {
+	padding-top: 5px;
+	padding-bottom: 5px;
+	padding-right: 30px;
+	padding-left: 30px;
+}
+
+#sidenav .flex-column .flex-column > div > a {
+	display: list-item;
+	list-style-type: disc;
+}
+
+.page.selected {
+	background-color: #9F07C1;
+	border-radius: 100px;
+}
+
+.downtab {
+
+}
+
 .hidden {
-    display: none;
+    display: none !important;
+	overflow: hidden !important;
 }
 </style>
-<div class="d-flex flex-row" id="sidenav">
+<div id="sidenav-parent">
+<div class="d-flex flex-column" id="sidenav">
     <div class="top">
         <!-- Here be logo area -->
+		<!-- <img alt="Logo" src="{{ url_for('static', filename='img/logo.svg') }}" height="40px"/> -->
     </div>
     <div class="navlist">
         <!-- Here be dropdown menus -->
         <div class="p-2"> <!-- Padding -->
-            <ul>
+			<div class="flex-column">
-                <li> <!-- Collection -->
+                <div> <!-- Collection -->
-                    <a href="#dash">
+                    <a class="item" onclick="toggleCategory(this)">
                         <i class="fa fa-chart-bar"></i><span>Dashboard</span>
                         <i class="fas fa-chevron-right"></i>
                     </a>
-                    <div class="hidden"> <!-- Hidden until clicked #dash -->
+                    <div class="downtab hidden">
-                        <ul>
+                        <div class="flex-column">
-                            <li>
+                            <div class="page">
-                                <a href="#dash-test">Test</a> <!-- TODO: Add dot prefix -->
+                                <a href="#dash-test">Test</a>
-                            </li>
+                            </div>
-                            <li>
+                            <div class="page">
                                 <a href="#dash-demo">Demo</a>
-                            </li>
+                            </div>
-                        </ul>
+                        </div>
                     </div>
-                </li>
+                </div>
-                <li>
+                <div>
-                    <h4>Title card</h4> <!-- TODO: Padding and such -->
+                    <h4>Title card</h4>
-                </li>
+                </div>
-                <li>
+                <div>
-                    <a href="#bills">
+                    <a class="item" onclick="toggleCategory(this)">
                         <i class="fa fa-chart-bar"></i><span>Bills</span>
                         <i class="fas fa-chevron-right"></i>
                     </a>
-                    <div class="hidden">
+                    <div class="downtab hidden">
-                        <ul>
+                        <div class="flex-column">
-                            <li>
+                            <div class="page">
                                 <a href="#bills-bills">Bills</a>
-                            </li>
+                            </div>
-                            <li>
+                            <div class="page">
                                 <a href="#bills-log">Log</a>
-                            </li>
+                            </div>
-                        </ul>
+                        </div>
                     </div>
-                </li>
+                </div>
-                <li>
+                <div>
-                    <a href="#recieps">
+                    <a class="item" onclick="toggleCategory(this)">
                         <i class="fa fa-chart-bar"></i><span>Recieps</span>
                         <i class="fas fa-chevron-right"></i>
                     </a>
-                    <div class="hidden">
+                    <div class="downtab hidden">
-                        <ul>
+						<div class="flex-column">
-                            <li>
+                            <div class="page">
                                 <a href="#recieps-recieps">Recieps</a>
-                            </li>
+                            </div>
-                            <li>
+                            <div class="page">
                                 <a href="#recieps-log">Log</a>
-                            </li>
+                            </div>
-                        </ul>
+                        </div>
                     </div>
-                </li>
+                </div>
-            </ul>
+			</div>
         </div>
     </div>
 </div>
+</div>

templates/layout/includes/top_nav.html

@@ -2,6 +2,7 @@
 .rndblock {
     border-radius: 100%;
     background: #B507DB;
+	background-position: center;
     width: 40px;
     height: 40px;
 
@@ -13,17 +14,26 @@
 }
 
 .languk {
-    background: url("{{ url_for('static', filename='const/img/flags/uk.png') }}");
+    background-image: url("{{ url_for('static', filename='const/img/flags/gb.svg') }}");
 }
 
 .langno {
-    background: url("{{ url_for('static', filename='const/img/flags/no.png') }}");
+    background-image: url("{{ url_for('static', filename='const/img/flags/no.svg') }}");
+}
+
+.icon-buttons > .col {
+	padding-right: 6px;
+	padding-left: 6px;
+}
+
+.topnav a {
+	color: black;
 }
 </style>
 
-<nav class="navbar navbar-dark bg-dark" style="margin-bottom: 10px;">
+<nav class="navbar topnav" style="margin-bottom: 10px;">
-    <a class="navbar-brand" href="#">Dashboard</a>
+    <h3>{{ title }}</h3>
-    <div class="my-2 my-lg-0 d-flex">
+    <div class="my-2 my-lg-0 d-flex icon-buttons">
         <div class="col">
             <div class="rndblock languk"></div>
         </div>

templates/modules/calendar.html

@@ -0,0 +1,98 @@
+<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/calendar.css') }}">
+
+<div class="calendar"></div>
+
+<script src="{{ url_for('static', filename='js/moment.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/underscore.min.js') }}"></script>
+<script src="{{ url_for('static', filename='modules/clndr.min.js') }}"></script>
+<script>
+var calendars = {};
+
+$(document).ready( function() {
+    // Assuming you've got the appropriate language files,
+    // clndr will respect whatever moment's language is set to.
+    // moment.locale('ru');
+
+    // Here's some magic to make sure the dates are happening this month.
+    var thisMonth = moment().format('YYYY-MM');
+    // Events to load into calendar
+    var eventArray = [ // TODO: Get events from database
+        {
+            title: 'Multi-Day Event',
+            endDate: thisMonth + '-14',
+            startDate: thisMonth + '-10'
+        }, {
+            endDate: thisMonth + '-23',
+            startDate: thisMonth + '-21',
+            title: 'Another Multi-Day Event'
+        }, {
+            date: thisMonth + '-27',
+            title: 'Single Day Event'
+        }
+    ];
+
+    // The order of the click handlers is predictable. Direct click action
+    // callbacks come first: click, nextMonth, previousMonth, nextYear,
+    // previousYear, nextInterval, previousInterval, or today. Then
+    // onMonthChange (if the month changed), inIntervalChange if the interval
+    // has changed, and finally onYearChange (if the year changed).
+    calendars.clndr = $('.calendar').clndr({
+        events: eventArray,
+        clickEvents: {
+            click: function (target) {
+                console.log('Cal-1 clicked: ', target);
+            },
+            today: function () {
+                console.log('Cal-1 today');
+            },
+            nextMonth: function () {
+                console.log('Cal-1 next month');
+            },
+            previousMonth: function () {
+                console.log('Cal-1 previous month');
+            },
+            onMonthChange: function () {
+                console.log('Cal-1 month changed');
+            },
+            nextYear: function () {
+                console.log('Cal-1 next year');
+            },
+            previousYear: function () {
+                console.log('Cal-1 previous year');
+            },
+            onYearChange: function () {
+                console.log('Cal-1 year changed');
+            },
+            nextInterval: function () {
+                console.log('Cal-1 next interval');
+            },
+            previousInterval: function () {
+                console.log('Cal-1 previous interval');
+            },
+            onIntervalChange: function () {
+                console.log('Cal-1 interval changed');
+            }
+        },
+        multiDayEvents: {
+            singleDay: 'date',
+            endDate: 'endDate',
+            startDate: 'startDate'
+        },
+        showAdjacentMonths: true,
+        adjacentDaysChangeMonth: false
+    });
+
+    // Bind all clndrs to the left and right arrow keys
+    $(document).keydown( function(e) {
+        // Left arrow
+        if (e.keyCode == 37) {
+            calendars.clndr.back();
+        }
+
+        // Right arrow
+        if (e.keyCode == 39) {
+            calendars.clndr.forward();
+        }
+    });
+});
+</script>

templates/pages/dashboard.html

@@ -0,0 +1,9 @@
+{% set title = "Dashboard" %}
+
+{% extends "layout/dash.html" %}
+
+{% block content %}
+
+{% include "modules/calendar.html" %}
+
+{% endblock %}