Commit 0b5356d2 authored by Dennis Appel's avatar Dennis Appel

Add local storage support, minor css fixes

parent be5406b8
......@@ -18,7 +18,7 @@
<ul class='no-bullet'>
<li>Technische Hochschule Mittelhessen</li>
<li>Wilhelm-Leuschner-Strafle 13</li>
<li>61669 Friedberg (Hessen)</li>
<li>61169 Friedberg (Hessen)</li>
<li>Telefon: 06031 6040</li>
<li>E-Mail: marc.ackermann@iem.thm.de</li>
</ul>
......
from django.contrib import admin
from .models import CheckListEntry
from .models import CheckListEntry, CheckListCategory
admin.site.register(CheckListEntry)
admin.site.register(CheckListCategory)
# Generated by Django 2.1.3 on 2018-12-12 14:39
from django.db import migrations, models
import django.db.models.deletion
class Migration(migrations.Migration):
dependencies = [
('checklist', '0002_auto_20181211_1447'),
]
operations = [
migrations.CreateModel(
name='CheckListCategory',
fields=[
('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('categoryTitle', models.CharField(max_length=100)),
],
),
migrations.AddField(
model_name='checklistentry',
name='checklistCategory',
field=models.ForeignKey(default=1, on_delete=django.db.models.deletion.SET_DEFAULT, to='checklist.CheckListCategory'),
),
]
from django.db import models
class CheckListCategory(models.Model):
categoryTitle = models.CharField(max_length=100)
def getEntries(self):
return self.checklistentry_set.all()
def __str__(self):
return self.categoryTitle
class CheckListEntry(models.Model):
wikiEntry = models.ForeignKey(
'wiki.WikiEntry', on_delete=models.SET_NULL, blank=True, null=True)
checklistCategory = models.ForeignKey(
'checklist.CheckListCategory', on_delete=models.SET_DEFAULT, default=1)
checkListEntryTitle = models.CharField(max_length=200)
checkListEntrySeverity = models.CharField(max_length=10)
checkListEntryDescription = models.TextField()
......
......@@ -7,29 +7,65 @@
{% endblock %}
{% block content %}
{% if checklist_entries %}
<div class="grid-container vertical-space">
<h1>Checkliste</h1>
<div id='checklist' class="grid-x grid-margin-x grid-padding-x grid-padding-y grid-margin-y">
{% for entry in checklist_entries %}
<div class="cell cell-background-lg">
<h3>{{entry.checkListEntryTitle}}</h3>
<div>
<span class="alert label">Offen</span>
<span class="primary label">Gewichtung: {{entry.checkListEntrySeverity}}</span>
<section>
{% if checklist %}
<div class="grid-x">
<div class="cell large-2 cell-background-wiki-mg wiki-navigation">
<section>
<div name="checklist-navigation" id="checklist-navigation" class="text-center">
<h4>Inhalt</h4>
</div>
<ul class="vertical menu">
{% for category in checklist %}
<li>
<a class="wiki-navigation-link" href="#category_{{category.id}}">{{category.categoryTitle}}</a>
</li>
{% endfor %}
</ul>
</section>
</div>
<div class="cell large-6 large-offset-1 content">
<h1>Checkliste</h1>
<div id='checklist' class="grid-x grid-margin-x grid-padding-x grid-padding-y grid-margin-y">
{% for category in checklist %}
<div class="cell">
<div class="grid-x">
<div class="cell cell-background-lg" id="category_{{category.id}}" name="category_{{category.id}}">
<h3>{{category.categoryTitle}}</h3>
</div>
{% for entry in category.getEntries %}
<div class="cell cell-background-lg" id="entry_{{entry.id}}" name="entry_{{entry.id}}">
<h3>{{entry.checkListEntryTitle}}</h3>
<div>
<span class="alert label">Offen</span>
&nbsp;
<span class="primary label">Gewichtung: {{entry.checkListEntrySeverity}}</span>
&nbsp;
</div>
<p class="vertical-space-small">
{{entry.checkListEntryDescription}}</br>
</p>
<button class="button" onclick="checkListToggle(this, {{entry.id}})">Abschlie&szlig;en</button>
{% if entry.wikiEntry.id %}
<a class="link" href="{% url 'wiki:index' %}#item_{{entry.wikiEntry.id}}"><button class="hollow button">Wiki</button></a>
{% endif %}
<a class="link" href="#checklist-navigation"><button class="button hollow">Zur&uuml;ck</button></a>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
<p class="vertical-space-small">
{{entry.checkListEntryDescription}}</br>
</p>
<button class="button" onclick="checkListToggle(this)">Erledigt</button>
<a class="link" href="{% url 'wiki:index' %}#item_{{entry.id}}"><button class="hollow button">Wiki</button></a>
</div>
{% endfor %}
</div>
</div>
{% else %}
<p>Keine Eintraege gefunden</p>
{% else %}
<p>Keine Eintraege gefunden</p>
{% endif %}
{% endif %}
</section>
{% endblock %}
......@@ -3,12 +3,12 @@ from django.shortcuts import render
from django.urls import reverse
from django.views import generic
from .models import CheckListEntry
from .models import CheckListCategory
class IndexView(generic.ListView):
template_name = 'checklist/index.html'
context_object_name = 'checklist_entries'
context_object_name = 'checklist'
def get_queryset(self):
return CheckListEntry.objects.all()
return CheckListCategory.objects.all()
This source diff could not be displayed because it is too large. You can view the blob instead.
$(document).foundation();
function checkListToggle(element) {
var checklistJson = {"entries" : {"entry_1": true,}};
window.onload = function() {
loadLocalStorage();
}
function checkListToggle(element, checklistId) {
let label = element.parentElement.getElementsByClassName("label")[0];
element.innerHTML = label.classList.contains("alert") ? "&Ouml;ffnen" : "Abschlie&szlig;en";
let completed = label.classList.contains("alert") ? true : false;
label.innerHTML = label.classList.contains("alert") ? "Erledigt" : "Offen";
label.classList.toggle("alert");
label.classList.toggle("success");
updateLocalStorage(checklistId, completed);
}
function updateLocalStorage(checklistId, completed) {
let checklistJson = JSON.parse(localStorage.getItem('checklist'))
if (checklistJson === null) {
checklistJson = {};
}
let item = "entry_" + checklistId;
checklistJson[item] = completed;
localStorage.setItem('checklist', JSON.stringify(checklistJson));
}
function loadLocalStorage() {
let checklistJson = JSON.parse(localStorage.getItem('checklist'))
for (let item in checklistJson) {
if (checklistJson[item]) {
document.getElementById(item).getElementsByTagName("button")[0].click()
}
}
}
......@@ -47,46 +47,46 @@ $dark-blue: #23405a;
}
.menu .menu-text{
padding: 0;
padding: 0;
}
.menu-border-left {
color: black;
border-left: 1px solid $dark-gray;
color: black;
border-left: 1px solid $dark-gray;
}
.top-bar {
padding: 0.7rem;
padding: 0.7rem;
}
.wiki-navigation {
border-right: 1px solid #efefef;
border-right: 1px solid #efefef;
padding: 15px;
}
.wiki-navigation-link {
color: #444444;
font-weight: bold;
color: #444444;
font-weight: bold;
}
.wiki-navigation-link:hover {
color: scale-color(#444444, $lightness: -100%);
color: scale-color(#444444, $lightness: -100%);
}
.footer {
border-top: 1px solid $dark-gray;
bottom: 0;
width: 100%;
position: absolute;
border-top: 1px solid $dark-gray;
bottom: 0;
width: 100%;
position: absolute;
}
html, body {
height: 100%;
height: 100%;
}
.main {
min-height:100%;
position: relative;
min-height:100%;
position: relative;
}
.wiki-main {
......@@ -124,3 +124,13 @@ html, body {
.padding-bottom {
padding-bottom: 4rem;
}
.banner-title {
font-size:100%;
color: white;
line-height: 1;
text-decoration: none;
display: block;
padding: 0.7rem 1rem;
font-weight: bold;
}
<!DOCTYPE html>
<html class="no-js" lang="de">
<head>
{% load staticfiles %}
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{% block title %}
<title>{{title}} - Barrierefreie App</title>
{% endblock %}
<link rel="stylesheet" href="{% static 'css/app.css' %}" />
</head>
<body>
<div class="main">
{% block header %}{% endblock %}
{% block navigation %}
<section>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text"><a>Webportal - ergonomische, mobile Anwendungen</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu align-right middle">
<li class="menu-border-left"><a href="/welcome/">Start</a></li>
<li class="menu-border-left"><a href="/about/">Infos</a></li>
<li class="menu-border-left"><a href="/checklist/">Checkliste</a></li>
<li class="menu-border-left"><a href="/wiki/">Wiki</a></li>
</ul>
</div>
</div>
</section>
{% endblock %}
{% block content %}{% endblock %}
<head>
{% load staticfiles %}
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{% block title %}
<title>{{title}} - Barrierefreie App</title>
{% endblock %}
<link rel="stylesheet" href="{% static 'css/app.css' %}" />
</head>
<body>
<div class="main">
{% block header %}{% endblock %}
{% block navigation %}
<section>
<div class="top-bar">
<div class="top-bar-left">
<span class="banner-title">Webportal - ergonomische, mobile Anwendungen</span>
</div>
<div class="top-bar-right">
<nav>
<ul class="menu align-right middle">
<li class="menu-border-left"><a href="/welcome/">Start</a></li>
<li class="menu-border-left"><a href="/about/">Infos</a></li>
<li class="menu-border-left"><a href="/checklist/">Checkliste</a></li>
<li class="menu-border-left"><a href="/wiki/">Wiki</a></li>
</ul>
</nav>
</div>
</div>
</section>
{% endblock %}
{% block content %}{% endblock %}
{% block footer %}
<section>
<div class="footer cell-background-mg">
<ul class="menu middle">
<li>
<a class="link" href="/about/impressum/">Impressum</a>
</li>
</ul>
</div>
</section>
{% endblock %}
</div>
{% block footer %}
<section>
<div class="footer cell-background-mg">
<ul class="menu middle">
<li>
<a class="link" href="/about/impressum/">Impressum</a>
</li>
</ul>
</div>
</section>
{% endblock %}
</div>
<script src="{% static 'node_modules/jquery/dist/jquery.js' %}"></script>
<script src="{% static 'node_modules/what-input/dist/what-input.js' %}"></script>
<script src="{% static 'node_modules/foundation-sites/dist/js/foundation.js' %}"></script>
<script src="{% static 'js/app.js' %}"></script>
</body>
<script src="{% static 'node_modules/jquery/dist/jquery.js' %}"></script>
<script src="{% static 'node_modules/what-input/dist/what-input.js' %}"></script>
<script src="{% static 'node_modules/foundation-sites/dist/js/foundation.js' %}"></script>
<script src="{% static 'js/app.js' %}"></script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment