Need help writing a pin to a text field in my database. The below code generates a 10 key pin pad for employees to enter their pin which then has follow on workflows to clock in/clock out. 2 questions:
1- how can I modify the code to write to the field
2- how do i modify the code to incorporate actions
You can use AlpineJS to bind your “data” variable to the code. Also make sure you add the right actions in the action section just under your “content”, then specify them in the code as well.
However, I’m not sure why you don’t just use a number entry and normal Glide buttons to do this.
Do you have an example of this? I’ve searched and haven’t found a good way to simply use glide buttons an dhave it formatted. i"ll give this a try.
What do you mean by “have it formatted”?
I think you also participated in that thread.
When I place a number entry component on the page, no number pad pops up. This application will have the clock in page displayed on a tablet. Unless the number pad pops up when published and using the actual tablet?
It should pop up when you click on the entry itself on the tablet.
1 Like
Worked like a charm on the tablet. If you do have a moment though, can you share how I would go about modifying the code? I’d still like to learn how to have the custom component code interact directly with a field in the database.
It kind of depends on your use case. Let’s say for this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Set Standard Hours</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.5/cdn.min.js"
defer
></script>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.switch-input {
width: 3rem;
height: 1.5rem;
}
.dot {
top: 0.125rem;
left: 0.125rem;
width: 1.25rem;
height: 1.25rem;
}
.dot-inside-open {
transform: translateX(1.5rem);
}
</style>
</head>
<body class="bg-gray-100 p-4 sm:p-8">
<div
x-data="businessHours()"
x-init="initializeHours"
class="max-w-2xl mx-auto bg-white p-6 rounded-lg shadow-md"
>
<h1 class="text-2xl font-bold text-gray-800 mb-6">
Set Standard Hours
</h1>
<p class="text-gray-600 mb-6">
Configure the standard hours of operation for this
location.
</p>
<div class="space-y-4">
<template x-for="(day, index) in days" :key="index">
<div class="flex items-center space-x-4">
<div
class="w-28 font-semibold text-gray-700"
x-text="day"
></div>
<label
class="inline-flex items-center cursor-pointer"
>
<div class="relative">
<input
type="checkbox"
x-model="hours[day].isOpen"
class="sr-only"
@change="updateJSON"
/>
<div
class="switch-input rounded-full shadow-inner transition-colors duration-200 ease-in-out"
:class="{ 'bg-blue-600': hours[day].isOpen, 'bg-gray-200': !hours[day].isOpen }"
></div>
<div
class="dot dot-inside bg-white rounded-full shadow absolute transition-transform duration-200 ease-in-out"
:class="{ 'dot-inside-open': hours[day].isOpen }"
></div>
</div>
<span
class="ml-3 text-gray-700"
x-text="hours[day].isOpen ? 'Open' : 'Closed'"
></span>
</label>
<template x-if="hours[day].isOpen">
<div class="flex items-center space-x-2">
<select
x-model="hours[day].open"
class="form-select w-24 border-gray-300 rounded-md shadow-sm"
@change="updateJSON"
>
<option value="">Select</option>
<template
x-for="time in timeOptions"
:key="time"
>
<option
:value="time"
x-text="time"
></option>
</template>
</select>
<span class="text-gray-700">TO</span>
<select
x-model="hours[day].close"
class="form-select w-24 border-gray-300 rounded-md shadow-sm"
@change="updateJSON"
>
<option value="">Select</option>
<template
x-for="time in timeOptions"
:key="time"
>
<option
:value="time"
x-text="time"
></option>
</template>
</select>
</div>
</template>
</div>
</template>
</div>
</div>
<script>
function businessHours() {
const days = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
let hours = days.reduce((acc, day) => {
acc[day] = { isOpen: false, open: "", close: "" };
return acc;
}, {});
const timeOptions = generateTimeOptions();
function generateTimeOptions() {
const options = [];
for (let hour = 0; hour < 24; hour++) {
for (
let minute = 0;
minute < 60;
minute += 15
) {
const time = new Date(
2000,
0,
1,
hour,
minute
);
options.push(
time.toLocaleTimeString("en-US", {
hour: "numeric",
minute: "2-digit",
hour12: true,
})
);
}
}
return options;
}
function initializeHours() {
if (S && S.open) {
try {
const savedHours = JSON.parse(S.open);
for (const day in savedHours) {
if (hours.hasOwnProperty(day)) {
hours[day] = savedHours[day];
}
}
} catch (error) {
console.error(
"Error parsing saved hours:",
error
);
}
}
}
function updateJSON() {
if (S) {
S.open = JSON.stringify(hours);
}
}
return {
days,
hours,
timeOptions,
initializeHours,
updateJSON,
};
}
</script>
</body>
</html>
I update the field using the updateJSON function, referencing the variable name and set the component-saved variable value to it.
In the case above, I was having to generate a JSON before saving. On use cases where a direct value can be written, it can be a bit easier.
2 Likes
Ok. in this case, it would be writing directly to a text or number field. so it may be alittle easier.
1 Like
This is insanely impressive btw. Awesome work!
1 Like
I’m trying to do it every weekend to post haha. It’s been super fun.
1 Like
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.