From 06008fb3777cbf299c93d3f059142f7da320d4b9 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 9 Aug 2022 15:51:37 +0100 Subject: [PATCH 01/32] initial commit for opening-times-stimulus-controller --- app/javascript/controllers/index.js | 3 + .../controllers/opening_times_controller.js | 21 +++++++ app/views/admin/partners/_form.html.erb | 55 ++++++++++++------- 3 files changed, 58 insertions(+), 21 deletions(-) create mode 100644 app/javascript/controllers/opening_times_controller.js diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index 538faa8cb..6a1c7bc30 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -10,5 +10,8 @@ application.register("image-preview", ImagePreviewController) import LeafletController from "./leaflet_controller.js" application.register("leaflet", LeafletController) +import OpeningTimesController from "./opening_times_controller.js" +application.register("opening-times", OpeningTimesController) + import Select2Controller from "./select2_controller.js" application.register("select2", Select2Controller) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js new file mode 100644 index 000000000..102952e42 --- /dev/null +++ b/app/javascript/controllers/opening_times_controller.js @@ -0,0 +1,21 @@ +import { Controller } from "@hotwired/stimulus"; + +// Connects to data-controller="opening-times" +export default class extends Controller { + static values = { data: Array }; + static targets = ["textarea"]; + connect() { + console.log("CONNECTED"); + console.log(this.hasDataValue); + console.log(this.dataValue); + } + + dataValueChanged() { + this.updateTextarea(); + } + + updateTextarea() { + console.log("running"); + this.textareaTarget.value = JSON.stringify(this.dataValue); + } +} diff --git a/app/views/admin/partners/_form.html.erb b/app/views/admin/partners/_form.html.erb index 0e2a94e01..1a51a1e11 100644 --- a/app/views/admin/partners/_form.html.erb +++ b/app/views/admin/partners/_form.html.erb @@ -113,30 +113,43 @@

Opening times

-
+
-
- -
- -
- - - - - - - -
- - <%= f.text_area :opening_times, value: '{{ $data.openingHoursSpecifications }}', hidden:true %> + <%= f.text_area :opening_times, data: { opening_times_target: "textarea" } %>
+ <%# <%1# .presence returns the object if it exists or nil if not, becayse nil is falsey you can use the || on it %1> %> + <%#
%> + + <%#
%> + <%# %> + <%#
%> + + <%#
%> + <%# %> + + <%# %> + + <%# %> + + <%# %> + <%#
%> + + <%# <%= 'opening_times.presence' %1> %> + <%# <%= @partner.opening_times.presence %1> %> + <%# <% puts 'opening_times' %1> %> + <%# <% puts @partner.opening_times %1> %> + <%# <% puts 'opening_times.presence' %1> %> + <%# <% puts @partner.opening_times.presence %1> %> + <%# <%1# is this vue code running in the template? %1> %> + <%# <%1# <%= f.text_area :opening_times, value: '{{ $data.openingHoursSpecifications }}', hidden:true %2> %1> %> + <%# <%= f.text_area :opening_times, value: @partner.opening_times %1> %> + <%#
%> -

Tags

Does this Partner provide any of the following things?

From 8ba5793b392e0392710ad869c12f4cbdb79c4838 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 9 Aug 2022 16:14:59 +0100 Subject: [PATCH 02/32] add some lifecycle stuff and make data visible --- .../controllers/opening_times_controller.js | 18 +++++++++++++++++- app/views/admin/partners/_form.html.erb | 7 +++++-- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index 102952e42..021fee1c6 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -1,9 +1,15 @@ import { Controller } from "@hotwired/stimulus"; +const el = (type, content) => { + const el = document.createElement(type); + el.innerHTML = content; + return el; +}; + // Connects to data-controller="opening-times" export default class extends Controller { static values = { data: Array }; - static targets = ["textarea"]; + static targets = ["textarea", "list"]; connect() { console.log("CONNECTED"); console.log(this.hasDataValue); @@ -12,10 +18,20 @@ export default class extends Controller { dataValueChanged() { this.updateTextarea(); + this.updateList(); } updateTextarea() { console.log("running"); this.textareaTarget.value = JSON.stringify(this.dataValue); } + + updateList() { + console.log("walking"); + this.dataValue + .map((timeObj) => el("li", JSON.stringify(timeObj))) + .forEach((element) => { + this.listTarget.append(element); + }); + } } diff --git a/app/views/admin/partners/_form.html.erb b/app/views/admin/partners/_form.html.erb index 1a51a1e11..88c45638a 100644 --- a/app/views/admin/partners/_form.html.erb +++ b/app/views/admin/partners/_form.html.erb @@ -113,9 +113,12 @@

Opening times

-
+
+
    + +
- <%= f.text_area :opening_times, data: { opening_times_target: "textarea" } %> + <%= f.text_area :opening_times, data: { opening_times_target: "textarea" }, hidden: true %>
<%# <%1# .presence returns the object if it exists or nil if not, becayse nil is falsey you can use the || on it %1> %> <%#
%> From 0acb8c3588f4922bf4e7fca0ae7ec41d24455c19 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 9 Aug 2022 17:19:59 +0100 Subject: [PATCH 03/32] add some bascic user interaction --- .../controllers/opening_times_controller.js | 10 ++++++++++ app/views/admin/partners/_form.html.erb | 20 ++++++++++++++++++- 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index 021fee1c6..f149b4378 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -27,6 +27,7 @@ export default class extends Controller { } updateList() { + this.listTarget.innerHTML = ""; console.log("walking"); this.dataValue .map((timeObj) => el("li", JSON.stringify(timeObj))) @@ -34,4 +35,13 @@ export default class extends Controller { this.listTarget.append(element); }); } + + update(event) { + event.preventDefault(); + console.log("CLICKED"); + const day = this.element.querySelector("#day").value; + const open = this.element.querySelector("#open").value; + const close = this.element.querySelector("#close").value; + this.dataValue = [...this.dataValue, { day, open, close }]; + } } diff --git a/app/views/admin/partners/_form.html.erb b/app/views/admin/partners/_form.html.erb index 88c45638a..46fa41711 100644 --- a/app/views/admin/partners/_form.html.erb +++ b/app/views/admin/partners/_form.html.erb @@ -115,9 +115,27 @@

Opening times

    -
+ <%# add some sort of formgroup that updates data %> +
+ + + + + + + +
+ <%= f.text_area :opening_times, data: { opening_times_target: "textarea" }, hidden: true %>
<%# <%1# .presence returns the object if it exists or nil if not, becayse nil is falsey you can use the || on it %1> %> From 3297fafeeaee1fc3810336ccedfdc054ca17e3f8 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 9 Aug 2022 17:42:00 +0100 Subject: [PATCH 04/32] add label text I missed, use flexbox to keep inputs on the same row --- app/views/admin/partners/_form.html.erb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/admin/partners/_form.html.erb b/app/views/admin/partners/_form.html.erb index 46fa41711..693621fbd 100644 --- a/app/views/admin/partners/_form.html.erb +++ b/app/views/admin/partners/_form.html.erb @@ -118,8 +118,8 @@ <%# add some sort of formgroup that updates data %> -
- +
+ - +
<%= f.text_area :opening_times, data: { opening_times_target: "textarea" }, hidden: true %> From 13a9a5af3db01c25854d8de4bfe729d774fc777c Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Mon, 15 Aug 2022 12:18:58 +0100 Subject: [PATCH 06/32] add function to convert form input to openingHoursSpecification --- .../controllers/opening_times_controller.js | 45 ++++++++++++++++--- 1 file changed, 40 insertions(+), 5 deletions(-) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index 9bacd1230..0d31e53fa 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -3,11 +3,40 @@ import { Controller } from "@hotwired/stimulus"; /* * TODO * - * Handle 12+24hr time inputs (determined by user system settings 😬) - * 24hr format = string "12:22" - * 12hr format = ??? + * The value of the time input is always in 24-hour format that includes leading zeros: hh:mm * * Convert from form input to openingTimesSpecification and back. + * { + "@context": "https://schema.org", + "@type": "Store", + "name": "Middle of Nowhere Foods", + "openingHours": "Mo,Tu,We,Th,Fr,Sa,Su 09:00-14:00", + "openingHoursSpecification": + [ + { + "@type": "OpeningHoursSpecification", + "validFrom": "2013-12-24", + "validThrough": "2013-12-25", + "opens": "09:00:00", + "closes": "11:00:00" + }, + { + "@type": "OpeningHoursSpecification", + "validFrom": "2014-01-01", + "validThrough": "2014-01-01", + "opens": "12:00:00", + "closes": "14:00:00" + } + ] +} + +{ + "@type": "OpeningHoursSpecification", + closes: "16:00:00", + dayOfWeek: "http://schema.org/Monday", + opens: "10:00:00", +} + * * Read exising opening time and display in human readable language * @@ -19,6 +48,13 @@ import { Controller } from "@hotwired/stimulus"; * * */ +const openingHoursSpec = (day, open, close) => ({ + "@type": "OpeningHoursSpecification", + dayOfWeek: `http://schema.org/${day}`, + opens: `${open}:00`, + closes: `${close}:00`, +}); + const el = (type, content) => { const el = document.createElement(type); el.innerHTML = content; @@ -61,7 +97,6 @@ export default class extends Controller { const day = this.element.querySelector("#day").value; const open = this.element.querySelector("#open").value; const close = this.element.querySelector("#close").value; - console.log(open); - this.dataValue = [...this.dataValue, { day, open, close }]; + this.dataValue = [...this.dataValue, openingHoursSpec(day, open, close)]; } } From 0575e0eefa2318c4c96d83f04ee9f971586e9714 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Mon, 15 Aug 2022 13:00:10 +0100 Subject: [PATCH 07/32] extract openingHoursSpec coonversion logic into a function --- .../controllers/opening_times_controller.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index 0d31e53fa..3db2a9bb4 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -55,6 +55,17 @@ const openingHoursSpec = (day, open, close) => ({ closes: `${close}:00`, }); +const openingHoursObj = (openSpec) => ({ + day: openSpec.dayOfWeek.split("/").filter((str) => str.includes("day"))[0], + open: openSpec.opens.slice(0, 5), + close: openSpec.closes.slice(0, 5), +}); + +const openingHoursEnglish = (openSpec) => { + const { day, open, close } = openingHoursObj(openSpec); + return `${day} from ${open} to ${close}`; +}; + const el = (type, content) => { const el = document.createElement(type); el.innerHTML = content; @@ -85,7 +96,7 @@ export default class extends Controller { this.listTarget.innerHTML = ""; console.log("walking"); this.dataValue - .map((timeObj) => el("li", JSON.stringify(timeObj))) + .map((timeObj) => el("li", openingHoursEnglish(timeObj))) .forEach((element) => { this.listTarget.append(element); }); From e6d435fa8237242327a4ef8fda944f29b9730d0e Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Mon, 15 Aug 2022 16:06:49 +0100 Subject: [PATCH 08/32] add chronological sorting to openingTimes data --- .../controllers/opening_times_controller.js | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index 3db2a9bb4..9ac4657f5 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -61,6 +61,25 @@ const openingHoursObj = (openSpec) => ({ close: openSpec.closes.slice(0, 5), }); +const sortOpeningHours = (openSpecArray) => { + const dayOrder = [ + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + "Sunday", + ]; + return [...openSpecArray] + .sort((a, b) => openingHoursObj(a).open > openingHoursObj(b).open) + .sort( + (a, b) => + dayOrder.indexOf(openingHoursObj(a).day) > + dayOrder.indexOf(openingHoursObj(b).day), + ); +}; + const openingHoursEnglish = (openSpec) => { const { day, open, close } = openingHoursObj(openSpec); return `${day} from ${open} to ${close}`; @@ -80,6 +99,7 @@ export default class extends Controller { console.log("CONNECTED"); console.log(this.hasDataValue); console.log(this.dataValue); + this.dataValue = sortOpeningHours(this.dataValue); } dataValueChanged() { @@ -108,6 +128,9 @@ export default class extends Controller { const day = this.element.querySelector("#day").value; const open = this.element.querySelector("#open").value; const close = this.element.querySelector("#close").value; - this.dataValue = [...this.dataValue, openingHoursSpec(day, open, close)]; + this.dataValue = sortOpeningHours([ + ...this.dataValue, + openingHoursSpec(day, open, close), + ]); } } From dc5b819ebf5f30aeef075dcee64e3a0d8bae6c29 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Mon, 15 Aug 2022 16:44:52 +0100 Subject: [PATCH 09/32] reset form fields, update comments --- .../controllers/opening_times_controller.js | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index 9ac4657f5..3ac8d1bfe 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -3,9 +3,7 @@ import { Controller } from "@hotwired/stimulus"; /* * TODO * - * The value of the time input is always in 24-hour format that includes leading zeros: hh:mm * - * Convert from form input to openingTimesSpecification and back. * { "@context": "https://schema.org", "@type": "Store", @@ -38,9 +36,7 @@ import { Controller } from "@hotwired/stimulus"; } * - * Read exising opening time and display in human readable language - * - * Display in chronological order, not creation order + * Form validation - possible to submit times as "" - Neither JS prevents this nor does the model validate it. * * Remove an entry, probably .filter on the array, maybe create a closure for the test * added to the onclick of the remove button that embeds the opening times to remove? @@ -96,9 +92,9 @@ export default class extends Controller { static values = { data: Array }; static targets = ["textarea", "list"]; connect() { - console.log("CONNECTED"); - console.log(this.hasDataValue); - console.log(this.dataValue); + // console.log("CONNECTED"); + // console.log(this.hasDataValue); + // console.log(this.dataValue); this.dataValue = sortOpeningHours(this.dataValue); } @@ -108,13 +104,13 @@ export default class extends Controller { } updateTextarea() { - console.log("running"); + // console.log("running"); this.textareaTarget.value = JSON.stringify(this.dataValue); } updateList() { this.listTarget.innerHTML = ""; - console.log("walking"); + // console.log("walking"); this.dataValue .map((timeObj) => el("li", openingHoursEnglish(timeObj))) .forEach((element) => { @@ -124,10 +120,13 @@ export default class extends Controller { updateFromForm(event) { event.preventDefault(); - console.log("CLICKED"); + // console.log("CLICKED"); const day = this.element.querySelector("#day").value; const open = this.element.querySelector("#open").value; const close = this.element.querySelector("#close").value; + this.element.querySelector("#day").value = ""; + this.element.querySelector("#open").value = ""; + this.element.querySelector("#close").value = "Monday"; this.dataValue = sortOpeningHours([ ...this.dataValue, openingHoursSpec(day, open, close), From 12eba8575cd439b04c9e04577f003afe5c3c8621 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Mon, 15 Aug 2022 16:55:50 +0100 Subject: [PATCH 10/32] fix from reset bug, make a function name more explicit --- app/javascript/controllers/opening_times_controller.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index 3ac8d1bfe..ad0bab0cc 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -57,7 +57,7 @@ const openingHoursObj = (openSpec) => ({ close: openSpec.closes.slice(0, 5), }); -const sortOpeningHours = (openSpecArray) => { +const sortedOpeningHours = (openSpecArray) => { const dayOrder = [ "Monday", "Tuesday", @@ -95,7 +95,7 @@ export default class extends Controller { // console.log("CONNECTED"); // console.log(this.hasDataValue); // console.log(this.dataValue); - this.dataValue = sortOpeningHours(this.dataValue); + this.dataValue = sortedOpeningHours(this.dataValue); } dataValueChanged() { @@ -124,10 +124,10 @@ export default class extends Controller { const day = this.element.querySelector("#day").value; const open = this.element.querySelector("#open").value; const close = this.element.querySelector("#close").value; - this.element.querySelector("#day").value = ""; + this.element.querySelector("#day").value = "Monday"; this.element.querySelector("#open").value = ""; - this.element.querySelector("#close").value = "Monday"; - this.dataValue = sortOpeningHours([ + this.element.querySelector("#close").value = ""; + this.dataValue = sortedOpeningHours([ ...this.dataValue, openingHoursSpec(day, open, close), ]); From 4037677628e01574acce5fc867f12a3a80b9e1bd Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Mon, 15 Aug 2022 17:44:32 +0100 Subject: [PATCH 11/32] add the ability to remove opening times --- .../controllers/opening_times_controller.js | 57 +++++++------------ 1 file changed, 19 insertions(+), 38 deletions(-) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index ad0bab0cc..1f3eff61c 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -3,44 +3,13 @@ import { Controller } from "@hotwired/stimulus"; /* * TODO * + * Form validation - possible to submit times as "" - Neither JS prevents this nor does the model validate it. * - * { - "@context": "https://schema.org", - "@type": "Store", - "name": "Middle of Nowhere Foods", - "openingHours": "Mo,Tu,We,Th,Fr,Sa,Su 09:00-14:00", - "openingHoursSpecification": - [ - { - "@type": "OpeningHoursSpecification", - "validFrom": "2013-12-24", - "validThrough": "2013-12-25", - "opens": "09:00:00", - "closes": "11:00:00" - }, - { - "@type": "OpeningHoursSpecification", - "validFrom": "2014-01-01", - "validThrough": "2014-01-01", - "opens": "12:00:00", - "closes": "14:00:00" - } - ] -} - -{ - "@type": "OpeningHoursSpecification", - closes: "16:00:00", - dayOfWeek: "http://schema.org/Monday", - opens: "10:00:00", -} - + * UI Stuff * - * Form validation - possible to submit times as "" - Neither JS prevents this nor does the model validate it. + * Full days * - * Remove an entry, probably .filter on the array, maybe create a closure for the test - * added to the onclick of the remove button that embeds the opening times to remove? - * Not sure how that will work with stimulus + * https://schema.org/OpeningHoursSpecification * * */ @@ -81,6 +50,11 @@ const openingHoursEnglish = (openSpec) => { return `${day} from ${open} to ${close}`; }; +const removeTime = (openSpecArray, openSpec) => + [...openSpecArray].filter( + (el) => JSON.stringify(el) !== JSON.stringify(openSpec), + ); + const el = (type, content) => { const el = document.createElement(type); el.innerHTML = content; @@ -112,9 +86,16 @@ export default class extends Controller { this.listTarget.innerHTML = ""; // console.log("walking"); this.dataValue - .map((timeObj) => el("li", openingHoursEnglish(timeObj))) - .forEach((element) => { - this.listTarget.append(element); + .map((openSpec) => { + const li = el("li", openingHoursEnglish(openSpec)); + // remove the option by clicking on the list item - worst UI ever + li.onclick = () => { + this.dataValue = removeTime(this.dataValue, openSpec); + }; + return li; + }) + .forEach((li) => { + this.listTarget.append(li); }); } From 5faf0b8ba860e56e3051a9e959b446d24e1c62dd Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Mon, 15 Aug 2022 20:53:05 +0100 Subject: [PATCH 12/32] add some more text to the list items to make the funcionality clearer --- app/javascript/controllers/opening_times_controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index 1f3eff61c..b151c4186 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -87,7 +87,7 @@ export default class extends Controller { // console.log("walking"); this.dataValue .map((openSpec) => { - const li = el("li", openingHoursEnglish(openSpec)); + const li = el("li", openingHoursEnglish(openSpec) + " [remove X]"); // remove the option by clicking on the list item - worst UI ever li.onclick = () => { this.dataValue = removeTime(this.dataValue, openSpec); From cba65a45cfaa3f467c973187c6e59cc0aede0f82 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Mon, 15 Aug 2022 21:14:44 +0100 Subject: [PATCH 13/32] refactor for tidyness --- .../controllers/opening_times_controller.js | 11 +++-------- app/views/admin/partners/_form.html.erb | 2 +- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index b151c4186..ed41bc99a 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -55,7 +55,7 @@ const removeTime = (openSpecArray, openSpec) => (el) => JSON.stringify(el) !== JSON.stringify(openSpec), ); -const el = (type, content) => { +const el = (type, content = "") => { const el = document.createElement(type); el.innerHTML = content; return el; @@ -65,10 +65,8 @@ const el = (type, content) => { export default class extends Controller { static values = { data: Array }; static targets = ["textarea", "list"]; + connect() { - // console.log("CONNECTED"); - // console.log(this.hasDataValue); - // console.log(this.dataValue); this.dataValue = sortedOpeningHours(this.dataValue); } @@ -78,13 +76,11 @@ export default class extends Controller { } updateTextarea() { - // console.log("running"); this.textareaTarget.value = JSON.stringify(this.dataValue); } updateList() { this.listTarget.innerHTML = ""; - // console.log("walking"); this.dataValue .map((openSpec) => { const li = el("li", openingHoursEnglish(openSpec) + " [remove X]"); @@ -99,9 +95,8 @@ export default class extends Controller { }); } - updateFromForm(event) { + addOpeningTime(event) { event.preventDefault(); - // console.log("CLICKED"); const day = this.element.querySelector("#day").value; const open = this.element.querySelector("#open").value; const close = this.element.querySelector("#close").value; diff --git a/app/views/admin/partners/_form.html.erb b/app/views/admin/partners/_form.html.erb index 234aa3e22..f3d853957 100644 --- a/app/views/admin/partners/_form.html.erb +++ b/app/views/admin/partners/_form.html.erb @@ -133,7 +133,7 @@ - +
<%= f.text_area :opening_times, data: { opening_times_target: "textarea" }, hidden: true %> From f68ee070d155603b08b031fb289525a1094442e9 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 16 Aug 2022 10:52:09 +0100 Subject: [PATCH 14/32] add allday checkbox --- .../controllers/opening_times_controller.js | 36 +++++++++++++++---- app/views/admin/partners/_form.html.erb | 8 +++-- 2 files changed, 34 insertions(+), 10 deletions(-) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index ed41bc99a..afc452abb 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -64,10 +64,20 @@ const el = (type, content = "") => { // Connects to data-controller="opening-times" export default class extends Controller { static values = { data: Array }; - static targets = ["textarea", "list"]; + static targets = ["textarea", "list", "day", "allDay", "open", "close"]; connect() { this.dataValue = sortedOpeningHours(this.dataValue); + this.resetForm(); + } + + resetForm() { + this.dayTarget.value = "Monday"; + this.allDayTarget.checked = false; + this.openTarget.value = ""; + this.closeTarget.value = ""; + this.openTarget.disabled = false; + this.closeTarget.disabled = false; } dataValueChanged() { @@ -95,14 +105,26 @@ export default class extends Controller { }); } + allDay(event) { + event.preventDefault(); + if (this.allDayTarget.checked) { + this.openTarget.value = "00:00"; + this.closeTarget.value = "23:59"; + this.openTarget.disabled = true; + this.closeTarget.disabled = true; + } + if (!this.allDayTarget.checked) { + this.openTarget.disabled = false; + this.closeTarget.disabled = false; + } + } + addOpeningTime(event) { event.preventDefault(); - const day = this.element.querySelector("#day").value; - const open = this.element.querySelector("#open").value; - const close = this.element.querySelector("#close").value; - this.element.querySelector("#day").value = "Monday"; - this.element.querySelector("#open").value = ""; - this.element.querySelector("#close").value = ""; + const day = this.dayTarget.value; + const open = this.openTarget.value; + const close = this.closeTarget.value; + this.resetForm(); this.dataValue = sortedOpeningHours([ ...this.dataValue, openingHoursSpec(day, open, close), diff --git a/app/views/admin/partners/_form.html.erb b/app/views/admin/partners/_form.html.erb index f3d853957..f0ddb4a4d 100644 --- a/app/views/admin/partners/_form.html.erb +++ b/app/views/admin/partners/_form.html.erb @@ -120,7 +120,7 @@ <%# add some sort of formgroup that updates data %>
- @@ -129,10 +129,12 @@ + + - + - +
From 321114acf4efaaa281520fe0745f7bf627838547 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 16 Aug 2022 11:23:19 +0100 Subject: [PATCH 15/32] improve opening times list UI --- .../controllers/opening_times_controller.js | 26 +++++++++++++++---- app/views/admin/partners/_form.html.erb | 2 +- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index afc452abb..ec5aa9ebd 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -5,7 +5,7 @@ import { Controller } from "@hotwired/stimulus"; * * Form validation - possible to submit times as "" - Neither JS prevents this nor does the model validate it. * - * UI Stuff + * UI Stuff - A bit of padding between the form and the list would be nice * * Full days * @@ -55,9 +55,12 @@ const removeTime = (openSpecArray, openSpec) => (el) => JSON.stringify(el) !== JSON.stringify(openSpec), ); -const el = (type, content = "") => { +const element = (type, content = "", classes = []) => { const el = document.createElement(type); el.innerHTML = content; + classes.forEach((className) => { + el.classList.add(className); + }); return el; }; @@ -90,16 +93,29 @@ export default class extends Controller { } updateList() { + // clear the list this.listTarget.innerHTML = ""; + // generate new HTML from data this.dataValue .map((openSpec) => { - const li = el("li", openingHoursEnglish(openSpec) + " [remove X]"); - // remove the option by clicking on the list item - worst UI ever - li.onclick = () => { + const li = element("li", openingHoursEnglish(openSpec), [ + "list-group-item", + "d-flex", + "align-items-center", + "justify-content-between", + ]); + const btn = element("button", "Remove", [ + "btn", + "btn-danger", + "btn-sm", + ]); + btn.onclick = () => { this.dataValue = removeTime(this.dataValue, openSpec); }; + li.appendChild(btn); return li; }) + // insert into DOM .forEach((li) => { this.listTarget.append(li); }); diff --git a/app/views/admin/partners/_form.html.erb b/app/views/admin/partners/_form.html.erb index f0ddb4a4d..ea5a3cac3 100644 --- a/app/views/admin/partners/_form.html.erb +++ b/app/views/admin/partners/_form.html.erb @@ -114,7 +114,7 @@

Opening times

-
    +
    <%# add some sort of formgroup that updates data %> From 52c064eb762829fbe4721420c951a076c9bc49c2 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 16 Aug 2022 11:31:58 +0100 Subject: [PATCH 16/32] fix broken row / columns in partners form --- app/views/admin/partners/_form.html.erb | 34 +------------------------ 1 file changed, 1 insertion(+), 33 deletions(-) diff --git a/app/views/admin/partners/_form.html.erb b/app/views/admin/partners/_form.html.erb index ea5a3cac3..afb977644 100644 --- a/app/views/admin/partners/_form.html.erb +++ b/app/views/admin/partners/_form.html.erb @@ -140,39 +140,7 @@ <%= f.text_area :opening_times, data: { opening_times_target: "textarea" }, hidden: true %>
- <%# <%1# .presence returns the object if it exists or nil if not, becayse nil is falsey you can use the || on it %1> %> - <%#
%> - - <%#
%> - <%# %> - <%#
%> - - <%#
%> - <%# %> - - <%# %> - - <%# %> - - <%# %> - <%#
%> - - <%# <%= 'opening_times.presence' %1> %> - <%# <%= @partner.opening_times.presence %1> %> - <%# <% puts 'opening_times' %1> %> - <%# <% puts @partner.opening_times %1> %> - <%# <% puts 'opening_times.presence' %1> %> - <%# <% puts @partner.opening_times.presence %1> %> - <%# <%1# is this vue code running in the template? %1> %> - <%# <%1# <%= f.text_area :opening_times, value: '{{ $data.openingHoursSpecifications }}', hidden:true %2> %1> %> - <%# <%= f.text_area :opening_times, value: @partner.opening_times %1> %> - <%#
%> - +

Tags

Does this Partner provide any of the following things?

From a9596678a60dcdce317029fca1a49070c2aef0c8 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 16 Aug 2022 11:39:53 +0100 Subject: [PATCH 17/32] add spacing between open-times list and form --- app/views/admin/partners/_form.html.erb | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/views/admin/partners/_form.html.erb b/app/views/admin/partners/_form.html.erb index afb977644..08b005c35 100644 --- a/app/views/admin/partners/_form.html.erb +++ b/app/views/admin/partners/_form.html.erb @@ -117,8 +117,7 @@
- <%# add some sort of formgroup that updates data %> -
+
- - - - - - - - - - - - - - + + + +
From 8f7992841169821b20f3028caee0378dec58c014 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 16 Aug 2022 12:46:18 +0100 Subject: [PATCH 19/32] add an allDay condition to openingHoursEnglish --- app/javascript/controllers/opening_times_controller.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index ec5aa9ebd..3414b8e84 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -47,7 +47,9 @@ const sortedOpeningHours = (openSpecArray) => { const openingHoursEnglish = (openSpec) => { const { day, open, close } = openingHoursObj(openSpec); - return `${day} from ${open} to ${close}`; + return open === "00:00" && close === "23:59" + ? `${day} all day` + : `${day} from ${open} to ${close}`; }; const removeTime = (openSpecArray, openSpec) => From b18a40a6f8a2df827d89f2d1dd691e80b8d9241b Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 16 Aug 2022 16:36:51 +0100 Subject: [PATCH 20/32] fix sorting bug in chrome --- .../controllers/opening_times_controller.js | 15 ++++++++++----- app/views/admin/partners/_form.html.erb | 4 ++-- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index 3414b8e84..2071f41c5 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -36,13 +36,18 @@ const sortedOpeningHours = (openSpecArray) => { "Saturday", "Sunday", ]; - return [...openSpecArray] - .sort((a, b) => openingHoursObj(a).open > openingHoursObj(b).open) + const sorted = [...openSpecArray] .sort( (a, b) => - dayOrder.indexOf(openingHoursObj(a).day) > + parseFloat(openingHoursObj(a).open.replace(":", ".")) - + parseFloat(openingHoursObj(b).open.replace(":", ".")), + ) + .sort( + (a, b) => + dayOrder.indexOf(openingHoursObj(a).day) - dayOrder.indexOf(openingHoursObj(b).day), ); + return sorted; }; const openingHoursEnglish = (openSpec) => { @@ -79,8 +84,8 @@ export default class extends Controller { resetForm() { this.dayTarget.value = "Monday"; this.allDayTarget.checked = false; - this.openTarget.value = ""; - this.closeTarget.value = ""; + this.openTarget.value = "00:00"; + this.closeTarget.value = "00:00"; this.openTarget.disabled = false; this.closeTarget.disabled = false; } diff --git a/app/views/admin/partners/_form.html.erb b/app/views/admin/partners/_form.html.erb index d52c4c09a..9f79a33a2 100644 --- a/app/views/admin/partners/_form.html.erb +++ b/app/views/admin/partners/_form.html.erb @@ -133,10 +133,10 @@
From 04666850d4796b7ae018baf6fdd336c9624909d2 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 16 Aug 2022 17:27:02 +0100 Subject: [PATCH 21/32] add system test for opening-times stimulus controller on partners page --- test/system/admin/partner_test.rb | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/test/system/admin/partner_test.rb b/test/system/admin/partner_test.rb index 4649905db..ed31c1ae7 100644 --- a/test/system/admin/partner_test.rb +++ b/test/system/admin/partner_test.rb @@ -68,4 +68,27 @@ class AdminPartnerTest < ApplicationSystemTestCase preview = find(:css, '.brand_image', wait: 15) assert preview['src'].starts_with?(base64), 'The preview image src is not the expected value' end + + test 'opening time picker on partner form' do + click_sidebar 'partners' + await_datatables + click_link @partner.name + within '[data-controller="opening-times"]' do + # Add an allday event + select 'Sunday', from: 'day' + check('All Day') + click_button 'Add' + new_time = '{"@type":"OpeningHoursSpecification","dayOfWeek":"http://schema.org/Sunday","opens":"00:00:00","closes":"23:59:00"}' + data = find('[data-opening-times-target="textarea"]', visible: :hidden).value + # check it's in the list + assert all(:css, '.list-group-item')[-1].text.starts_with?('Sunday all day') + # check it's added to the text area + assert data.include?(new_time) + # remove the event + all(:css, '.list-group-item')[-1].click_button('Remove') + data = find('[data-opening-times-target="textarea"]', visible: :hidden).value + # check time is removed from the text area + assert !data.include?(new_time) + end + end end From 77f737d3dfecb2cb78ed32f59d7771c015cbff24 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 16 Aug 2022 17:45:41 +0100 Subject: [PATCH 22/32] remove old opening-times picker --- app/javascript/admin.js | 1 - app/javascript/src/opening-times.js | 197 ---------------------------- 2 files changed, 198 deletions(-) delete mode 100644 app/javascript/src/opening-times.js diff --git a/app/javascript/admin.js b/app/javascript/admin.js index 23b895018..ba8b1a1d6 100644 --- a/app/javascript/admin.js +++ b/app/javascript/admin.js @@ -14,7 +14,6 @@ import "./src/datatable.js" // Opening times stuff import Vue from "vue" import "vue-turbolinks" -import "./src/opening-times.js" // Specific pages import "./src/behaviors/all_behaviors.js" diff --git a/app/javascript/src/opening-times.js b/app/javascript/src/opening-times.js deleted file mode 100644 index 0206b881d..000000000 --- a/app/javascript/src/opening-times.js +++ /dev/null @@ -1,197 +0,0 @@ -import TurbolinksAdapter from 'vue-turbolinks' -import Vue from 'vue/dist/vue.esm' -import VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue' - -Vue.use(TurbolinksAdapter) -// -// opening_hours.js -// -// UI to allow the definition of a set of opening hours. -// -// The code includes a representation of the opening hours in this format: -// https://schema.org/OpeningHoursSpecification -// -// The original version of the code was taken from https://codepen.io/mariordev/pen/RRbvgW -// Principle modifications are: -// - addition of schema.org format -// - The ability to convert between the schema.org representation and something -// more human-readable. -// - Change of Vue major version from 1 to 2 - -var daysArray = [ - { value: 0, name: 'Monday', "schema.org": "http://schema.org/Monday" }, - { value: 1, name: 'Tuesday', "schema.org": "http://schema.org/Tuesday" }, - { value: 2, name: 'Wednesday', "schema.org": "http://schema.org/Wednesday" }, - { value: 3, name: 'Thursday', "schema.org": "http://schema.org/Thursday" }, - { value: 4, name: 'Friday', "schema.org": "http://schema.org/Friday" }, - { value: 5, name: 'Saturday', "schema.org": "http://schema.org/Saturday" }, - { value: 6, name: 'Sunday', "schema.org": "http://schema.org/Sunday" }, -]; - -// Convert an added day to a schema.org OpeningHoursSpecification. -function openingHoursSpecification(day) { - return { - "@type": "OpeningHoursSpecification", - closes: day.closes, - dayOfWeek: day.dayOfWeek, - opens: day.opens, - } -} - -// Convert a schema.org OpeningHoursSpecification to an added day. -// -function addedDay(spec) { - return { - dayName: daysArray.reduce( function(acc,val) { - if (acc) { - return acc; - } else if (val['schema.org'] == spec.dayOfWeek){ - return val.name; - } else { - return false - } - }, false), - - openingTimeName: convertTo12Hour(spec.opens), - closingTimeName: convertTo12Hour(spec.closes), - // OpeningHoursSpecification: - closes: spec.closes, - dayOfWeek: spec.dayOfWeek, - opens: spec.opens, - } -} - -function convertTo12Hour(time) { - var time_arr = time.split(':'); - - if(time_arr[0] === '0') { - return '12:' + time_arr[2] + ' am'; - } else if(time_arr[0] > 12) { - return time_arr[0] % 12 + ':' + time_arr[1] + ' pm'; - } else { - return time_arr[0] + ':' + time_arr[1] + ' am'; - } -} - -function convertTo24Hour(time) { - if(time['a'] === 'pm') { - if(time['hh'] === '12') { - return '00:00:00'; - } else { - return (parseInt(time['hh']) + 12) + ':' + time['mm'] + ':00'; - } - } else { - return time['hh'] + ':' + time['mm'] + ':00'; - } -} - -Vue.component('added-days', { - props: { - list: Array - }, - - template: ` -
    -
  • - {{ day.dayName }} from - {{ day.openingTimeName }} to - {{ day.closingTimeName }} - - - - -
    • -
`, - - methods: { - removeDay: function(day) { - this.$parent.addedDays.splice(this.$parent.addedDays.indexOf(day), 1); - this.$parent.openingHoursSpecifications = - this.$parent.addedDays.map( openingHoursSpecification ); - }, - } -}) - -document.addEventListener('turbo:load', () => { - var element = document.getElementById('opening-times') - if (element != null) { - - var openingHours = JSON.parse(element.getAttribute('data')) - - new Vue({ - el: element, - - data: { - addedDays: openingHours.map( addedDay ), - openingHoursSpecifications: openingHours, - selectedDay: 0, - selectedOpeningTime: { - hh: '09', - mm: '00', - a: 'am' - }, - selectedClosingTime: { - hh: '05', - mm: '00', - a: 'pm' - }, - days: daysArray, - }, - - - components: { VueTimepicker }, - - computed: { - - selectedDayName: function() { - return this.days[this.selectedDay].name; - }, - - selectedDaySchemaDotOrg: function() { - return this.days[this.selectedDay]["schema.org"]; - }, - - selectedOpeningTimeName: function() { - var time = this.selectedOpeningTime - return parseInt(time['hh']) + ':' + time['mm'] + ' ' + time['a'] ; - }, - - selectedOpeningTime24Hour: function() { - return convertTo24Hour(this.selectedOpeningTime); - }, - - selectedClosingTimeName: function() { - var time = this.selectedClosingTime - return parseInt(time['hh']) + ':' + time['mm'] + ' ' + time['a']; - }, - - selectedClosingTime24Hour: function() { - return convertTo24Hour(this.selectedClosingTime); - } - - }, - - methods: { - addDay: function() { - this.addedDays.push( { - dayName: this.selectedDayName, - openingTimeName: this.selectedOpeningTimeName, - closingTimeName: this.selectedClosingTimeName, - - // OpeningHoursSpecification: - closes: this.selectedClosingTime24Hour, - dayOfWeek: this.selectedDaySchemaDotOrg, - opens: this.selectedOpeningTime24Hour, - } ); - - this.openingHoursSpecifications = - this.addedDays.map( openingHoursSpecification ); - }, - } - }) - } -}) From 1e5872edfd35dfbf9a782d33886fc714af76ead2 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 16 Aug 2022 18:14:33 +0100 Subject: [PATCH 23/32] delete old comments --- .../controllers/opening_times_controller.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index 2071f41c5..b9622a564 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -1,18 +1,8 @@ import { Controller } from "@hotwired/stimulus"; -/* - * TODO - * - * Form validation - possible to submit times as "" - Neither JS prevents this nor does the model validate it. - * - * UI Stuff - A bit of padding between the form and the list would be nice - * - * Full days - * - * https://schema.org/OpeningHoursSpecification - * - * */ +// stateless helper functions +// https://schema.org/OpeningHoursSpecification const openingHoursSpec = (day, open, close) => ({ "@type": "OpeningHoursSpecification", dayOfWeek: `http://schema.org/${day}`, From 94f58290a81928c90de310fed222fc26cbfd0e92 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 30 Aug 2022 09:55:48 +0100 Subject: [PATCH 24/32] fix memory leak from non-deleted nodes --- .../controllers/opening_times_controller.js | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index b9622a564..4d8448710 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -90,11 +90,9 @@ export default class extends Controller { } updateList() { - // clear the list - this.listTarget.innerHTML = ""; - // generate new HTML from data - this.dataValue - .map((openSpec) => { + this.listTarget.replaceChildren( + // This function takes separate params so we map and spread the data array. + ...this.dataValue.map((openSpec) => { const li = element("li", openingHoursEnglish(openSpec), [ "list-group-item", "d-flex", @@ -111,11 +109,8 @@ export default class extends Controller { }; li.appendChild(btn); return li; - }) - // insert into DOM - .forEach((li) => { - this.listTarget.append(li); - }); + }), + ); } allDay(event) { From 7efe7a2f511b2dc77a03aaed15a84baf3a8e7069 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 30 Aug 2022 10:25:02 +0100 Subject: [PATCH 25/32] fix broken opening times input layout on laptop --- app/views/admin/partners/_form.html.erb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/admin/partners/_form.html.erb b/app/views/admin/partners/_form.html.erb index 9f79a33a2..29557d309 100644 --- a/app/views/admin/partners/_form.html.erb +++ b/app/views/admin/partners/_form.html.erb @@ -111,7 +111,7 @@
-
+

Opening times

    @@ -144,7 +144,7 @@ <%= f.text_area :opening_times, data: { opening_times_target: "textarea" }, hidden: true %>
-
+

Tags

Does this Partner provide any of the following things?

From 346ab0de8c6c979cad34c749aa686fd1d82baeff Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 30 Aug 2022 11:42:36 +0100 Subject: [PATCH 26/32] move all day option to end of opening times inputs --- app/views/admin/partners/_form.html.erb | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/views/admin/partners/_form.html.erb b/app/views/admin/partners/_form.html.erb index 29557d309..27f9f3ac0 100644 --- a/app/views/admin/partners/_form.html.erb +++ b/app/views/admin/partners/_form.html.erb @@ -129,15 +129,15 @@ - +
From 0953fdeb1644be308b17b40d8acbae949f70e769 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 30 Aug 2022 12:04:18 +0100 Subject: [PATCH 27/32] reset opening times form based on last user interaction --- .../controllers/opening_times_controller.js | 46 ++++++++++--------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index 4d8448710..115597d2b 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -1,6 +1,14 @@ import { Controller } from "@hotwired/stimulus"; -// stateless helper functions +const dayOrder = [ + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + "Sunday", +]; // https://schema.org/OpeningHoursSpecification const openingHoursSpec = (day, open, close) => ({ @@ -16,17 +24,8 @@ const openingHoursObj = (openSpec) => ({ close: openSpec.closes.slice(0, 5), }); -const sortedOpeningHours = (openSpecArray) => { - const dayOrder = [ - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday", - "Sunday", - ]; - const sorted = [...openSpecArray] +const sortedOpeningHours = (openSpecArray) => + [...openSpecArray] .sort( (a, b) => parseFloat(openingHoursObj(a).open.replace(":", ".")) - @@ -37,7 +36,11 @@ const sortedOpeningHours = (openSpecArray) => { dayOrder.indexOf(openingHoursObj(a).day) - dayOrder.indexOf(openingHoursObj(b).day), ); - return sorted; + +const nextDay = (day) => { + const index = + dayOrder.indexOf(day) + 1 < dayOrder.length ? dayOrder.indexOf(day) + 1 : 0; + return dayOrder[index]; }; const openingHoursEnglish = (openSpec) => { @@ -71,13 +74,14 @@ export default class extends Controller { this.resetForm(); } - resetForm() { - this.dayTarget.value = "Monday"; - this.allDayTarget.checked = false; - this.openTarget.value = "00:00"; - this.closeTarget.value = "00:00"; - this.openTarget.disabled = false; - this.closeTarget.disabled = false; + resetForm(day = "Monday", open = "00:00", close = "00:00") { + const allDay = open === "00:00" && close === "23:59"; + this.dayTarget.value = day; + this.allDayTarget.checked = allDay; + this.openTarget.value = open; + this.closeTarget.value = close; + this.openTarget.disabled = allDay; + this.closeTarget.disabled = allDay; } dataValueChanged() { @@ -132,7 +136,7 @@ export default class extends Controller { const day = this.dayTarget.value; const open = this.openTarget.value; const close = this.closeTarget.value; - this.resetForm(); + this.resetForm(nextDay(day), open, close); this.dataValue = sortedOpeningHours([ ...this.dataValue, openingHoursSpec(day, open, close), From 24e6a33f07c6157f1f3ee7d7eca90c26d3491600 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 30 Aug 2022 12:23:31 +0100 Subject: [PATCH 28/32] add a disconnect method to opening_times_controller --- app/javascript/controllers/opening_times_controller.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/javascript/controllers/opening_times_controller.js b/app/javascript/controllers/opening_times_controller.js index 115597d2b..9ce435006 100644 --- a/app/javascript/controllers/opening_times_controller.js +++ b/app/javascript/controllers/opening_times_controller.js @@ -74,6 +74,12 @@ export default class extends Controller { this.resetForm(); } + disconnect() { + // clear nodes & eventListeners which don't have stimulus attributes + // This might be unnecessary + this.listTarget.replaceChildren(); + } + resetForm(day = "Monday", open = "00:00", close = "00:00") { const allDay = open === "00:00" && close === "23:59"; this.dayTarget.value = day; From acfe7adea0ff8f59972109236698fbd1ab53cc25 Mon Sep 17 00:00:00 2001 From: aaaaargZombies Date: Tue, 30 Aug 2022 12:34:34 +0100 Subject: [PATCH 29/32] align text in opening time inputs --- app/views/admin/partners/_form.html.erb | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/views/admin/partners/_form.html.erb b/app/views/admin/partners/_form.html.erb index 27f9f3ac0..a27bab6e9 100644 --- a/app/views/admin/partners/_form.html.erb +++ b/app/views/admin/partners/_form.html.erb @@ -118,7 +118,7 @@
-