Initial

app/base/static/css/login.css

@@ -0,0 +1,29 @@
+@font-face {
+  font-family: 'Dosis';
+  src: url(/static/fonts/Dosis.ttf);
+}
+
+h1 {
+  font-family: 'Dosis', sans-serif;
+  color: #495057;
+}
+
+body {
+  background: url("../img/bg.jpg") center bottom / cover;
+  height: 100vh;
+}
+
+.login-form {
+  background-color: #fff;
+  display: inline-block;
+  padding: 2em;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 5px;
+}
+
+.login-form input {
+  width: 100%;
+}

app/base/static/css/style.css

@@ -0,0 +1,359 @@
+@font-face {
+  font-family: 'Dosis';
+  src: url(/static/fonts/Dosis.ttf);
+}
+
+.font-dosis {
+  font-family: 'Dosis', sans-serif;
+}
+
+/*
+ * Colors
+ */
+
+:root {
+  --bg-subtle: #fff;
+  --bg-subtle-hover: #ededed;
+  --bg-dim: #f8f9fa;
+  --bg-dim-hover: #dae0e5;
+  --bg-owba: #e94190;
+  --bg-owba-hover: #cc287a;
+  --fg-subtle: #495057;
+}
+
+.bg-subtle {
+  background-color: var(--bg-subtle);
+}
+.bg-subtle:hover {
+  background-color: var(--bg-subtle-hover);
+}
+.bg-dim {
+  background-color: var(--bg-dim);
+}
+.btn.bg-dim:hover, .list-group-item-action.bg-dim:hover {
+  background-color: var(--bg-dim-hover);
+}
+.bg-owba {
+  color: #fff;
+  background-color: var(--bg-owba);
+}
+.bg-owba:hover {
+  color: #e8e8e8;
+  background-color: var(--bg-owba-hover);
+}
+
+/* 
+ * Layout
+ */
+h1, h2, h3, h4 {
+  font-family: 'Dosis', sans-serif;
+  color: var(--fg-subtle);
+}
+
+header {
+  height: 4rem;
+  position: sticky;
+  top: 0;
+  background-color: #fff;
+  box-shadow: 0 4px 4px -4px rgba(0, 0, 0, .2);
+  z-index: 99;
+}
+
+#main-nav {
+  display: flex;
+}
+
+#navbar-toggler {
+  display: none;
+  margin-right: 1em;
+  cursor: pointer;
+}
+
+#logo {
+  height: 2em
+}
+
+#global-search {
+  flex-grow: 1;
+  display: flex;
+}
+
+#global-search input {
+  flex-grow: 1;
+  background-color: #ededed;
+  border: none;
+  border-radius: 5px 0 0 5px;
+  padding-left: .8em;
+}
+
+#global-search .btn {
+  border-radius: 0 5px 5px 0;
+}
+
+#breadcrumbs {
+  font-family: 'Dosis', sans-serif;
+  margin: 1rem 0 1rem 0;
+}
+
+#breadcrumbs a, #breadcrumbs span {
+  display: inline-block;
+  text-decoration: none;
+  padding: .3rem .5rem;
+  margin: 4px 0;
+  border-radius: .2em;
+  background-color: #EEE;
+  color: #000;
+  transition: .5s;
+}
+
+#breadcrumbs a:hover {
+  background-color: #DDD;
+  color: #000;
+  text-decoration: none;
+}
+
+#sidebar-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+#checkin-timer {
+  font: 2rem 'Dosis', sans-serif;
+}
+.checkin-title {
+  font: 500 1.5rem 'Dosis', sans-serif;
+  text-align: center;
+}
+.account-balance {
+  font: 3em 'Dosis', sans-serif;
+}
+
+table th {
+  font-size: .8em;
+  background-color: var(--bg-dim);
+}
+
+thead>tr {
+  border: 1px solid #DDD;
+  position: sticky;
+  top: 4rem;
+  z-index: 98;
+}
+
+/* .detail-table {
+  width: max-content;
+  max-width: 100%;
+} */
+.detail-table th {
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.detail-table td {
+  width: 100%;
+}
+
+.raw-text {
+  white-space: pre-line;
+}
+
+tbody>tr {
+  border: 1px solid #DDD;
+}
+
+td.table-actions {
+  padding: 0;
+  text-align: center;
+  vertical-align: middle;
+}
+td.table-actions a {
+  padding: .25rem;
+  transition: .3s;
+  color: #0002;
+}
+tbody>tr:hover td.table-actions a {
+  color: #0006;
+}
+td.table-actions a:hover {
+  color: #000B !important;
+}
+/* .table-actions a:not(:first-child) {
+  margin-left: .4rem;
+} */
+
+.table-sm tbody>tr {
+  border: unset !important;
+}
+
+table.clickable tbody>tr {
+  cursor: pointer;
+}
+table.clickable tbody>tr:hover {
+  background-color: var(--bg-subtle-hover);
+}
+
+.h1-w-icon {
+  display: flex;
+  gap: .3em;
+  align-items: baseline;
+  color: var(--fg-subtle);
+  font-size: 2.5rem;
+}
+.h1-w-icon+.h1-w-icon {
+  font-size: 2rem;
+}
+.h1-w-icon>h1 {
+  font-size: unset;
+}
+
+.h-with-action {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.nowrap {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.toolbar {
+  display: flex;
+  margin-bottom: .8em;
+  align-items: center;
+  gap: .5rem;
+}
+
+.border1 {
+  border: 1px solid
+}
+.font-sm {
+  font-size: 90%
+}
+
+.avatar {
+  height: 3em;
+  width: 3em;
+  margin-left: 2em;
+  position: relative;
+}
+
+.avatar button {
+  height: 100%;
+  width: 100%;
+  background-color: #e94190;
+  color: #fff;
+  border-radius: 50%;
+  border: none;
+}
+
+.avatar button:hover {
+  color: #e8e8e8;
+}
+
+.col {
+  hyphens: auto;
+}
+
+.text-red {
+  color: #df2752;
+}
+.text-green {
+  color: #23be58;
+}
+
+#profileMenu {
+  position: absolute;
+  right: 0;
+  top: 3rem;
+}
+
+#wrapper {
+  overflow: visible;
+  position: relative;
+}
+
+#sidebar-wrapper {
+  font-family: 'Dosis', sans-serif;
+  font-size: 1.2rem;
+  -webkit-transition: margin .25s ease-out;
+  -moz-transition: margin .25s ease-out;
+  -o-transition: margin .25s ease-out;
+  transition: margin .25s ease-out;
+  position: sticky;
+  top: 4rem;
+  height: calc(100vh - 4rem);
+}
+
+#sidebar-wrapper .list-group {
+  width: max-content;
+}
+
+#sidebar-wrapper i {
+  width: 2rem;
+  text-align: center;
+}
+
+#page-content-wrapper {
+  margin-bottom: 15px;
+}
+
+.table-toolbar {
+  margin-bottom: 1rem;
+}
+
+.modal {
+  background-color: rgba(0, 0, 0, .6);
+}
+
+.create-form {
+  max-width: 600px;
+}
+.create-form input, .create-form select, .create-form textarea {
+  width: 100%;
+}
+.create-form input[type="checkbox"] {
+  margin: 0 .5em;
+  width: 1.25em;
+  height: 1.25em;
+  vertical-align: text-bottom;
+}
+.create-form input[type="date"],
+.create-form input[type="time"] {
+  width: unset;
+  padding: .3rem .75rem;
+  vertical-align: middle;
+}
+.create-form>div {
+  margin-bottom: 1rem;
+}
+
+@media (min-width: 768px) {
+  #page-content-wrapper {
+    width: 100%;
+  }
+}
+
+@media (max-width: 900px) {
+  #sidebar-wrapper:not(.show) {
+    display: none;
+  }
+
+  #navbar-toggler {
+    display: block;
+  }
+}
+
+.fw-col {
+  flex: unset
+}
+
+/* Disable number up-down arrows */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  appearance: none;
+}
+input[type=number] {
+  appearance: textfield;
+}

app/base/static/js/forms.js

@@ -0,0 +1,34 @@
+function dateTimeSetNow(theId) {
+    const now = new Date();
+    const localNow = new Date(Date.UTC(
+        now.getFullYear(), now.getMonth(), now.getDate(),
+        now.getHours(), now.getMinutes()));
+    dateFieldSet(theId, localNow);
+    dateFieldSet(theId + '_day', localNow);
+    dateFieldSet(theId + '_time', localNow);
+}
+
+function dateTimeReset(theId) {
+    dateFieldSet(theId, null);
+    dateFieldSet(theId + '_day', null);
+    dateFieldSet(theId + '_time', null);
+}
+
+function dateFieldSet(theId, value = null) {
+    const el = document.getElementById(theId);
+    if (el) el.valueAsDate = value;
+}
+
+$(document).ready(function () {
+    $('select').select2({
+        width: '100%',
+        placeholder: '–– nicht ausgewählt ––',
+        allowClear: true,
+        // minimumResultsForSearch: 7,
+        // minimumInputLength: 1,
+    });
+});
+
+$(document).on('select2:open', () => {
+    document.querySelector('.select2-search__field').focus();
+});

app/base/static/js/main.js

@@ -0,0 +1,22 @@
+function toggleMenu(theId) {
+  const menu = document.getElementById(theId);
+  menu.classList.toggle('show');
+  if (menu.classList.contains('show')) {
+    setTimeout(() => {
+      document.addEventListener('click', () => {
+        menu.classList.remove('show');
+      }, { once: true });
+    }, 50); // timeout to not immediately close
+  }
+}
+
+function highlight(div) {
+  const prev = div.style;
+  div.style.transition = 'background-color 0.5s';
+  div.style.backgroundColor = 'yellow';
+  setTimeout(() => {
+    div.style.transition = 'background-color 4s';
+    div.style.backgroundColor = 'unset';
+  }, 500);
+  setTimeout(() => div.style = prev, 600);
+}

app/base/static/js/onload.js

@@ -0,0 +1,8 @@
+document.querySelectorAll('.table[data-onclick]').forEach((tbl) => {
+    tbl.classList.add('clickable');
+    const callback = new Function(tbl.dataset.onclick);
+    tbl.onclick = (event) => {
+        const entry = event.target.closest('tbody>tr');
+        if (entry) { callback.call(tbl, row=entry); }
+    };
+});

app/base/static/js/person-detail.js

@@ -0,0 +1,27 @@
+window.onload = function () {
+    const timer = document.getElementById('checkin-timer');
+    if (timer) {
+        updateTimer(timer);
+        setInterval(function () { updateTimer(timer); }, 1000);
+    }
+}
+
+function updateTimer(timer) {
+    let diff = (new Date() - new Date(timer.dataset.since)) / 1000;
+    const hh = Math.floor(diff / 60 / 60);
+    diff -= hh * 60 * 60;
+    const mm = Math.floor(diff / 60);
+    const ss = Math.floor(diff - mm * 60);
+    timer.textContent = `${hh}h ${mm}min ${ss}s`;
+}
+
+function showNoteModal(show) {
+    const div = document.getElementById('note-modal');
+    if (show) {
+        div.style.display = 'block';
+        setTimeout(() => div.classList.add('show'), 10);
+    } else {
+        div.classList.remove('show');
+        setTimeout(() => div.style.display = null, 200); // wait for fade
+    }
+}

app/base/static/select2-4.0.13/js/i18n_ol/de.js

@@ -0,0 +1,3 @@
+/*! Select2 4.0.13 | https://github.com/select2/select2/blob/master/LICENSE.md */
+
+!function(){if(jQuery&&jQuery.fn&&jQuery.fn.select2&&jQuery.fn.select2.amd)var e=jQuery.fn.select2.amd;e.define("select2/i18n/de",[],function(){return{errorLoading:function(){return"Die Ergebnisse konnten nicht geladen werden."},inputTooLong:function(e){return"Bitte "+(e.input.length-e.maximum)+" Zeichen weniger eingeben"},inputTooShort:function(e){return"Bitte "+(e.minimum-e.input.length)+" Zeichen mehr eingeben"},loadingMore:function(){return"Lade mehr Ergebnisse…"},maximumSelected:function(e){var n="Sie können nur "+e.maximum+" Element";return 1!=e.maximum&&(n+="e"),n+=" auswählen"},noResults:function(){return"Keine Übereinstimmungen gefunden"},searching:function(){return"Suche…"},removeAllItems:function(){return"Entferne alle Elemente"}}}),e.define,e.require}();

app/base/static/select2-4.0.13/js/i18n_ol/en.js

@@ -0,0 +1,3 @@
+/*! Select2 4.0.13 | https://github.com/select2/select2/blob/master/LICENSE.md */
+
+!function(){if(jQuery&&jQuery.fn&&jQuery.fn.select2&&jQuery.fn.select2.amd)var e=jQuery.fn.select2.amd;e.define("select2/i18n/en",[],function(){return{errorLoading:function(){return"The results could not be loaded."},inputTooLong:function(e){var n=e.input.length-e.maximum,r="Please delete "+n+" character";return 1!=n&&(r+="s"),r},inputTooShort:function(e){return"Please enter "+(e.minimum-e.input.length)+" or more characters"},loadingMore:function(){return"Loading more results…"},maximumSelected:function(e){var n="You can only select "+e.maximum+" item";return 1!=e.maximum&&(n+="s"),n},noResults:function(){return"No results found"},searching:function(){return"Searching…"},removeAllItems:function(){return"Remove all items"}}}),e.define,e.require}();