Refactor opening times picker with stimulus controller

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/calendar-form.js"

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)

app/javascript/controllers/opening_times_controller.js

@@ -0,0 +1,144 @@
+import { Controller } from "@hotwired/stimulus";
+import isEqual from "lodash/isEqual";
+import orderBy from "lodash/orderBy";
+
+const dayOrder = [
+	"Monday",
+	"Tuesday",
+	"Wednesday",
+	"Thursday",
+	"Friday",
+	"Saturday",
+	"Sunday",
+];
+
+// https://schema.org/OpeningHoursSpecification
+const openingHoursSpec = (day, open, close) => ({
+	"@type": "OpeningHoursSpecification",
+	dayOfWeek: `http://schema.org/${day}`,
+	opens: `${open}:00`,
+	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 sortedOpeningHours = (openSpecArray) =>
+	orderBy(openSpecArray, [
+		(el) => dayOrder.indexOf(openingHoursObj(el).day),
+		(el) => parseFloat(openingHoursObj(el).open.replace(":", ".")),
+	]);
+
+const nextDay = (day) => {
+	const index =
+		dayOrder.indexOf(day) + 1 < dayOrder.length ? dayOrder.indexOf(day) + 1 : 0;
+	return dayOrder[index];
+};
+
+const openingHoursEnglish = (openSpec) => {
+	const { day, open, close } = openingHoursObj(openSpec);
+	return open === "00:00" && close === "23:59"
+		? `${day} all day`
+		: `${day} from ${open} to ${close}`;
+};
+
+const element = (type, content = "", classes = []) => {
+	const el = document.createElement(type);
+	el.innerHTML = content;
+	classes.forEach((className) => {
+		el.classList.add(className);
+	});
+	return el;
+};
+
+// Connects to data-controller="opening-times"
+export default class extends Controller {
+	static values = { data: Array };
+	static targets = ["textarea", "list", "day", "allDay", "open", "close"];
+
+	connect() {
+		this.dataValue = sortedOpeningHours(this.dataValue);
+		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;
+		this.allDayTarget.checked = allDay;
+		this.openTarget.value = open;
+		this.closeTarget.value = close;
+		this.openTarget.disabled = allDay;
+		this.closeTarget.disabled = allDay;
+	}
+
+	dataValueChanged() {
+		this.updateTextarea();
+		this.updateList();
+	}
+
+	updateTextarea() {
+		this.textareaTarget.value = JSON.stringify(this.dataValue);
+	}
+
+	updateList() {
+		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",
+					"align-items-center",
+					"justify-content-between",
+				]);
+				const btn = element("button", "Remove", [
+					"btn",
+					"btn-danger",
+					"btn-sm",
+				]);
+				btn.onclick = () => {
+					// remove opening time
+					this.dataValue = [...this.dataValue].filter(
+						(el) => !isEqual(el, openSpec),
+					);
+				};
+				li.appendChild(btn);
+				return li;
+			}),
+		);
+	}
+
+	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.dayTarget.value;
+		const open = this.openTarget.value;
+		const close = this.closeTarget.value;
+		this.resetForm(nextDay(day), open, close);
+		this.dataValue = sortedOpeningHours([
+			...this.dataValue,
+			openingHoursSpec(day, open, close),
+		]);
+	}
+}

app/views/admin/partners/_form.html.erb

@@ -109,33 +109,11 @@
     </div>
     <hr>
     <div class="row">
-      <div class="col-lg-6 col-md-12">
+      <div class="col-lg-8 col-md-12">
         <h2>Opening times</h2>
-        <div id="opening-times" class="opening-times" data="<%= @partner.opening_times.presence || [] %>">
-
-          <div class="added-days">
-            <added-days :list="addedDays"></added-days>
-          </div>
-
-          <div class="d-flex flex-row align-items-center justify-content-sm-between flex-wrap">
-            <select v-model="selectedDay" class="form-control">
-              <option v-for="day in days" v-bind:value="day.value">
-              {{ day.name }}
-              </option>
-            </select>
-
-            <vue-timepicker format="hh:mm a" input-width="8em" v-model="selectedOpeningTime"></vue-timepicker>
-
-            <vue-timepicker format="hh:mm a" input-width="8em" v-model="selectedClosingTime"></vue-timepicker>
-
-            <button type="button" class="btn btn-primary btn-sm" @click="addDay">Add these hours</button>
-          </div>
-
-          <%= f.text_area :opening_times, value: '{{ $data.openingHoursSpecifications }}', hidden:true %>
-        </div>
-
+        <%= render 'opening_times', f: f %>
       </div>
-      <div class="col-lg-6 col-md-12 tags">
+      <div class="col-lg-4 col-md-12 tags">
         <h2>Tags</h2>
         <p>Does this Partner provide any of the following things?</p>