From 04fe35c82295b645039b597a44326f66262679d7 Mon Sep 17 00:00:00 2001
From: Igor Scheller <igor.scheller@igorshp.de>
Date: Fri, 24 Apr 2020 18:08:09 +0200
Subject: [PATCH] Added /design path to show template elements

---
 config/routes.php                             |   3 +
 resources/assets/themes/base.less             |   8 +-
 resources/views/macros/form.twig              |  12 +-
 resources/views/pages/design.twig             | 226 ++++++++++++++++++
 src/Controllers/DesignController.php          |  54 +++++
 .../Unit/Controllers/DesignControllerTest.php |  30 +++
 6 files changed, 329 insertions(+), 4 deletions(-)
 create mode 100644 resources/views/pages/design.twig
 create mode 100644 src/Controllers/DesignController.php
 create mode 100644 tests/Unit/Controllers/DesignControllerTest.php

diff --git a/config/routes.php b/config/routes.php
index f4c6c183..7cc2823d 100644
--- a/config/routes.php
+++ b/config/routes.php
@@ -32,6 +32,9 @@ $route->post('/news/{id:\d+}', 'NewsController@comment');
 // API
 $route->get('/api[/{resource:.+}]', 'ApiController@index');
 
+// Design
+$route->get('/design', 'DesignController@index');
+
 // Administration
 $route->addGroup(
     '/admin',
diff --git a/resources/assets/themes/base.less b/resources/assets/themes/base.less
index da505685..d0751180 100644
--- a/resources/assets/themes/base.less
+++ b/resources/assets/themes/base.less
@@ -217,6 +217,12 @@ table a > .icon-icon_angel {
   text-align: right;
 }
 
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+  code {
+    background-color: inherit;
+  }
+}
+
 .messages {
   &:focus {
     outline: none;
@@ -387,7 +393,7 @@ table a > .icon-icon_angel {
       left: 10%;
       display: block;
       overflow-y: auto;
-      box-shadow: -5px 20px 20px 0px rgba(0, 0, 0, 0.5), 5px 0 5px -5px rgba(0, 0, 0, 0.5);
+      box-shadow: -5px 20px 20px 0 rgba(0, 0, 0, 0.5), 5px 0 5px -5px rgba(0, 0, 0, 0.5);
     }
 
     // Hide current page in nav.
diff --git a/resources/views/macros/form.twig b/resources/views/macros/form.twig
index 8965e92a..66780db8 100644
--- a/resources/views/macros/form.twig
+++ b/resources/views/macros/form.twig
@@ -7,7 +7,13 @@
                id="{{ name }}" name="{{ name }}"
                value="{{ opt.value|default('') }}"
                 {%- if opt.required|default(false) %}
-                    required="required"
+                    required
+                {%- endif -%}
+                {%- if opt.disabled|default(false) %}
+                    disabled
+                {%- endif -%}
+                {%- if opt.readonly|default(false) %}
+                    readonly
                 {%- endif -%}
         >
     </div>
@@ -20,7 +26,7 @@
         {%- endif %}
         <textarea class="form-control" id="{{ name }}" name="{{ name }}"
                 {%- if opt.required|default(false) %}
-                    required="required"
+                    required
                 {%- endif -%}
                 {%- if opt.rows|default(0) %}
                     rows="{{ opt.rows }}"
@@ -46,7 +52,7 @@
     <div class="checkbox">
         <label>
             <input type="checkbox" id="{{ name }}" name="{{ name }}" value="{{ value|default('1') }}"
-                    {%- if checked|default(false) %} checked="checked"{% endif %}>
+                    {%- if checked|default(false) %} checked{% endif %}>
             {{ label }}
         </label>
     </div>
diff --git a/resources/views/pages/design.twig b/resources/views/pages/design.twig
new file mode 100644
index 00000000..105b78bb
--- /dev/null
+++ b/resources/views/pages/design.twig
@@ -0,0 +1,226 @@
+{% extends "layouts/app.twig" %}
+{% import 'macros/base.twig' as m %}
+{% import 'macros/form.twig' as f %}
+
+{% block title %}{{ __('Design') }}{% endblock %}
+
+{% set colors=['success', 'info', 'warning', 'danger'] %}
+{% set types=['default', 'primary', 'success', 'info', 'warning', 'danger'] %}
+{% set types_buttons=types|merge(['link']) %}
+{% set lipsum='Lorem ipsum dolor sit amet, consectetur adipisici elit…' %}
+{% set linksum='Lorem ipsum dolor <a href="#">link</a> amet, consectetur adipisici elit!' %}
+
+{% block content %}
+    <div class="container">
+        <h1>{{ block('title') }}</h1>
+
+
+        <h2>Elements</h2>
+        <div class="row">
+            <div class="col-md-6">
+                <h3>Headings</h3>
+                <h4>H4</h4>
+                <h5>H5</h5>
+                <h6>H6</h6>
+            </div>
+            <div class="col-md-6">
+                <h3>Tables</h3>
+                <table class="table table-striped">
+                    <tr>
+                        <th>Header 1</th>
+                        <th>Header 2</th>
+                        <th>Header 3</th>
+                    </tr>
+                    <tr>
+                        <td>Table content</td>
+                        <td>{{ lipsum }}</td>
+                        <td><span class="text-success">{{ m.glyphicon('ok') }}</span></td>
+                    </tr>
+                    <tr>
+                        <td>Another content</td>
+                        <td></td>
+                        <td><span class="text-danger">{{ m.glyphicon('remove') }}</span></td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12">
+                <h3>Texts</h3>
+                <p>
+                    {{ linksum|raw }}<br>
+                    {{ lipsum }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum }}
+                </p>
+
+                <div class="row">
+                    {% for color in types %}
+                        <div class="col-md-3">
+                            <p class="text-{{ color }}">{{ color|capitalize }}: {{ linksum|raw }}</p>
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-6">
+                <h3>Labels</h3>
+                <p>
+                    {% for type in types %}
+                        <span class="label label-{{ type }}">{{ type|capitalize }}</span>
+                    {% endfor %}
+                </p>
+            </div>
+            <div class="col-md-6">
+                <h3>Buttons</h3>
+                <p>
+                    {% for type in types_buttons %}
+                        {{ f.button(type|capitalize, {'btn_type': type, 'name': 'button-' ~ type}) }}
+                    {% endfor %}
+                </p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12">
+                <h3>Alerts</h3>
+
+                <div class="row">
+                    {% for color in colors %}
+                        <div class="col-md-3">
+                            <h4>{{ color|capitalize }}</h4>
+                            {{ m.alert(lipsum, color) }}
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12">
+                <h3>Forms</h3>
+
+                <div class="row">
+                    <div class="col-md-2">
+                        {{ f.input('form-input-text', 'Text', 'text', {'value': 'Value'}) }}
+                    </div>
+                    <div class="col-md-2">
+                        {{ f.input('form-input-text-disabled', 'Disabled', 'text', {'disabled': true, 'value': 'Value'}) }}
+                    </div>
+                    <div class="col-md-2">
+                        {{ f.input('form-input-text-readonly', 'Readonly', 'text', {'readonly': true, 'value': 'Value'}) }}
+                    </div>
+                    <div class="col-md-2">
+                        {{ f.input('form-input-password', 'Password', 'password', {'value': 'Value'}) }}
+                    </div>
+                    <div class="col-md-2">
+                        {{ f.input('form-input-number', 'Number', 'number', {'value': 42}) }}
+                    </div>
+                    <div class="col-md-2">
+                        {{ f.textarea('form-input-textarea', 'Textarea', {'rows': 2, 'value': lipsum}) }}
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-md-2">
+                        {{ f.select('form-input-select', {'lorem': 'Ipsum', 'dolor': 'Sit'}, 'Select', 'dolor') }}
+                    </div>
+                    <div class="col-md-2">
+                        Button<br>
+                        {{ f.button('Button', {'btn_type': 'default'}) }}
+                    </div>
+                    <div class="col-md-2">
+                        Submit button<br>
+                        {{ f.submit() }}
+                    </div>
+                    <div class="col-md-2">
+                        Checkbox<br>
+                        {{ f.checkbox('form-input-checkbox', 'Checkbox', true) }}
+                        {{ f.checkbox('form-input-checkbox-2', 'Checkbox 2') }}
+                    </div>
+                    <div class="col-md-2 checkbox-inline">
+                        Radio<br>
+                        <label>
+                            <input type="radio" checked="checked" name="form-input-radio" value="1"> Yey
+                        </label>
+                        <label>
+                            <input type="radio" name="form-input-radio"> Nay
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <h2>Macros</h2>
+        <h3>base.twig</h3>
+        <div class="row">
+            <div class="col-md-3">
+                <h4><code>angel()</code></h4>
+                <p>{{ m.angel() }}</p>
+            </div>
+            <div class="col-md-3">
+                <h4><code>glyphicon(glyph)</code></h4>
+                <p>{{ m.glyphicon('star') }}</p>
+            </div>
+            <div class="col-md-3">
+                <h4><code>alert(message, type)</code></h4>
+                <p>{{ m.alert('Test content', 'info') }}</p>
+            </div>
+            <div class="col-md-3">
+                <h4><code>user(user)</code></h4>
+                <p>{{ m.user(demo_user) }}<br>{{ m.user(demo_user_2) }}</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-3">
+                <h4><code>button(label, url, type, size)</code></h4>
+                <p>{{ m.button('Label', '#', 'info', 'sm') }}</p>
+            </div>
+        </div>
+
+        <h3>form.twig</h3>
+        <div class="row">
+            <div class="col-md-3">
+                <h4><code>input(name, label, type, opt)</code></h4>
+                <p>{{ f.input('input-name', 'Label', 'text', {'required': true, 'value': 'Value'}) }}</p>
+            </div>
+
+            <div class="col-md-3">
+                <h4><code>textarea(name, label, opt)</code></h4>
+                <p>{{ f.textarea('textarea-name', 'Label', {'required': true, 'rows': 2, 'value': lipsum}) }}</p>
+            </div>
+
+            <div class="col-md-3">
+                <h4><code>select(name, data, label, selected)</code></h4>
+                <p>{{ f.select('select-name', {'foo': 'Foo', 'bar': 'Bar'}, 'Label', 'bar') }}</p>
+            </div>
+
+            <div class="col-md-3">
+                <h4><code>checkbox(name, label, checked, value)</code></h4>
+                <p>
+                    {{ f.checkbox('checkbox-name', 'Label', false) }}<br>
+                    {{ f.checkbox('checkbox-name', 'Label', true, 'on') }}
+                </p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-3">
+                <h4><code>hidden(name, value)</code></h4>
+                <p>
+                    {{ f.hidden('hidden-name', 'hidden value') | escape }}
+                </p>
+            </div>
+
+            <div class="col-md-3">
+                <h4><code>button(label, opt)</code></h4>
+                <p>
+                    {{ f.button('Label', {'btn_type': 'default', 'name': 'button-name', 'value': 'buton-value'}) }}
+                </p>
+            </div>
+
+            <div class="col-md-3">
+                <h4><code>submit(label, opt)</code></h4>
+                <p>
+                    {{ f.submit() }}
+                </p>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/src/Controllers/DesignController.php b/src/Controllers/DesignController.php
new file mode 100644
index 00000000..55c064f8
--- /dev/null
+++ b/src/Controllers/DesignController.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace Engelsystem\Controllers;
+
+use Engelsystem\Http\Response;
+use Engelsystem\Models\User\State;
+use Engelsystem\Models\User\User;
+
+class DesignController extends BaseController
+{
+    /** @var Response */
+    protected $response;
+
+    /**
+     * @param Response $response
+     */
+    public function __construct(Response $response)
+    {
+        $this->response = $response;
+    }
+
+    /**
+     * Show the design overview page
+     *
+     * @return Response
+     */
+    public function index()
+    {
+        $demoUser = (new User())->forceFill([
+            'id' => 42,
+            'name' => 'test',
+        ]);
+        $demoUser->__set('state', (new State())->forceFill([
+            'user_id' => 42,
+            'arrived' => true,
+        ]));
+        $demoUser2 = (new User())->forceFill([
+            'id' => 1337,
+            'name' => 'test2',
+        ]);
+        $demoUser2->__set('state', (new State())->forceFill([
+            'user_id' => 1337,
+            'arrived' => false,
+        ]));
+
+        return $this->response->withView(
+            'pages/design',
+            [
+                'demo_user' => $demoUser,
+                'demo_user_2' => $demoUser2,
+            ]
+        );
+    }
+}
diff --git a/tests/Unit/Controllers/DesignControllerTest.php b/tests/Unit/Controllers/DesignControllerTest.php
new file mode 100644
index 00000000..f1b26d07
--- /dev/null
+++ b/tests/Unit/Controllers/DesignControllerTest.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Engelsystem\Test\Unit\Controllers;
+
+use Engelsystem\Controllers\DesignController;
+use Engelsystem\Http\Response;
+use Engelsystem\Test\Unit\TestCase;
+use PHPUnit\Framework\MockObject\MockObject;
+
+class DesignControllerTest extends TestCase
+{
+    /**
+     * @covers \Engelsystem\Controllers\DesignController::__construct
+     * @covers \Engelsystem\Controllers\DesignController::index
+     */
+    public function testIndex()
+    {
+        /** @var Response|MockObject $response */
+        $response = $this->createMock(Response::class);
+        $response->expects($this->once())
+            ->method('withView')
+            ->with('pages/design')
+            ->willReturn($response);
+
+        $controller = new DesignController($response);
+        $return = $controller->index();
+
+        $this->assertEquals($response, $return);
+    }
+}