WIP: Implement frontend

2023-09-18 13:10:20 +02:00
parent bfc5e5e242
commit ce97017ac4
70 changed files with 8751 additions and 337 deletions
@@ -0,0 +1,22 @@
+<div id="ajax-modal"
+     class="fixed inset-0 w-full h-full z-50 hidden"
+     {{ stimulus_controller('ajax-modal') }}
+>
+    <div class="absolute inset-0 w-full h-full bg-black/80" {{ stimulus_action('ajax-modal', 'hide', 'click') }}></div>
+    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 px-4 shadow w-full max-w-xl">
+        <div class="bg-white p-8">
+            <div class="flex justify-between pb-4">
+                <div class="text-lg font-medium" {{ stimulus_target('ajax-modal', 'title') }}></div>
+                <button type="button"
+                        class="inline-block"
+                        {{ stimulus_action('ajax-modal', 'hide') }}>
+                    {{ icon('close', 'w-6 h-6')}}
+                </button>
+            </div>
+            <div class="hidden" {{ stimulus_target('ajax-modal', 'content') }}></div>
+            <div {{ stimulus_target('ajax-modal', 'spinner') }}>
+                {% include '_partials/_spinner.html.twig' with { 'class': 'w-8 h-8 mx-auto'} %}
+            </div>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,28 @@
+<div id="confirmation-modal"
+     class="fixed top-0 left-0 z-50 inset-0 hidden"
+     {{ stimulus_controller('confirmation-modal') }}
+>
+    <div class="absolute top-0 left-0 inset-0 bg-black/80" {{ stimulus_action('confirmation-modal', 'hide', 'click') }}></div>
+    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-8 shadow w-full max-w-3xl rounded">
+        <div class="flex justify-between border-b border-gray-200 pb-2 mb-4">
+            <div class="flex items-center space-x-2">
+                {{ icon('alert', 'w-8 h-8') }}
+                <span class="text-lg font-medium" {{ stimulus_target('confirmation-modal', 'title') }}></span>
+            </div>
+            <button class="inline-block" {{ stimulus_action('confirmation-modal', 'hide') }}>
+                {{ icon('close', 'w-8 h-8') }}
+            </button>
+        </div>
+        <form method="post" {{ stimulus_target('confirmation-modal', 'form') }}>
+            <div {{ stimulus_target('confirmation-modal', 'content') }}></div>
+            <div class="mt-6 flex justify-between">
+                <button type="submit" class="btn btn--warning">
+                    Ja
+                </button>
+                <button type="button" class="btn btn--secondary" {{ stimulus_action('confirmation-modal', 'hide') }}>
+                    Abbrechen
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
@@ -0,0 +1,9 @@
+{% if app.session.flashBag.peek('error')|length > 0 %}
+    {% include '_partials/_toast.html.twig' with { level: 'warning', messages: app.flashes('error') } %}
+{% endif %}
+{% if app.session.flashBag.peek('success')|length > 0 %}
+    {% include '_partials/_toast.html.twig' with { level: 'success', messages: app.flashes('success') } %}
+{% endif %}
+{% if app.session.flashBag.peek('info')|length > 0 %}
+    {% include '_partials/_toast.html.twig' with { level: 'info', messages: app.flashes('info') } %}
+{% endif %}
@@ -0,0 +1 @@
+<svg class="{{ class }}"><use href="{{ asset('build/images/icons.svg') }}#icon-{{ icon }}"/></svg>
@@ -0,0 +1,14 @@
+{% extends 'knp_menu.html.twig' %}
+
+{% block label %}
+    {% apply spaceless %}
+        {% if item.extras.icon is defined %}
+            {{ icon(item.extras.icon, 'w-5 h-5') }}
+            {% if item.extras.icon_only is defined and false == item.extras.icon_only %}
+                <span class="flex-1">{{ item.label|raw }}</span>
+            {% endif %}
+        {% else %}
+            {{ item.label|raw }}
+        {% endif %}
+    {% endapply %}
+{% endblock %}
@@ -0,0 +1,18 @@
+<div id="mobilenav"
+     class="fixed z-50 top-0 left-0 inset-0 pr-16 bg-black/70 -translate-x-full"
+    {{ stimulus_controller('mobilenav', [], { 'closed': '-translate-x-full' }, { 'mobilenav': '#mobilenav' }) }}
+>
+    <div class="h-screen w-full bg-white">
+        <div class="flex justify-between px-8 pt-4">
+            <img src="{{ asset('build/images/logo.svg') }}" alt="" class="block w-auto h-8">
+            <button type="button"
+                    {{ stimulus_action('mobilenav', 'trigger', null, { 'mode': 'close' }) }}>
+                {{ icon('close', 'w-8 h-8') }}
+            </button>
+        </div>
+        <div class="w-full h-full p-8 pt-4 overflow-y-scroll">
+            {% set mobileMenu = knp_menu_get('main', [], { 'mobile': true }) %}
+            {{ knp_menu_render(mobileMenu, { 'firstClass': null, 'lastClass': null, 'ancestorClass': 'active', 'compressed': true }) }}
+        </div>
+    </div>
+</div>
@@ -0,0 +1,19 @@
+<div class="fixed top-0 left-0 inset-x-0 z-50 bg-white shadow-sm">
+    <div class="container px-8 py-4 flex items-center justify-between">
+        <a href="{{ path(app.user.defaultRoute) }}" title="Home">
+            <div class="flex items-center space-x-4">
+                <img src="{{ asset('build/images/logo.svg') }}" alt="" class="block w-auto h-8">
+            </div>
+        </a>
+        <nav class="hidden md:block font-medium">
+            {% set menu = knp_menu_get('main') %}
+            {{ knp_menu_render(menu, { 'firstClass': null, 'lastClass': null, 'ancestorClass': 'active', 'compressed': true }) }}
+        </nav>
+        <button type="button"
+                class="md:hidden"
+                {{ stimulus_controller('mobilenav', [], [], { 'mobilenav': '#mobilenav' }) }}
+                {{ stimulus_action('mobilenav', 'trigger', null, { 'mode': 'open' }) }}>
+            {{ icon('menu', 'w-8 h-8') }}
+        </button>
+    </div>
+</div>
@@ -0,0 +1,37 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg class="{{ class }}" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
+    <g fill="none" fill-rule="evenodd" stroke-width="2">
+        <circle cx="22" cy="22" r="1">
+            <animate attributeName="r"
+                     begin="0s" dur="1.8s"
+                     values="1; 20"
+                     calcMode="spline"
+                     keyTimes="0; 1"
+                     keySplines="0.165, 0.84, 0.44, 1"
+                     repeatCount="indefinite" />
+            <animate attributeName="stroke-opacity"
+                     begin="0s" dur="1.8s"
+                     values="1; 0"
+                     calcMode="spline"
+                     keyTimes="0; 1"
+                     keySplines="0.3, 0.61, 0.355, 1"
+                     repeatCount="indefinite" />
+        </circle>
+        <circle cx="22" cy="22" r="1">
+            <animate attributeName="r"
+                     begin="-0.9s" dur="1.8s"
+                     values="1; 20"
+                     calcMode="spline"
+                     keyTimes="0; 1"
+                     keySplines="0.165, 0.84, 0.44, 1"
+                     repeatCount="indefinite" />
+            <animate attributeName="stroke-opacity"
+                     begin="-0.9s" dur="1.8s"
+                     values="1; 0"
+                     calcMode="spline"
+                     keyTimes="0; 1"
+                     keySplines="0.3, 0.61, 0.355, 1"
+                     repeatCount="indefinite" />
+        </circle>
+    </g>
+</svg>
@@ -0,0 +1,10 @@
+{% apply spaceless %}
+    {% for message in messages %}
+        {% if message is iterable %}
+            {% set message = message.id | trans(message.parameters | default({}), message.domain | default(null), message.locale | default(null)) | raw %}
+        {% else %}
+            {% set message = message | trans | raw %}
+        {% endif %}
+        <div {{ stimulus_controller('toast', { 'text': message, 'class': 'toastify--' ~ level}) }}{{ qa_attribute('toast', level)}}></div>
+    {% endfor %}
+{% endapply %}
				`@@ -0,0 +1 @@`
				`<svg class="{{ class }}"><use href="{{ asset('build/images/icons.svg') }}#icon-{{ icon }}"/></svg>`