f360c82 fix: Toggle states for all buttons ok · gordon

M internal/gotemplate/models/html/fragments/containerlist.gohtml +1 -1

@@ -1,4 +1,4 @@
1		-	<div class="flex flex-col p-4">
	1	+	<div class="flex flex-col p-4" hx-boost="true">
2	2		<h1 class="text-lg md:text-xl font-bold">Containers</h1>
3	3		<table class="p-4 border-t-2" hx-ext="response-targets">
4	4		<!-- <thead>

@@ -1,4 +1,4 @@
1	-	<div class="flex flex-col p-4">	1	+	<div class="flex flex-col p-4" hx-boost="true">
2		<h1 class="text-lg md:text-xl font-bold">Containers</h1>	2		<h1 class="text-lg md:text-xl font-bold">Containers</h1>
3		<table class="p-4 border-t-2" hx-ext="response-targets">	3		<table class="p-4 border-t-2" hx-ext="response-targets">
4		<!-- <thead>	4		<!-- <thead>

M internal/gotemplate/models/html/fragments/createcontainer.gohtml +1 -0


@@ -136,6 +136,7 @@
136	136		<input
137	137		type="submit"
138	138		value="Create"
	139	+	id="create-container-submit"
139	140		class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
140	141		/>
141	142		</form>


@@ -136,6 +136,7 @@
136	<input	136		<input
137	type="submit"	137		type="submit"
138	value="Create"	138		value="Create"
		139	+	id="create-container-submit"
139	class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"	140		class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
140	/>	141		/>
141	</form>	142		</form>

M internal/gotemplate/models/html/fragments/editcontainer.gohtml +1 -0


@@ -11,6 +11,7 @@
11	11		<input
12	12		type="submit"
13	13		value="Save"
	14	+	id="save-button-{{.ID}}"
14	15		class="bg-gordonmascot-mblue text-white px-4 py-2 rounded-md md:text-xl hover:bg-gordonmascot-hblue"
15	16		/>
16	17		</form>


@@ -11,6 +11,7 @@
11	<input	11		<input
12	type="submit"	12		type="submit"
13	value="Save"	13		value="Save"
		14	+	id="save-button-{{.ID}}"
14	class="bg-gordonmascot-mblue text-white px-4 py-2 rounded-md md:text-xl hover:bg-gordonmascot-hblue"	15		class="bg-gordonmascot-mblue text-white px-4 py-2 rounded-md md:text-xl hover:bg-gordonmascot-hblue"
15	/>	16		/>
16	</form>	17		</form>

M internal/gotemplate/models/html/fragments/imagelist.gohtml +1 -0


@@ -7,6 +7,7 @@
7	7		hx-get="/htmx/upload-image"
8	8		hx-target="#upload-image"
9	9		hx-swap="innerHTML"
	10	+	data-active="false"
10	11		class="py-1 px-2 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded"
11	12		>
12	13		<span class="iconoir-upload text-xl align-middle"></span>


@@ -7,6 +7,7 @@
7	hx-get="/htmx/upload-image"	7		hx-get="/htmx/upload-image"
8	hx-target="#upload-image"	8		hx-target="#upload-image"
9	hx-swap="innerHTML"	9		hx-swap="innerHTML"
		10	+	data-active="false"
10	class="py-1 px-2 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded"	11		class="py-1 px-2 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded"
11	>	12		>
12	<span class="iconoir-upload text-xl align-middle"></span>	13		<span class="iconoir-upload text-xl align-middle"></span>

M internal/webui/public/assets/js/custom.js +13 -3


@@ -36,12 +36,22 @@ function toggleButtonState(event) {
36	36		}
37	37		}
38	38
39		-	// Attach event listeners to buttons
	39	+	// Attach event listeners to buttons that needs to toggle state
40	40		document.body.addEventListener("htmx:afterSwap", function (event) {
41		-	const buttons = document.querySelectorAll('[id^="start-button-"], [id^="stop-button-"], [id^="edit-button-"], [id^="remove-button-img-"], [id^="add-button-img-"]');
	41	+	const buttons = document.querySelectorAll('[id^="edit-button-"], [id^="add-button-img-"]', '[id^="upload-button"]');
42	42		buttons.forEach(button => {
43		-	console.log("button: ", button);
44	43		button.addEventListener('click', toggleButtonState);
45	44		});
46	45		});
47	46
	47	+	// Attach event listeners to buttons that needs to set a full location reload
	48	+	document.body.addEventListener("htmx:afterOnLoad", function (event) {
	49	+	const buttons = document.querySelectorAll('[id^="start-button-"], [id^="stop-button-"], [id^="remove-button-img-"], [id^="create-container-submit"], [id^="save-button-"]');
	50	+	buttons.forEach(button => {
	51	+	button.addEventListener('click', function(event) {
	52	+	setTimeout(function() {
	53	+	location.reload();
	54	+	}, 5000);
	55	+	});
	56	+	});
	57	+	});⏎̸

   }
 }
-// Attach event listeners to buttons
+// Attach event listeners to buttons that needs to toggle state
 document.body.addEventListener("htmx:afterSwap", function (event) {
-  const buttons = document.querySelectorAll('[id^="start-button-"], [id^="stop-button-"], [id^="edit-button-"], [id^="remove-button-img-"], [id^="add-button-img-"]');
+  const buttons = document.querySelectorAll('[id^="edit-button-"], [id^="add-button-img-"]', '[id^="upload-button"]');
   buttons.forEach(button => {
-    console.log("button: ", button);
     button.addEventListener('click', toggleButtonState);
   });
 });
+// Attach event listeners to buttons that needs to set a full location reload
+document.body.addEventListener("htmx:afterOnLoad", function (event) {
+ const buttons = document.querySelectorAll('[id^="start-button-"], [id^="stop-button-"], [id^="remove-button-img-"], [id^="create-container-submit"], [id^="save-button-"]');
+   buttons.forEach(button => {
+    button.addEventListener('click', function(event) {
+      setTimeout(function() {
+      location.reload();
+      }, 5000);
+    });
+  });
+});⏎̸