wip: continue implementation

assets/app.js

@@ -7,4 +7,5 @@ htmx.config.includeIndicatorStyles = false
 htmx.config.historyEnabled = false
 htmx.config.historyCacheSize = 0
 htmx.config.allowScriptTags = false
-htmx.config.withCredentials = true
+htmx.config.withCredentials = true
+htmx.config.selfRequestsOnly = false

assets/controllers/availabilities_controller.js

@@ -1,5 +0,0 @@
-import { Controller} from '@hotwired/stimulus'
-
-export default class extends Controller {
-    static targets = ['field']
-}

assets/controllers/booking_controller.js

@@ -0,0 +1,29 @@
+import { Controller} from '@hotwired/stimulus'
+
+export default class extends Controller {
+    static targets = ['field']
+    static values = { availabilities: Object }
+
+    toggle(event) {
+        let field = event.target
+        let id = field.value
+        let availabilities = this.availabilitiesValue
+        if (field.checked) {
+            availabilities[id].available--
+        } else {
+            availabilities[id].available++
+        }
+        field.disabled = 0 >= availabilities[id].available
+        field.classList.toggle('cursor-not-allowed', field.disabled)
+        this.availabilitiesValue = availabilities
+    }
+
+    availabilitiesValueChanged(availabilities) {
+        this.fieldTargets.forEach((field) => {
+            let id = field.value
+            if (false === field.checked && 0 >= availabilities[id].available) {
+                field.disabled = true
+            }
+        })
+    }
+}

assets/controllers/toast_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus'
+import Toastify from 'toastify-js'
+
+export default class extends Controller {
+
+    static values = { text: String, class: String }
+
+    connect() {
+        Toastify({
+            duration: 5000,
+            text: this.textValue,
+            gravity: 'top',
+            position: 'right',
+            className: this.classValue,
+            close: true,
+        }).showToast()
+    }
+}

assets/controllers/tooltip_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from '@hotwired/stimulus'
+import tippy from 'tippy.js'
+
+export default class extends Controller {
+    static targets = ['trigger', 'template']
+    static values = { content: String, placement: String }
+
+    connect() {
+        let options, element
+        let placement = this.placementValue ? this.placementValue : 'top'
+        if (this.hasTemplateTarget) {
+            options = {
+                content: this.templateTarget.innerHTML,
+                placement,
+                touch: true,
+                trigger: 'click',
+                allowHTML: true,
+                interactive: true,
+            }
+        } else {
+            options = {
+                content: this.contentValue,
+                placement,
+                touch: false,
+                allowHTML: true,
+                interactive: true,
+            }
+        }
+        if (this.hasTriggerTarget) {
+            element = this.triggerTarget
+        } else {
+            element = this.element
+        }
+        tippy(element, options)
+    }
+}

assets/styles/_components.css

@@ -1,5 +1,5 @@
 @import "components/forms.css";
 @import "components/button.css";
 @import "components/menu.css";
-/*@import "components/toast.css";*/
-/*@import "components/tooltip.css";*/
+@import "components/toast.css";
+@import "components/tooltip.css";