Adds edit cards and templates to include

13 files changed, 293 insertions, 182 deletions

diff --git a/templates/artwork/artwork_template.twig b/templates/artwork/artwork_template.twig
new file mode 100644
index 0000000..fe55f6a
--- /dev/null
+++ b/templates/artwork/artwork_template.twig
@@ -0,0 +1,54 @@
+{% if artworkSettings.isPreview == true %}
+  <div class="content">
+    {% if artworkSettings.artworkHeader != "" %}
+    <h4>{{ artworkSettings.artworkHeader }}</h4>
+    {% endif %}
+
+    <div class="row">
+      <div class="column column-5">
+        {% if artworkSettings.isVotable == true %}
+          <!--TODO: vote artworks-->
+          <button class="vote"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></button>
+          {{ artwork.getVotesTotal() }}
+          <button class="vote"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i></button>
+        {% endif %}
+      </div>
+      <div class="column column-95">
+        <div>
+          <img class="image" src='{{ artwork.path }}'>
+        </div>
+        <div>
+          <button onclick="location.href='/card/{{ card.id }}/artwork/{{ artwork.id }}'">View Artwork</button>
+        </div>
+      </div>
+    </div>
+  </div>
+{% else %}
+  <section id="artwork" class="content">
+    <h3>Artwork</h3>
+  </section>
+
+  <div class="content">
+    <!-- TODO: what is there to edit? or just remove? and add new? -->
+    <button onclick="location.href='/card/{{ card.id }}'">Goto Card</button>
+    <button>Remove Artwork</button>
+  </div>
+
+  <div class="content">
+    <div class="row">
+      <div class="column column-5">
+        {% if artworkSettings.isVotable == true %}
+          <!--TODO: vote artworks-->
+          <button class="vote"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></button>
+          {{ artwork.getVotesTotal() }}
+          <button class="vote"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i></button>
+        {% endif %}
+      </div>
+      <div class="column column-95">
+        <div>
+          <img class="image" src='{{ artwork.path }}'>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endif %}
diff --git a/templates/artwork/artwork_view.twig b/templates/artwork/artwork_view.twig
new file mode 100644
index 0000000..3eb1c65
--- /dev/null
+++ b/templates/artwork/artwork_view.twig
@@ -0,0 +1,10 @@
+{% extends 'card/card.twig' %}
+
+{% block pagecontent %}
+  {% set artworkSettings = {
+    "artworkHeader": "",
+    "isPreview": false,
+    "isVotable": true
+  } %}
+  {{ include('artwork/artwork_template.twig') }}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/base.twig b/templates/base.twig
index 758b6f8..825c09c 100644
--- a/templates/base.twig
+++ b/templates/base.twig
@@ -4,21 +4,37 @@
   {{ parent() }}
   <!-- SimpleCSS -->
   <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
+  <!-- Fork Awesome Icons -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
+  <!-- Splide -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
 
+  <!-- override -->
   <link rel="stylesheet" href="/css/style.css"/>
+{% endblock %}
 
-  <!-- Fork Awesome Icons -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
+{% block js %}
+  {{ parent() }}
+  <!-- Splide -->
+  <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
+  <script src="/js/splides.js"></script>
+
+  <!-- nav -->
+  <script src="/js/nav_highlight.js"></script>
 {% endblock %}
 
 {% block body %}
   <header>
     <nav>
       <a href="/dashboard">Dashboard</a>
-      <a href="/card/list">Cards</a>
-      <a href="/events/list">Events</a>
-      <a href="/news/list">News</a>
-      <a href="https://gitlab.com/DRogueRonin/elements">Gitlab</a>
+      <a href="/card">Cards</a>
+      <!--
+      <a href="/events">Events</a>
+      -->
+      <!--
+      <a href="/news">News</a>
+      -->
+      <a href="https://gitlab.com/DRogueRonin/elements" target="_blank">Gitlab</a>
     </nav>
     <h1>Elements</h1>
     <p>{% block subtitle %}{% endblock %}</p>
@@ -27,6 +43,6 @@
     {% block main %}{% endblock %}
   </main>
   <footer>
-    visit <a href="https://gitlab.com/DRogueRonin/elements">Gitlab</a>
+    visit <a href="https://gitlab.com/DRogueRonin/elements" target="_blank">Gitlab</a>
   </footer>
 {% endblock %}
diff --git a/templates/card/card.twig b/templates/card/card.twig
index fcf6bd0..211f6e3 100644
--- a/templates/card/card.twig
+++ b/templates/card/card.twig
@@ -4,13 +4,14 @@
   Cards
 {% endblock %}
 {% block main %}
-  <div class="content content-header">
-    <button onclick="location.href='/card/list'">Overview</button>
+  <section class="content">
+    <button onclick="location.href='/card'">Overview</button>
+    <!--
+    TODO
+    <button onclick="location.href='/card/{{ cardOfTheDay.id }}'">Card Of The Day</button>
+    -->
     <button onclick="location.href='/card/add'">New Card</button>
-  </div>
-  <div class="content content-header">
-    <h3>{% block pagetitle %}{% endblock %}</h3>
-  </div>
+  </section>
 
   <div style="align-content: center;">
     {% block pagecontent %}{% endblock %}
diff --git a/templates/card/card_add.twig b/templates/card/card_add.twig
index db91fc4..0a90aea 100644
--- a/templates/card/card_add.twig
+++ b/templates/card/card_add.twig
@@ -1,47 +1,24 @@
 {% extends 'card/card.twig' %}
 
 {% block pagetitle %}
-  Edit Card
+  Add Card
 {% endblock %}
 {% block pagecontent %}
   <div class="content">
-    <form action="/card/{{ card.id }}/edit" method="post" enctype="multipart/form-data">
-      {% for meta in card.meta %}
+    <form action="/card/add" method="post" enctype="multipart/form-data">
+      {% for key, field in fields %}
         <p>
-          <label>{{ meta.key }}</label><br>
-          <input type="text" name="{{ meta.key }}" value="{{ meta.value }}">
+          <label>{{ key }}</label><br>
+          <input type="text" name="meta[{{ field }}]">
         </p>
       {% endfor %}
 
-      <input type="submit" value="Save">
+      <!-- TODO: add artworks when adding a card? -->
+      <h4>Artworks</h4>
+      <input type="file" name="images[]" multiple>
+
+      <input type="submit" value="Add">
     </form>
   </div>
 {% endblock %}
 
-{% block pagetitle %}
-  Add Card
-{% endblock %}
-{% block pagecontent %}
-  <form action="/card/add" method="post" enctype="multipart/form-data">
-    {% for key, field in fields %}
-      <p>
-        <label>{{ key }}</label><br>
-        <input type="text" name="{{ field }}">
-      </p>
-    {% endfor %}
-
-    <!--
-    {% for meta in card.meta %}
-      <p>
-        <label>{{ meta.key }}</label><br>
-        <input type="text" name="{{ meta.key }}" value="{{ meta.value }}" disabled>
-      </p>
-    {% endfor %}
-    -->
-
-    <h4>Artworks</h4>
-    <input type="file" name="images[]" multiple>
-
-    <input type="submit" value="Add">
-  </form>
-{% endblock %}
diff --git a/templates/card/card_display.twig b/templates/card/card_display.twig
deleted file mode 100644
index 7b2ed3e..0000000
--- a/templates/card/card_display.twig
+++ /dev/null
@@ -1,48 +0,0 @@
-{% extends 'card/card.twig' %}
-
-{% block pagetitle %}
-  Show Card
-{% endblock %}
-{% block pagecontent %}
-  <div class="content">
-    <button onclick="location.href='/card/{{ card.id }}/edit'">Edit</button>
-  </div>
-
-  <div class="content">
-    <div class="row">
-      <div class="column column-5">
-        <button class="vote"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></button>
-        {{ card.getVotesTotal() }}
-        <button class="vote"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i></button>
-      </div>
-      <div class="column column-95">
-        {% for meta in card.meta %}
-          <p>
-            <label>{{ meta.key }}</label><br>
-            <input type="text" name="{{ meta.key }}" value="{{ meta.value }}" disabled>
-          </p>
-        {% endfor %}
-      </div>
-    </div>
-  </div>
-
-  <div class="content content-header">
-    <h3>Artworks</h3>
-  </div>
-
-  {% for artwork in card.artworks %}
-  <div class="content">
-    <div class="row">
-      <div class="column column-5">
-        <button class="vote"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></button>
-        {{ artwork.getVotesTotal() }}
-        <button class="vote"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i></button>
-      </div>
-      <div class="column column-95">
-        <img class="image" src='{{ artwork.path }}'>
-        <button onclick="location.href='/artwork/{{ artwork.id }}'">Show</button>
-      </div>
-    </div>
-  </div>
-  {% endfor %}
-{% endblock %}
diff --git a/templates/card/card_edit.twig b/templates/card/card_edit.twig
index b066437..4d13efa 100644
--- a/templates/card/card_edit.twig
+++ b/templates/card/card_edit.twig
@@ -1,36 +1,24 @@
 {% extends 'card/card.twig' %}
 
-{% block pagetitle %}
-  Edit Card
-{% endblock %}
 {% block pagecontent %}
+  <section class="content">
+    <h3>Edit Card</h3>
+  </section>
+
+  <div class="content">
+    <button onclick="location.href='/card/{{ card.id }}'">Goto Card</button>
+  </div>
+
   <div class="content">
     <form action="/card/{{ card.id }}/edit" method="post" enctype="multipart/form-data">
       {% for meta in card.meta %}
         <p>
           <label>{{ meta.key }}</label><br>
-          <input type="text" name="{{ meta.key }}" value="{{ meta.value }}">
+          <input type="text" name="meta[{{ meta.key }}]" value="{{ meta.value }}">
         </p>
       {% endfor %}
 
       <input type="submit" value="Save">
     </form>
   </div>
-
-  <div class="content content-header">
-    <h3>Edit Artworks</h3>
-  </div>
-
-  <div class="content">
-    <button>Add Artwork</button>
-  </div>
-
-  {% for artwork in card.artworks %}
-    <div class="content">
-      <img class="image" src='{{ artwork.path }}'>
-      <button onclick="location.href='/artwork/{{ artwork.id }}/edit'">Edit</button>
-      <button>Remove</button>
-    </div>
-  {% endfor %}
-
 {% endblock %}
\ No newline at end of file
diff --git a/templates/card/card_list.twig b/templates/card/card_list.twig
index b6d8bbe..a233df9 100644
--- a/templates/card/card_list.twig
+++ b/templates/card/card_list.twig
@@ -1,38 +1,17 @@
 {% extends 'card/card.twig' %}
 
-{% block pagetitle %}
-List
-{% endblock %}
 {% block pagecontent %}
+  <section class="content">
+    <h3>Cards</h3>
+  </section>
+
   {% for card in cards %}
-    <div class="content">
-      <div class="row">
-        <div class="column column-5">
-          <button class="vote"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></button>
-          {{ card.getVotesTotal() }}
-          <button class="vote"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i></button>
-        </div>
-        <div class="column column-95">
-          <table>
-            <thead>
-              <tr>
-                {% for meta in card.getAllMeta() %}
-                  <th>{{ meta.key }}</th>
-                {% endfor %}
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                {% for meta in card.getAllMeta() %}
-                  <td>{{ meta.value }}</td>
-                {% endfor %}
-              </tr>
-            </tbody>
-          </table>
-          <button onclick="location.href='/card/{{ card.id }}'">Card</button>
-          <button onclick="location.href='/card/{{ card.id }}/artworks'">Artworks</button>
-        </div>
-      </div>
-    </div>
+    {% set cardSettings = {
+      "cardHeader": "",
+      "isPreview": true,
+      "isVotable": true,
+      "showArtworks": true
+    } %}
+    {{ include('card/card_template.twig') }}
   {% endfor %}
 {% endblock %}
diff --git a/templates/card/card_meta_template.twig b/templates/card/card_meta_template.twig
new file mode 100644
index 0000000..d57cdd8
--- /dev/null
+++ b/templates/card/card_meta_template.twig
@@ -0,0 +1,21 @@
+<div class="row">
+  <div class="column column-5">
+    <form action="/card/{{ card.id }}/vote" method="post" enctype="multipart/form-data">
+      <input type="hidden" name="value" value="1">
+      <button type="submit" class="vote"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></button>
+    </form>
+    {{ card.getVotesTotal() }}
+    <form action="/card/{{ card.id }}/vote" method="post" enctype="multipart/form-data">
+      <input type="hidden" name="value" value="-1">
+      <button type="submit" class="vote"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i></button>
+    </form>
+  </div>
+  <div class="column column-95">
+    {% for meta in card.meta %}
+      <p>
+        <label>{{ meta.key }}</label><br>
+        <input type="text" name="{{ meta.key }}" value="{{ meta.value }}" disabled>
+      </p>
+    {% endfor %}
+  </div>
+</div>
\ No newline at end of file
diff --git a/templates/card/card_template.twig b/templates/card/card_template.twig
new file mode 100644
index 0000000..411ec2f
--- /dev/null
+++ b/templates/card/card_template.twig
@@ -0,0 +1,103 @@
+{% if cardSettings.isPreview == true %}
+  <div class="content">
+    {% if cardSettings.cardHeader != "" %}
+      <h4>{{ cardSettings.cardHeader }}</h4>
+    {% endif %}
+
+    <div class="row">
+      <div class="column column-5">
+        {% if cardSettings.isVotable == true %}
+          <form action="/card/{{ card.id }}/vote" method="post" enctype="multipart/form-data">
+            <input type="hidden" name="value" value="1">
+            <button type="submit" class="vote"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></button>
+          </form>
+          {{ card.getVotesTotal() }}
+          <form action="/card/{{ card.id }}/vote" method="post" enctype="multipart/form-data">
+            <input type="hidden" name="value" value="-1">
+            <button type="submit" class="vote"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i></button>
+          </form>
+        {% endif %}
+      </div>
+      <div class="column column-95">
+        {% for meta in card.meta %}
+          <p>
+            <label>{{ meta.key }}</label><br>
+            <input type="text" name="{{ meta.key }}" value="{{ meta.value }}" disabled>
+          </p>
+        {% endfor %}
+
+        {% if cardSettings.showArtworks == true %}
+          {% if card.artworks|length > 0 %}
+            <div class="splide">
+              <div class="splide__track">
+                <ul class="splide__list">
+                  {% for artwork in card.artworks %}
+                    <li class="splide__slide">
+                      <img class="image" src='{{ artwork.path }}'>
+                    </li>
+                  {% endfor %}
+                </ul>
+              </div>
+            </div>
+          {% endif %}
+        {% endif %}
+
+        <button onclick="location.href='/card/{{ card.id }}'">View Card</button>
+      </div>
+    </div>
+  </div>
+{% else %}
+  <section id="card" class="content">
+    <h3>Card</h3>
+  </section>
+
+  <div class="content">
+    <button onclick="location.href='/card/{{ card.id }}/edit'">Edit Card</button>
+  </div>
+
+  <div class="content">
+    <div class="row">
+      <div class="column column-5">
+        {% if cardSettings.isVotable == true %}
+          <form action="/card/{{ card.id }}/vote" method="post" enctype="multipart/form-data">
+            <input type="hidden" name="value" value="1">
+            <button type="submit" class="vote"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></button>
+          </form>
+          {{ card.getVotesTotal() }}
+          <form action="/card/{{ card.id }}/vote" method="post" enctype="multipart/form-data">
+            <input type="hidden" name="value" value="-1">
+            <button type="submit" class="vote"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i></button>
+          </form>
+        {% endif %}
+      </div>
+      <div class="column column-95">
+        {% for meta in card.meta %}
+          <p>
+            <label>{{ meta.key }}</label><br>
+            <input type="text" name="{{ meta.key }}" value="{{ meta.value }}" disabled>
+          </p>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+
+  {% if cardSettings.showArtworks == true %}
+    <section id="artworks" class="content">
+      <h3>Artworks</h3>
+    </section>
+
+    <div class="content">
+      <!-- TODO -->
+      <button>Add Artwork</button>
+    </div>
+
+    {% for artwork in card.artworks %}
+      {% set artworkSettings = {
+        "artworkHeader": "",
+        "isPreview": true,
+        "isVotable": true
+      } %}
+      {{ include('artwork/artwork_template.twig') }}
+    {% endfor %}
+  {% endif %}
+{% endif %}
diff --git a/templates/card/card_view.twig b/templates/card/card_view.twig
new file mode 100644
index 0000000..3b84b26
--- /dev/null
+++ b/templates/card/card_view.twig
@@ -0,0 +1,11 @@
+{% extends 'card/card.twig' %}
+
+{% block pagecontent %}
+  {% set cardSettings = {
+    "cardHeader": "",
+    "isPreview": false,
+    "isVotable": true,
+    "showArtworks": true
+  } %}
+  {{ include('card/card_template.twig') }}
+{% endblock %}
diff --git a/templates/dashboard.twig b/templates/dashboard.twig
index 97534bf..0e10193 100644
--- a/templates/dashboard.twig
+++ b/templates/dashboard.twig
@@ -4,39 +4,41 @@
   Dashboard
 {% endblock %}
 {% block main %}
-  <div class="content content-header">
+  <section class="content">
     <h3>Hello World</h3>
-  </div>
-  <div class="content content-header">
+  </section>
+
+  <section class="content">
     <h3>Cards</h3>
-  </div>
-  <div class="content">
-    <h4>Card of the day</h4>
-    <div class="row">
-      <div class="column column-5">
-        <button class="vote"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></button>
-        {{ cardOfTheDay.getVotesTotal() }}
-        <button class="vote"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i></button>
-      </div>
-      <div class="column column-95">
-        {% for meta in cardOfTheDay.meta %}
-          <p>
-            <label>{{ meta.key }}</label><br>
-            <input type="text" name="{{ meta.key }}" value="{{ meta.value }}" disabled>
-          </p>
-        {% endfor %}
-      </div>
-      <button onclick="location.href='/card/{{ cardOfTheDay.id }}'">Card</button>
-      <button onclick="location.href='/card/{{ cardOfTheDay.id }}/artworks'">Artworks</button>
-    </div>
-  </div>
+  </section>
+
+  {% set card = cardOfTheDay %}
+  {% set cardSettings = {
+    "cardHeader": "Card Of The Day",
+    "isPreview": true,
+    "isVotable": true,
+    "showArtworks": true
+  } %}
+  {{ include('card/card_template.twig') }}
+
+  <!--
+  TODO
   <div class="content">
     <h4>Updates to my cards</h4>
   </div>
-  <div class="content content-header">
+  -->
+
+  <!--
+  TODO
+  <section class="content">
     <h3>Events</h3>
-  </div>
-  <div class="content content-header">
+  </section>
+  -->
+
+  <!--
+  TODO
+  <section class="content">
     <h3>News</h3>
-  </div>
+  </section>
+  -->
 {% endblock %}
diff --git a/templates/root.twig b/templates/root.twig
index 9c3534e..8be64dd 100644
--- a/templates/root.twig
+++ b/templates/root.twig
@@ -1,14 +1,11 @@
-<html>
+<html>  <link rel="/favicon.ico" href="#">
+
 <head>
   <title>Elements</title>
-
   {% block css %}{% endblock %}
 </head>
 <body>
-{% block body %}{% endblock %}
-<script>
-
-</script>
-{% block js %}{% endblock %}
+  {% block body %}{% endblock %}
+  {% block js %}{% endblock %}
 </body>
 </html>
\ No newline at end of file