From 07ff2d0f44d07bcca830f020e72ae2389a909f4f Mon Sep 17 00:00:00 2001
From: Adam Novak
Date: Tue, 5 May 2020 14:27:58 -0700
Subject: Add JS at front end for lists, and date support on backend
---
bh20simplewebuploader/main.py | 3 ++
bh20simplewebuploader/static/main.css | 15 +++++--
bh20simplewebuploader/static/main.js | 75 +++++++++++++++++++++++++++++++
bh20simplewebuploader/templates/form.html | 56 +++++++++++++----------
4 files changed, 121 insertions(+), 28 deletions(-)
(limited to 'bh20simplewebuploader')
diff --git a/bh20simplewebuploader/main.py b/bh20simplewebuploader/main.py
index 7b6e6e1..1a441f0 100644
--- a/bh20simplewebuploader/main.py
+++ b/bh20simplewebuploader/main.py
@@ -268,6 +268,9 @@ def parse_input(input_string, html_type, number_step=None):
return int(input_string)
else:
return float(input_string)
+ elif html_type == 'date':
+ # Don't do our own date validation; pass it on as a string
+ return input_string
else:
raise NotImplementedError('Unimplemented input type: {}'.format(html_type))
diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css
index 57e29ef..80ee6b7 100644
--- a/bh20simplewebuploader/static/main.css
+++ b/bh20simplewebuploader/static/main.css
@@ -167,16 +167,19 @@ pre code {
border: solid 1px black;
}
-.record {
+.record, .record .field-group, .record .field-group .field {
display: flex;
flex-direction: column;
+ -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
+ page-break-inside: avoid; /* Firefox */
+ break-inside: avoid;
+}
+
+.record {
border: solid 1px #808080;
padding: 1em;
background: #F8F8F8;
margin-bottom: 1em;
- -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
- page-break-inside: avoid; /* Firefox */
- break-inside: avoid;
}
.record label {
@@ -184,6 +187,10 @@ pre code {
margin-top: 10px;
}
+.hidden {
+ display: none;
+}
+
.search-section {
display: flex;
justify-content: space-between;
diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js
index 96199a0..a67d3df 100644
--- a/bh20simplewebuploader/static/main.js
+++ b/bh20simplewebuploader/static/main.js
@@ -45,3 +45,78 @@ function displayForm() {
}
fillFormSpot.classList.add("invisible");
}
+
+/**
+ * Add another form field to the group this button is part of.
+ */
+function addField(e) {
+ // Find our parent field-group div
+ let fieldGroup = this.parentElement
+
+ // Get its keypath
+ let keypath = fieldGroup.dataset.keypath
+
+ // Find its last field child
+ let existingFields = fieldGroup.getElementsByClassName('field')
+ let templateField = existingFields[existingFields.length - 1]
+
+ // Get its number
+ let fieldNumber = templateField.dataset.number
+
+ // Duplicate it
+ let newField = templateField.cloneNode(true)
+
+ // Increment the number and use the keypath and number to set IDs and cross
+ // references.
+ // TODO: Heavily dependent on the form field HTML. Maybe we want custom
+ // elements for the labeled controlsd that know how to be list items?
+ fieldNumber++
+ newField.dataset.number = fieldNumber
+ let newID = keypath + '[' + fieldNumber + ']'
+ let newControl = newField.getElementsByClassName('control')[0]
+ newControl.id = newID
+ newControl.setAttribute('name', newID)
+ let newLabel = newField.getElementsByTagName('label')[0]
+ newLabel.setAttribute('for', newID)
+
+ // Find the minus button
+ let minusButton = fieldGroup.getElementsByClassName('remove-field')[0]
+
+ // Put new field as a child before the minus button
+ fieldGroup.insertBefore(newField, minusButton)
+
+ // Enable the minus button
+ minusButton.classList.remove('hidden')
+}
+
+/**
+ * Remove the last form field from the group button is part of.
+ */
+function removeField(e) {
+ // Find our parent field-group div
+ let fieldGroup = this.parentElement
+
+ // Find its field children
+ let existingFields = fieldGroup.getElementsByClassName('field')
+
+ if (existingFields.length > 1) {
+ // There is a last field we can safely remove.
+ let lastField = existingFields[existingFields.length - 1]
+ fieldGroup.removeChild(lastField)
+ }
+
+ if (existingFields.length <= 1) {
+ // Collection auto-updates. Now there's only one element. Don't let the
+ // user remove it. If they don't want it, they can leave it empty.
+ this.classList.add('hidden')
+ }
+}
+
+// Find all the add and remove field buttons and hook up the listeners.
+for (let button of document.getElementsByClassName('add-field')) {
+ button.addEventListener('click', addField)
+}
+for (let button of document.getElementsByClassName('remove-field')) {
+ button.addEventListener('click', removeField)
+}
+
diff --git a/bh20simplewebuploader/templates/form.html b/bh20simplewebuploader/templates/form.html
index ffd4158..cea444c 100644
--- a/bh20simplewebuploader/templates/form.html
+++ b/bh20simplewebuploader/templates/form.html
@@ -32,10 +32,10 @@