From a0c3df96f3eb9bca83ac379e46c8b61dbac66ac8 Mon Sep 17 00:00:00 2001
From: tastytea <tastytea@tastytea.de>
Date: Thu, 21 Jan 2021 06:37:55 +0100
Subject: [PATCH 1/4] Auto-complete tags.

Read tags from tags.lst and offer them as auto-completions. Use one text
field per tag and use a button to add new fields.
---
 index.php | 41 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/index.php b/index.php
index 8075803..afbc3f0 100644
--- a/index.php
+++ b/index.php
@@ -31,7 +31,7 @@
       {
         padding: 0;
       }
-      input[type=file]
+      input[type=file], input[list=list_tags]
       {
         margin-left: 10ch;
       }
@@ -198,15 +198,15 @@
       don't want trust to be necessary to use this list.
     </p>
 
-    <form method="post" action="/add" enctype="multipart/form-data">
+    <form method="post" action="/add" enctype="multipart/form-data" id="form_add">
       <label for="instance">Instance:</label>
       <input type="text" id="instance" name="instance" placeholder="example.com" required>
       <span class="hint">(Without the “https://”)</span>
       <br>
 
-      <label for="tags">Tags:</label>
-      <input type="text" id="tags" name="tags" placeholder="tag1,tag2" autocomplete="on" required>
-      <!-- <input type="button" id="add_tag" value="➕" disabled> -->
+      <label for="tags">Tags:</label><span class="hint">(One tag per field or comma separated)</span><br>
+      <input type="text" list="list_tags" id="tags" name="tags[]" required>
+      <input type="button" id="add_tag" value="➕" onclick="javascript:add_input_tag();">
       <br>
 
       <label for="receipts">Receipts:</label>
@@ -261,5 +261,36 @@
       <a href="https://schlomp.space/FediBlock">Sourcecode</a> licensed under the
       <a href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0-only</a>.
     </p>
+
+    <script>
+     function add_input_tag()
+     {
+         const input_text = document.createElement("input");
+         input_text.setAttribute("type", "text");
+         input_text.setAttribute("list", "list_tags");
+         input_text.setAttribute("name", "tags[]");
+
+         const form = document.getElementById("form_add");
+         const btn = document.getElementById("add_tag");
+         form.insertBefore(document.createElement("br"), btn);
+         form.insertBefore(input_text, btn);
+         input_text.focus();
+     }
+    </script>
+
+    <datalist id="list_tags">
+      <?php
+      $file = fopen("tags.lst", "r") or die("Unable to open autocompletion file.");
+      while(!feof($file))
+      {
+          $tag = rtrim(fgets($file));
+          if ($tag != "")
+          {
+              printf("<option value=\"%s\">\n", $tag);
+          }
+      }
+      fclose($file);
+      ?>
+    </datalist>
   </body>
 </html>

From fd1690d45c7b59b5c5de6dd8382541bf4bb10a27 Mon Sep 17 00:00:00 2001
From: tastytea <tastytea@tastytea.de>
Date: Thu, 21 Jan 2021 06:49:33 +0100
Subject: [PATCH 2/4] Use one field per receipt.

Add fields with button.
---
 index.php | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/index.php b/index.php
index afbc3f0..3931567 100644
--- a/index.php
+++ b/index.php
@@ -31,7 +31,7 @@
       {
         padding: 0;
       }
-      input[type=file], input[list=list_tags]
+      input[type=file], input[list=list_tags], input[type=url]
       {
         margin-left: 10ch;
       }
@@ -209,10 +209,9 @@
       <input type="button" id="add_tag" value="➕" onclick="javascript:add_input_tag();">
       <br>
 
-      <label for="receipts">Receipts:</label>
-      <input type="url" id="receipts" name="receipts"
-        placeholder="https://example.com/@user/1234567890,https://example.com/about/more" required>
-      <!-- <input type="button" id="add_receipt" value="➕" disabled> -->
+      <label for="receipts">Receipts:</label><span class="hint">(One receipt per field or comma separated)</span><br>
+      <input type="url" id="receipts" name="receipts[]"  required>
+      <input type="button" id="add_receipt" value="➕" onclick="javascript:add_input_receipt();">
       <br>
 
       <label for="screenshot1">Screenshots:</label><span class="hint">(optional)</span>
@@ -276,6 +275,19 @@
          form.insertBefore(input_text, btn);
          input_text.focus();
      }
+
+     function add_input_receipt()
+     {
+         const input_text = document.createElement("input");
+         input_text.setAttribute("type", "url");
+         input_text.setAttribute("name", "receipts[]");
+
+         const form = document.getElementById("form_add");
+         const btn = document.getElementById("add_receipt");
+         form.insertBefore(document.createElement("br"), btn);
+         form.insertBefore(input_text, btn);
+         input_text.focus();
+     }
     </script>
 
     <datalist id="list_tags">

From 55ea37eb9b76b36d7a5105898c49086fcbd5a4ba Mon Sep 17 00:00:00 2001
From: tastytea <tastytea@tastytea.de>
Date: Thu, 21 Jan 2021 21:36:55 +0100
Subject: [PATCH 3/4] Add titles to buttons.

The titles will show up as tool tips and I guess screen readers make use
of them.
---
 index.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.php b/index.php
index 3931567..bcf3043 100644
--- a/index.php
+++ b/index.php
@@ -206,12 +206,12 @@
 
       <label for="tags">Tags:</label><span class="hint">(One tag per field or comma separated)</span><br>
       <input type="text" list="list_tags" id="tags" name="tags[]" required>
-      <input type="button" id="add_tag" value="➕" onclick="javascript:add_input_tag();">
+      <input type="button" id="add_tag" value="➕" title="Add tag" onclick="javascript:add_input_tag();">
       <br>
 
       <label for="receipts">Receipts:</label><span class="hint">(One receipt per field or comma separated)</span><br>
       <input type="url" id="receipts" name="receipts[]"  required>
-      <input type="button" id="add_receipt" value="➕" onclick="javascript:add_input_receipt();">
+      <input type="button" id="add_receipt" value="➕" title="Add receipt" onclick="javascript:add_input_receipt();">
       <br>
 
       <label for="screenshot1">Screenshots:</label><span class="hint">(optional)</span>

From 353a16847f0a8d6e9e7730842da1b808ace94238 Mon Sep 17 00:00:00 2001
From: tastytea <tastytea@tastytea.de>
Date: Thu, 21 Jan 2021 22:20:54 +0100
Subject: [PATCH 4/4] Don't die if file tags.lst doesn't exist.

die() cuts the document at the position of the error. We just return an
empty datalist.
---
 index.php | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/index.php b/index.php
index bcf3043..367a523 100644
--- a/index.php
+++ b/index.php
@@ -292,16 +292,18 @@
 
     <datalist id="list_tags">
       <?php
-      $file = fopen("tags.lst", "r") or die("Unable to open autocompletion file.");
-      while(!feof($file))
+      if ($file = fopen("tags.lst", "r"))
       {
-          $tag = rtrim(fgets($file));
-          if ($tag != "")
+          while(!feof($file))
           {
-              printf("<option value=\"%s\">\n", $tag);
+              $tag = rtrim(fgets($file));
+              if ($tag != "")
+              {
+                  printf("<option value=\"%s\">\n", $tag);
+              }
           }
+          fclose($file);
       }
-      fclose($file);
       ?>
     </datalist>
   </body>