Fix radio and select fields

Author: faisalnjs

frontend/pages/create.ejs

@@ -13,15 +13,24 @@
 	<div class="checkbox" change="cms">|||</div>
 	<% } else if (field.type === 'radio') { %>
 	<div class="radioOptions">
+		<% if (!field.required) { %>
+		<div class="radioOption">
+			<input type="radio" id="none" name="none" value="">
+			<label for="none">None</label>
+		</div>
+		<% } %>
 		<% (field.options || []).forEach(option => { %>
 		<div class="radioOption">
-			<input type="radio" id="<%= option.value %>" name="<%= option.value %>" value="<%= option.label %>">
-			<label for="<%= option.value %>"><%= option.label %></label>
+			<input type="radio" id="<%= field.id %>-<%= option.value %>" name="<%= option.value %>" value="<%= option.value %>">
+			<label for="<%= field.id %>-<%= option.value %>"><%= option.label %></label>
 		</div>
 		<% }) %>
 	</div>
 	<% } else if (field.type === 'select') { %>
-	<select>
+	<select id="<%= field.id %>Select">
+		<% if (!field.required) { %>
+		<option value="">None</option>
+		<% } %>
 		<% (field.options || []).forEach(option => { %>
 		<option value="<%= option.value %>"><%= option.label %></option>
 		<% }) %>

frontend/pages/user.ejs

@@ -2,7 +2,7 @@
 <img src="<%= tenant.logo %>" alt="<%= tenant.name %>">
 <h1>
 	<% if (tenant.auth && tenant.auth.enabled) { %>
-	Hey, <%= session[vars.name] || session[vars.userId] %>!
+	Welcome, <%= session[vars.name] || session[vars.userId] %>!
 	<% } else { %>
 	<%= tenant.name %> commissions
 	<% } %>

frontend/public/scripts.js

@@ -19,7 +19,7 @@ function anim_out() {
 window.onload = function () {
     anim_in();
     document.querySelectorAll('.inputField').forEach(field => {
-        field.querySelectorAll('input, textarea').forEach(input => {
+        field.querySelectorAll('input:not([type="radio"]), textarea').forEach(input => {
             if (localStorage.getItem(field.id)) {
                 input.value = localStorage.getItem(field.id);
                 document.querySelector('.fixed2').classList.add('visible');
@@ -39,6 +39,26 @@ window.onload = function () {
                 }, 2000);
             };
         });
+        field.querySelectorAll('.radioOption').forEach(radio => {
+            const input = radio.querySelector('input[type="radio"]');
+            if (localStorage.getItem(field.id) === input.value) {
+                field.querySelectorAll('.radioOption input[type="radio"]').forEach(r => r.checked = false);
+                input.checked = true;
+                document.querySelector('.fixed2').classList.add('visible');
+                setTimeout(() => {
+                    document.querySelector('.fixed2').classList.remove('visible');
+                }, 2000);
+            };
+        });
+        field.querySelectorAll('select').forEach(select => {
+            if (localStorage.getItem(field.id)) {
+                select.value = localStorage.getItem(field.id);
+                document.querySelector('.fixed2').classList.add('visible');
+                setTimeout(() => {
+                    document.querySelector('.fixed2').classList.remove('visible');
+                }, 2000);
+            };
+        });
     });
 };
 
@@ -67,6 +87,17 @@ function next() {
                         shake(currentField);
                         return;
                     };
+                } else if (input.type === 'radio') {
+                    const radios = currentField.querySelectorAll('input[type="radio"]');
+                    var checked = false;
+                    radios.forEach(radio => {
+                        if (radio.checked) checked = true;
+                    });
+                    if (!checked) {
+                        input.focus();
+                        shake(currentField);
+                        return;
+                    };
                 } else {
                     if (!input.value.trim()) {
                         input.focus();
@@ -117,36 +148,42 @@ function back() {
 
 function saveChange(key, value) {
     localStorage.setItem(key, value);
+    console.log(key, value)
     document.querySelector('.fixed2').classList.add('visible');
     setTimeout(() => {
         document.querySelector('.fixed2').classList.remove('visible');
     }, 2000);
 };
 
 document.querySelectorAll('.inputField').forEach(field => {
-    field.querySelectorAll('input, textarea').forEach(input => {
+    field.querySelectorAll('input:not([type="radio"]), textarea').forEach(input => {
         input.addEventListener('keydown', function (event) {
             if (event.key === 'Enter') {
                 event.preventDefault();
                 next();
             };
-            saveChange(field.id, input.value);
+            setTimeout(() => saveChange(field.id, input.value), 100);
         });
     });
     field.querySelectorAll('.checkbox').forEach(checkbox => {
         checkbox.addEventListener('click', function () {
             checkbox.classList.toggle('checked');
             const input = field.querySelector('input[type="checkbox"]');
             input.checked = !input.checked;
-            saveChange(field.id, input.checked);
+            setTimeout(() => saveChange(field.id, input.checked), 100);
         });
     });
     field.querySelectorAll('.radioOption').forEach(radio => {
-        radio.addEventListener('click', function () {
+        radio.addEventListener('change', function () {
             field.querySelectorAll('.radioOption input[type="radio"]').forEach(r => r.checked = false);
             const input = radio.querySelector('input[type="radio"]');
             input.checked = true;
-            saveChange(field.id, input.value);
+            setTimeout(() => saveChange(field.id, input.value), 100);
+        });
+    });
+    field.querySelectorAll('select').forEach(select => {
+        select.addEventListener('change', function () {
+            setTimeout(() => saveChange(field.id, select.selectedOptions[0].value), 100);
         });
     });
 });
@@ -173,6 +210,11 @@ async function create() {
         if (input) {
             if (input.type === 'checkbox') {
                 data[field.id] = input.checked;
+            } if (input.type === 'radio') {
+                const radios = field.querySelectorAll('input[type="radio"]');
+                radios.forEach(radio => {
+                    if (radio.checked) data[field.id] = radio.value;
+                });
             } else {
                 data[field.id] = input.value;
             };

frontend/public/styles.css

@@ -173,6 +173,10 @@ input[type="radio"]:checked {
 		display: flex;
 		align-items: center;
 		gap: 5px;
+
+		label {
+			cursor: pointer;
+		}
 	}
 }
 

index.js

@@ -156,12 +156,12 @@ app.post('/create', async (req, res) => {
     role: getUserRole(req.session) || 'user'
   } : {};
   if (returnHandler && typeof returnHandler === 'function') {
-    // try {
-    //   await returnHandler(data);
-    // } catch (error) {
-      // console.error('Error in handler function:', error);
+    try {
+      await returnHandler(data);
+    } catch (error) {
+      console.error('Error in handler function:', error);
       return res.status(500).json({ status: 'error', message: 'An error occurred while processing your request. Please try again later.' });
-    // };
+    };
   };
   res.status(200).json({ status: 'success', message: 'Your commission was created successfully.' });
 });