From 9c77a1b4a8337f8ea004e0f1b20bcb5364e9359e Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Thu, 23 Apr 2020 18:07:49 +0200
Subject: [PATCH] Add views

---
 views/about.njk            |  14 ++++
 views/errors/400.njk       |   2 +
 views/errors/401.njk       |   2 +
 views/errors/403.njk       |   2 +
 views/errors/404.njk       |   2 +
 views/errors/500.njk       |   2 +
 views/errors/503.njk       |   2 +
 views/errors/error.njk     |  36 ++++++++++
 views/home.njk             |   7 ++
 views/layouts/barebone.njk |  35 ++++++++++
 views/layouts/base.njk     |  40 +++++++++++
 views/macros.njk           | 136 +++++++++++++++++++++++++++++++++++++
 12 files changed, 280 insertions(+)
 create mode 100644 views/about.njk
 create mode 100644 views/errors/400.njk
 create mode 100644 views/errors/401.njk
 create mode 100644 views/errors/403.njk
 create mode 100644 views/errors/404.njk
 create mode 100644 views/errors/500.njk
 create mode 100644 views/errors/503.njk
 create mode 100644 views/errors/error.njk
 create mode 100644 views/home.njk
 create mode 100644 views/layouts/barebone.njk
 create mode 100644 views/layouts/base.njk
 create mode 100644 views/macros.njk

diff --git a/views/about.njk b/views/about.njk
new file mode 100644
index 0000000..08342ae
--- /dev/null
+++ b/views/about.njk
@@ -0,0 +1,14 @@
+{% extends 'layouts/base.njk' %}
+
+{% set title = 'Example App - About us' %}
+
+{% block body %}
+    <h1>Very interesting</h1>
+
+    <div class="container">
+        <section class="panel">
+            <h2>This is us</h2>
+            <p class="center">And we like wms!</p>
+        </section>
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/views/errors/400.njk b/views/errors/400.njk
new file mode 100644
index 0000000..a5bc022
--- /dev/null
+++ b/views/errors/400.njk
@@ -0,0 +1,2 @@
+{% extends './error.njk' %}
+{% import 'macros.njk' as macros %}
diff --git a/views/errors/401.njk b/views/errors/401.njk
new file mode 100644
index 0000000..a5bc022
--- /dev/null
+++ b/views/errors/401.njk
@@ -0,0 +1,2 @@
+{% extends './error.njk' %}
+{% import 'macros.njk' as macros %}
diff --git a/views/errors/403.njk b/views/errors/403.njk
new file mode 100644
index 0000000..a5bc022
--- /dev/null
+++ b/views/errors/403.njk
@@ -0,0 +1,2 @@
+{% extends './error.njk' %}
+{% import 'macros.njk' as macros %}
diff --git a/views/errors/404.njk b/views/errors/404.njk
new file mode 100644
index 0000000..a5bc022
--- /dev/null
+++ b/views/errors/404.njk
@@ -0,0 +1,2 @@
+{% extends './error.njk' %}
+{% import 'macros.njk' as macros %}
diff --git a/views/errors/500.njk b/views/errors/500.njk
new file mode 100644
index 0000000..a5bc022
--- /dev/null
+++ b/views/errors/500.njk
@@ -0,0 +1,2 @@
+{% extends './error.njk' %}
+{% import 'macros.njk' as macros %}
diff --git a/views/errors/503.njk b/views/errors/503.njk
new file mode 100644
index 0000000..a5bc022
--- /dev/null
+++ b/views/errors/503.njk
@@ -0,0 +1,2 @@
+{% extends './error.njk' %}
+{% import 'macros.njk' as macros %}
diff --git a/views/errors/error.njk b/views/errors/error.njk
new file mode 100644
index 0000000..3e0236a
--- /dev/null
+++ b/views/errors/error.njk
@@ -0,0 +1,36 @@
+{% extends '../layouts/barebone.njk' %}
+
+{% set title = error_code + ' - ' + error_message %}
+
+{% block _stylesheets %}
+    <link rel="stylesheet" href="/css/error.css">
+{% endblock %}
+
+{% block _body %}
+    <div class="logo"><a href="/">Example app</a></div>
+
+    <main class="{% block class %}{% endblock %}">
+        {% if flash %}
+            {{ macros.messages(flash) }}
+        {% endif %}
+
+        <div class="error-code">{{ error_code }}</div>
+        <div class="error-message">{{ error_message }}</div>
+        <div class="error-instructions">{{ error_instructions|safe }}</div>
+
+        <nav>
+            {% if session.previousUrl and session.previousUrl != '/' and session.previousUrl != url %}
+                <a href="{{ session.previousUrl }}" class="button"><i data-feather="arrow-left"></i> Go back</a>
+            {% endif %}
+
+            <a href="/" class="button"><i data-feather="home"></i> Go to homepage</a>
+        </nav>
+    </main>
+
+    <div class="contact">
+        Error ID: {{ error_id }}
+        <br>
+        If you think this isn't right, please contact us with the above error ID at
+        <a href="mailto:contact@example.net">contact@example.net</a>.
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/views/home.njk b/views/home.njk
new file mode 100644
index 0000000..1afefb7
--- /dev/null
+++ b/views/home.njk
@@ -0,0 +1,7 @@
+{% extends 'layouts/base.njk' %}
+
+{% set title = 'Example App - Hello world!' %}
+
+{% block body %}
+    <h1>Hello world!</h1>
+{% endblock %}
\ No newline at end of file
diff --git a/views/layouts/barebone.njk b/views/layouts/barebone.njk
new file mode 100644
index 0000000..c40f522
--- /dev/null
+++ b/views/layouts/barebone.njk
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{{ title }}</title>
+
+    <link rel="shortcut icon" type="image/png" href="/img/logox1024.png">
+    <link rel="shortcut icon" type="image/png" href="/img/logox128.png">
+    <link rel="shortcut icon" type="image/svg" href="/img/logo.svg">
+
+    {% if description %}
+        <meta name="description" content="{{ description }}">
+    {% endif %}
+
+    {% if refresh_after %}
+        <meta http-equiv="refresh" content="{{ refresh_after }}">
+    {% endif %}
+
+    {% block _stylesheets %}{% endblock %}
+    {% block _scripts %}
+        <script src="/js/app.js" defer></script>
+    {% endblock %}
+</head>
+<body>
+
+<header>
+    {% block header %}{% endblock %}
+</header>
+
+{% block _body %}{% endblock %}
+
+<footer>{% block footer %}{% endblock %}</footer>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/views/layouts/base.njk b/views/layouts/base.njk
new file mode 100644
index 0000000..36e5e8d
--- /dev/null
+++ b/views/layouts/base.njk
@@ -0,0 +1,40 @@
+{% extends './barebone.njk' %}
+{% import 'macros.njk' as macros %}
+
+{% block _stylesheets %}
+    {{ super() }}
+    <link rel="stylesheet" href="/css/app.css">
+    {% block stylesheets %}{% endblock %}
+{% endblock %}
+{% block _scripts %}
+    {{ super() }}
+    {% block scripts %}{% endblock %}
+{% endblock %}
+
+{% block header %}
+    <a href="/" class="logo"><img src="/img/logo.svg" alt="Logo"> Example app</a>
+    <nav>
+        <ul>
+            <li><a href="{{ route('about') }}"><i data-feather="info"></i> About</a></li>
+        </ul>
+    </nav>
+{% endblock %}
+
+{% block _body %}
+    <div class="container">
+        {{ macros.messages(flash) }}
+    </div>
+
+    <main>
+        {% if h1 %}
+            <h1>{{ h1 }}</h1>
+        {% endif %}
+        {% if subtitle %}
+            <p>{{ subtitle }}</p>
+        {% endif %}
+
+        {% block body %}{% endblock %}
+    </main>
+{% endblock %}
+
+{% block footer %}Example app v{{ app_version }} - all rights reserved.{% endblock %}
\ No newline at end of file
diff --git a/views/macros.njk b/views/macros.njk
new file mode 100644
index 0000000..6ba1583
--- /dev/null
+++ b/views/macros.njk
@@ -0,0 +1,136 @@
+{% macro message(type, content, raw=false, discreet=false) %}
+    <div class="message{{ ' message-discreet' if discreet }}" data-type="{{ type }}">
+        <i class="icon"></i>
+        <span class="content">
+            {{ content|safe if raw else content }}
+        </span>
+    </div>
+{% endmacro %}
+
+{% macro messages(flash) %}
+    {% set flashed = flash() %}
+    {% set display = 0 %}
+
+    {% for type, bag in flashed %}
+        {% if bag|length %}
+            {% set display = 1 %}
+        {% endif %}
+    {% endfor %}
+
+    {% if display %}
+        <div class="messages">
+            {% for type, bag in flashed %}
+                {% for content in bag %}
+                    {{ message(type, content) }}
+                {% endfor %}
+            {% endfor %}
+        </div>
+    {% endif %}
+{% endmacro %}
+
+{% macro csrf(getCSRFToken) %}
+    <input type="hidden" name="csrf" value="{{ getCSRFToken() }}">
+{% endmacro %}
+
+{% macro field(_locals, type, name, value, placeholder, hint, validation_attributes='', extraData='') %}
+    {% set validation = _locals.validation() %}
+    {% set validation = validation[name] if validation[name] or null %}
+    {% set previousFormData = _locals.previousFormData() %}
+    {% set value = previousFormData[name] or value or validation.value or '' %}
+
+    {% if type == 'hidden' %}
+        {% if validation %}
+            {{ message('error', validation.message) }}
+        {% endif %}
+        <input type="hidden" name="{{ name }}" value="{{ value }}">
+    {% else %}
+        <div class="form-field{{ ' inline' if type == 'checkbox' }}">
+            {% if type == 'duration' %}
+                <div class="input-group">
+                    {% for f in extraData %}
+                        <div class="time-input">
+                            {% if previousFormData[name] %}
+                                {% set v = value[f] %}
+                            {% else %}
+                                {% set v = (value % 60) if f == 's' else (((value - value % 60) / 60 % 60) if f == 'm' else ((value - value % 3600) / 3600 if f == 'h')) %}
+                            {% endif %}
+                            <input type="number" name="{{ name }}[{{ f }}]" id="field-{{ name }}-{{ f }}"
+                                   value="{{ v }}"
+                                   min="0" {{ 'max=60' if (f == 's' or f == 'm') }}
+                                    {{ validation_attributes }}>
+                            <label for="field-{{ name }}-{{ f }}">{{ f }}</label>
+                        </div>
+                    {% endfor %}
+                </div>
+            {% elseif type == 'select' %}
+                <select name="{{ name }}" id="field-{{ name }}">
+                    {% for option in extraData %}
+                        <option value="{{ option }}" {{ 'selected' if value == option }}>{{ option }}</option>
+                    {% endfor %}
+                </select>
+                <i data-feather="chevron-down"></i>
+            {% else %}
+                <input type="{{ type }}" name="{{ name }}" id="field-{{ name }}"
+                        {% if type != 'checkbox' %} value="{{ value }}" {% endif %}
+                        {{ 'checked' if (type == 'checkbox' and value == 'on') }}
+                        {{ validation_attributes|safe }}>
+            {% endif %}
+
+            <label for="field-{{ name }}{{ '-' + extraData[0] if type == 'duration' }}">{{ placeholder }}</label>
+            {% if validation %}
+                <div class="error"><i data-feather="x-circle"></i> {{ validation.message }}</div>
+            {% endif %}
+            {% if hint %}
+                <div class="hint"><i data-feather="info"></i> {{ hint }}</div>
+            {% endif %}
+        </div>
+    {% endif %}
+{% endmacro %}
+
+{% macro websocket(websocketUrl, listener, reconnectOnClose = 1, checkFunction = 0) %}
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            {% if checkFunction %}
+            if (!{{ checkFunction }}()) return;
+            {% endif %}
+
+            const run = () => {
+                const websocket = new WebSocket('{{ websocketUrl }}');
+                websocket.onopen = (e) => {
+                    console.debug('Websocket connected');
+                };
+                websocket.onmessage = (e) => {
+                    {{ listener }}(websocket, e);
+                };
+                websocket.onerror = (e) => {
+                    console.error('Websocket error', e);
+                };
+                websocket.onclose = (e) => {
+                    console.debug('Websocket closed', e.code, e.reason);
+
+                    {% if reconnectOnClose %}
+                    setTimeout(run, 1000);
+                    {% endif %}
+                };
+            };
+
+            run();
+        });
+    </script>
+{% endmacro %}
+
+{% macro paginate(pagination, routeName) %}
+    {% if pagination.hasPrevious() or pagination.hasNext() %}
+        <div class="pagination">
+            {% if pagination.hasPrevious() %}
+                <a href="{{ route(routeName, {page: pagination.page - 1}) }}"><i data-feather="chevron-left"></i></a>
+            {% endif %}
+
+            <span>{{ pagination.page }}</span>
+
+            {% if pagination.hasNext() %}
+                <a href="{{ route(routeName, {page: pagination.page + 1}) }}"><i data-feather="chevron-right"></i></a>
+            {% endif %}
+        </div>
+    {% endif %}
+{% endmacro %}
\ No newline at end of file