Materialize Chips used in place of Notification Tags (#7)

apprise_api/api/templates/config.html

@@ -113,6 +113,35 @@ async function update() {
       document.querySelector('#id_config').value = text;
     });
 
+    // perform a tag retrieval; start with 'all'
+    let tags = ['all'];
+
+    let jsonResponse = fetch('{% url "json_urls" key %}', {
+      method: 'GET',
+    }).then(function(jsonResponse) {
+      return jsonResponse.json();
+
+    }).then(function (data) {
+      // Initialize our tags making it easy for an end user to
+      // choose from. Tags are based off ones found in the saved
+      // configuration.
+      M.Chips.init(document.querySelectorAll('.chips'), {
+        placeholder: 'Optional Tag',
+        secondaryPlaceholder: 'Another Tag',
+        autocompleteOptions: {
+          data: tags.concat(data.tags).reduce(function(result, item) {
+            result[item] = null;
+            return result;
+          }, {}),
+          limit: Infinity,
+          minLength: 1
+        }
+      });
+
+    }).catch(function (err) {
+      // There was an error
+    });
+
     return response;
   }
   // if we reach here, we failed
@@ -194,6 +223,50 @@ document.querySelector('#addconfig').onsubmit = function(event) {
 // over-ride manual submit for a nicer user experience
 document.querySelector('#donotify').onsubmit = function(event) {
   event.preventDefault();
+
+  const chipElement = document.querySelector('.chips');
+
+  chipElement.querySelector('.chips');
+  const chipInput = document.querySelector('.chips > input');
+  if(chipInput.value) {
+    // This code just handles text typed in the tag section that was
+    // not submitted. This forces any lingering un-commited text
+    // into a tag just prior to it's submission
+    const ev = new KeyboardEvent('keydown', {
+      altKey:false,
+      bubbles: true,
+      cancelBubble: false,
+      cancelable: true,
+      charCode: 0,
+      code: "Enter",
+      composed: true,
+      ctrlKey: false,
+      currentTarget: null,
+      defaultPrevented: true,
+      detail: 0,
+      eventPhase: 0,
+      isComposing: false,
+      isTrusted: true,
+      key: "Enter",
+      keyCode: 13,
+      location: 0,
+      metaKey: false,
+      repeat: false,
+      returnValue: false,
+      shiftKey: false,
+      type: "keydown",
+      which: 13
+    });
+    chipInput.dispatchEvent(ev);
+  }
+
+  // store tags (as comma separated string) from materialize chip type into form
+  document.querySelector('#id_tag').value = M.Chips.getInstance(chipElement).chipsData.reduce(
+    function(s, a){
+      s.push(a.tag)
+      return s;
+    }, []).join(",")
+
   const form = this;
   const body = new URLSearchParams(new FormData(form));
 
@@ -223,3 +296,20 @@ document.querySelector('#donotify').onsubmit = function(event) {
 }
 
 {% endblock %}
+
+{% block onload %}
+{{ block.super }}
+document.querySelector('label [for="id_tag"]')
+
+{
+  // create a new div with the class 'chips' assigned to it
+  const element = document.createElement('div')
+  let refNode = document.querySelector('label[for="id_tag"]')
+  element.classList.add("chips")
+  element.style.margin = '0'
+  refNode.parentNode.insertBefore(element, refNode.nextSibling)
+}
+
+// Hide tag field since we use the pretty Materialize Chip setup instead
+document.querySelector('#id_tag').style.display = 'none';
+{% endblock %}