mirror of
https://gitlab.com/sarlink/kyc.git
synced 2025-02-22 09:12:05 +00:00
[feat] Added support for multiple MAC addresses
This commit is contained in:
parent
39b6b50cb9
commit
98f7382e56
GPG Key ID:
BB7D370708288E23
@ -776,6 +776,33 @@ html {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
transition-duration: 200ms;
|
||||
height: 1.25rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
padding-left: 0.563rem;
|
||||
padding-right: 0.563rem;
|
||||
border-radius: var(--rounded-badge, 1.9rem);
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
|
||||
--tw-text-opacity: 1;
|
||||
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
@ -1282,6 +1309,20 @@ html {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item) {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex-shrink: 1;
|
||||
-webkit-appearance: none;
|
||||
@ -1307,6 +1348,69 @@ html {
|
||||
margin-inline-end: -1rem;
|
||||
}
|
||||
|
||||
.join {
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
border-radius: var(--rounded-btn, 0.5rem);
|
||||
}
|
||||
|
||||
.join :where(.join-item) {
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
border-end-start-radius: 0;
|
||||
border-start-start-radius: 0;
|
||||
}
|
||||
|
||||
.join .join-item:not(:first-child):not(:last-child),
|
||||
.join *:not(:first-child):not(:last-child) .join-item {
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
border-end-start-radius: 0;
|
||||
border-start-start-radius: 0;
|
||||
}
|
||||
|
||||
.join .join-item:first-child:not(:last-child),
|
||||
.join *:first-child:not(:last-child) .join-item {
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
|
||||
.join .dropdown .join-item:first-child:not(:last-child),
|
||||
.join *:first-child:not(:last-child) .dropdown .join-item {
|
||||
border-start-end-radius: inherit;
|
||||
border-end-end-radius: inherit;
|
||||
}
|
||||
|
||||
.join :where(.join-item:first-child:not(:last-child)),
|
||||
.join :where(*:first-child:not(:last-child) .join-item) {
|
||||
border-end-start-radius: inherit;
|
||||
border-start-start-radius: inherit;
|
||||
}
|
||||
|
||||
.join .join-item:last-child:not(:first-child),
|
||||
.join *:last-child:not(:first-child) .join-item {
|
||||
border-end-start-radius: 0;
|
||||
border-start-start-radius: 0;
|
||||
}
|
||||
|
||||
.join :where(.join-item:last-child:not(:first-child)),
|
||||
.join :where(*:last-child:not(:first-child) .join-item) {
|
||||
border-start-end-radius: inherit;
|
||||
border-end-end-radius: inherit;
|
||||
}
|
||||
|
||||
@supports not selector(:has(*)) {
|
||||
:where(.join *) {
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@supports selector(:has(*)) {
|
||||
:where(.join *:has(.join-item)) {
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
cursor: pointer;
|
||||
text-decoration-line: underline;
|
||||
@ -1320,6 +1424,10 @@ html {
|
||||
color: var(--fallback-bc,oklch(var(--bc)/0.3));
|
||||
}
|
||||
|
||||
:where(.menu li) .badge {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1333,6 +1441,40 @@ html {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 3rem;
|
||||
min-height: 3rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 2.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
line-height: 2;
|
||||
border-radius: var(--rounded-btn, 0.5rem);
|
||||
border-width: 1px;
|
||||
border-color: transparent;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
|
||||
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
|
||||
linear-gradient(135deg, currentColor 50%, transparent 50%);
|
||||
background-position: calc(100% - 20px) calc(1px + 50%),
|
||||
calc(100% - 16.1px) calc(1px + 50%);
|
||||
background-size: 4px 4px,
|
||||
4px 4px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.select[multiple] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.steps {
|
||||
display: inline-grid;
|
||||
grid-auto-flow: column;
|
||||
@ -1361,6 +1503,33 @@ html {
|
||||
--alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity)));
|
||||
--tw-text-opacity: 1;
|
||||
color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
|
||||
}
|
||||
|
||||
.badge-error {
|
||||
border-color: transparent;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity)));
|
||||
--tw-text-opacity: 1;
|
||||
color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
|
||||
}
|
||||
|
||||
.badge-outline.badge-secondary {
|
||||
--tw-text-opacity: 1;
|
||||
color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity)));
|
||||
}
|
||||
|
||||
.badge-outline.badge-error {
|
||||
--tw-text-opacity: 1;
|
||||
color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
|
||||
}
|
||||
|
||||
.btm-nav > *.disabled,
|
||||
.btm-nav > *[disabled] {
|
||||
pointer-events: none;
|
||||
@ -1422,6 +1591,10 @@ html {
|
||||
--btn-color: var(--fallback-in);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
--btn-color: var(--fallback-su);
|
||||
}
|
||||
|
||||
.btn-error {
|
||||
--btn-color: var(--fallback-er);
|
||||
}
|
||||
@ -1475,6 +1648,10 @@ html {
|
||||
--btn-color: var(--in);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
--btn-color: var(--su);
|
||||
}
|
||||
|
||||
.btn-error {
|
||||
--btn-color: var(--er);
|
||||
}
|
||||
@ -1486,6 +1663,12 @@ html {
|
||||
outline-color: var(--fallback-in,oklch(var(--in)/1));
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
--tw-text-opacity: 1;
|
||||
color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
|
||||
outline-color: var(--fallback-su,oklch(var(--su)/1));
|
||||
}
|
||||
|
||||
.btn-error {
|
||||
--tw-text-opacity: 1;
|
||||
color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
|
||||
@ -2001,6 +2184,16 @@ details.collapse summary::-webkit-details-marker {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
.join > :where(*:not(:first-child)) {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
margin-inline-start: -1px;
|
||||
}
|
||||
|
||||
.join-item:focus {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.link:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
@ -2106,6 +2299,55 @@ details.collapse summary::-webkit-details-marker {
|
||||
}
|
||||
}
|
||||
|
||||
.select-bordered {
|
||||
border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
|
||||
}
|
||||
|
||||
.select:focus {
|
||||
box-shadow: none;
|
||||
border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
|
||||
outline-style: solid;
|
||||
outline-width: 2px;
|
||||
outline-offset: 2px;
|
||||
outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
|
||||
}
|
||||
|
||||
.select-disabled,
|
||||
.select:disabled,
|
||||
.select[disabled] {
|
||||
cursor: not-allowed;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
|
||||
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
|
||||
--tw-text-opacity: 0.2;
|
||||
}
|
||||
|
||||
.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder {
|
||||
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
|
||||
--tw-placeholder-opacity: 0.2;
|
||||
}
|
||||
|
||||
.select-disabled::placeholder,
|
||||
.select:disabled::placeholder,
|
||||
.select[disabled]::placeholder {
|
||||
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
|
||||
--tw-placeholder-opacity: 0.2;
|
||||
}
|
||||
|
||||
.select-multiple,
|
||||
.select[multiple],
|
||||
.select[size].select:not([size="1"]) {
|
||||
background-image: none;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .select {
|
||||
background-position: calc(0% + 12px) calc(1px + 50%),
|
||||
calc(0% + 16px) calc(1px + 50%);
|
||||
}
|
||||
|
||||
@keyframes skeleton {
|
||||
from {
|
||||
background-position: 150%;
|
||||
@ -2258,6 +2500,78 @@ details.collapse summary::-webkit-details-marker {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item) {
|
||||
bottom: auto;
|
||||
inset-inline-end: 0px;
|
||||
inset-inline-start: auto;
|
||||
top: 0px;
|
||||
--tw-translate-y: -50%;
|
||||
--tw-translate-x: 50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
:is([dir="rtl"] .indicator :where(.indicator-item)) {
|
||||
--tw-translate-x: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item.indicator-start) {
|
||||
inset-inline-end: auto;
|
||||
inset-inline-start: 0px;
|
||||
--tw-translate-x: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
:is([dir="rtl"] .indicator :where(.indicator-item.indicator-start)) {
|
||||
--tw-translate-x: 50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item.indicator-center) {
|
||||
inset-inline-end: 50%;
|
||||
inset-inline-start: 50%;
|
||||
--tw-translate-x: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
:is([dir="rtl"] .indicator :where(.indicator-item.indicator-center)) {
|
||||
--tw-translate-x: 50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item.indicator-end) {
|
||||
inset-inline-end: 0px;
|
||||
inset-inline-start: auto;
|
||||
--tw-translate-x: 50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
:is([dir="rtl"] .indicator :where(.indicator-item.indicator-end)) {
|
||||
--tw-translate-x: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item.indicator-bottom) {
|
||||
bottom: 0px;
|
||||
top: auto;
|
||||
--tw-translate-y: 50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item.indicator-middle) {
|
||||
bottom: 50%;
|
||||
top: 50%;
|
||||
--tw-translate-y: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.indicator :where(.indicator-item.indicator-top) {
|
||||
bottom: auto;
|
||||
top: 0px;
|
||||
--tw-translate-y: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.join.join-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -2343,10 +2657,22 @@ details.collapse summary::-webkit-details-marker {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.h-6 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
@ -2375,10 +2701,26 @@ details.collapse summary::-webkit-details-marker {
|
||||
width: 80vw;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
@ -2387,6 +2729,10 @@ details.collapse summary::-webkit-details-marker {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-stretch {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.overflow-x-auto {
|
||||
overflow-x: auto;
|
||||
}
|
||||
@ -2466,4 +2812,8 @@ details.collapse summary::-webkit-details-marker {
|
||||
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.filter {
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
@ -9,14 +9,25 @@ function kebabToTitleCase(str) {
|
||||
async function sendInfo(filepath, details) {
|
||||
// const caption = `Customer Name: \`${customer_name}\`\nMAC Address: \`${mac_address}\`\nDevice Name: \`${device_name}\`\nRoaming: **${roaming ? "Yes" : "No"}**\nGaming: **${gaming ? "Yes" : "No"}**`
|
||||
let caption = "";
|
||||
let manualHandles = ["mac_address", "device_name"];
|
||||
for (const key in details) {
|
||||
if (manualHandles.includes(key)) continue;
|
||||
|
||||
if (key.startsWith("is")) {
|
||||
details[key] = details[key] ? "Yes" : "No"
|
||||
caption += `${kebabToTitleCase(key)}: **${details[key]}**\n`
|
||||
continue;
|
||||
}
|
||||
|
||||
caption += `${kebabToTitleCase(key)}: \`${details[key]}\`\n`
|
||||
}
|
||||
|
||||
let macAddresses = details["mac_address"].split(",");
|
||||
let deviceNames = details["device_name"].split(",");
|
||||
caption += "\n" + macAddresses.map((macAddress, index) => `- \`${macAddress}\` : \`${deviceNames[index]}\``).join("\n");
|
||||
|
||||
caption = caption.replace(/-/g, '\\-')
|
||||
|
||||
var formData = new FormData();
|
||||
formData.append("photo", fs.createReadStream(filepath));
|
||||
|
||||
|
||||
@ -7,43 +7,119 @@
|
||||
<link rel="shortcut icon" href="<%- branding.logo %>" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="/public/styles.css" />
|
||||
<script>
|
||||
const blacklistedChars = /\s/g;
|
||||
const blacklistedChars = /\s,/g;
|
||||
|
||||
let macAddressElements = [];
|
||||
|
||||
function saveMACAddresses() {
|
||||
localStorage.setItem("mac_address", macAddressElements.map(macAddressElement => document.getElementById(macAddressElement).value).join(","));
|
||||
document.getElementById("mac_address").value = localStorage.getItem("mac_address")
|
||||
}
|
||||
|
||||
function saveDeviceNames() {
|
||||
localStorage.setItem("device_name", macAddressElements.map(macAddressElement => document.getElementById(`${macAddressElement}_device`).value).join(","));
|
||||
document.getElementById("device_name").value = localStorage.getItem("device_name")
|
||||
}
|
||||
|
||||
function addMACAddress(macAddress = "", deviceName = "") {
|
||||
let nextIndex = macAddressElements.length;
|
||||
let nextMacAddressElement = `mac_address_${nextIndex}`;
|
||||
while (macAddressElements.includes(nextMacAddressElement)) {
|
||||
nextIndex += 1;
|
||||
nextMacAddressElement = `mac_address_${nextIndex}`;
|
||||
}
|
||||
const template = `
|
||||
<div id="${nextMacAddressElement}_container" class="join w-full mt-4">
|
||||
<div class="w-full flex flex-row justify-stretch">
|
||||
<div class="flex-grow">
|
||||
<input
|
||||
id="${nextMacAddressElement}"
|
||||
class="input input-bordered join-item w-full"
|
||||
placeholder="00:00:00:00:00:00"
|
||||
oninput="validateMACAddress('${nextMacAddressElement}')"
|
||||
onchange="saveMACAddresses()"
|
||||
value="${macAddress}"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<input
|
||||
id="${nextMacAddressElement}_device"
|
||||
class="input input-bordered join-item w-full"
|
||||
onchange="saveMACAddresses()"
|
||||
placeholder="iphone-12"
|
||||
onclick="fillDeviceName('${nextMacAddressElement}')"
|
||||
oninput="saveDeviceNames()"
|
||||
value="${deviceName}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="indicator"
|
||||
onclick="event.preventDefault();removeMACAddress('${nextMacAddressElement}')"
|
||||
>
|
||||
<span class="indicator-item badge badge-error">-</span>
|
||||
</button>
|
||||
</div>`
|
||||
// document.getElementById("mac_addresses").innerHTML += template;
|
||||
document.getElementById("mac_addresses").insertAdjacentHTML("beforeend", template)
|
||||
macAddressElements.push(nextMacAddressElement)
|
||||
}
|
||||
|
||||
function removeMACAddress(id) {
|
||||
if (!macAddressElements.includes(id)) return;
|
||||
|
||||
macAddressElements = macAddressElements.filter((macAddressElement) => macAddressElement !== id);
|
||||
document.getElementById(`${id}_container`).remove()
|
||||
|
||||
saveMACAddresses();
|
||||
saveDeviceNames();
|
||||
}
|
||||
|
||||
function recoverForm() {
|
||||
const customerName = document.getElementById("customer_name");
|
||||
const macAddress = document.getElementById("mac_address");
|
||||
const deviceName = document.getElementById("device_name");
|
||||
// const macAddress = document.getElementById("mac_address");
|
||||
// const deviceName = document.getElementById("device_name");
|
||||
const isRoaming = document.getElementById("is_roaming");
|
||||
const isGaming = document.getElementById("is_gaming");
|
||||
|
||||
customerName.value = localStorage.getItem("customer_name") || "";
|
||||
macAddress.value = localStorage.getItem("mac_address") || "";
|
||||
deviceName.value = localStorage.getItem("device_name") || "";
|
||||
// macAddress.value = localStorage.getItem("mac_address") || "";
|
||||
// deviceName.value = localStorage.getItem("device_name") || "";
|
||||
isRoaming.value = localStorage.getItem("is_roaming") === "true";
|
||||
isGaming.value = localStorage.getItem("is_gaming") === "true";
|
||||
|
||||
const macAddresses = localStorage.getItem("mac_address") || "";
|
||||
const deviceNames = localStorage.getItem("device_name") || "";
|
||||
macAddresses.split(",").forEach((macAddress, index) => {
|
||||
addMACAddress(macAddress, deviceNames[index]);;
|
||||
});
|
||||
}
|
||||
|
||||
function saveForm() {
|
||||
const customerName = document.getElementById("customer_name");
|
||||
const macAddress = document.getElementById("mac_address");
|
||||
const deviceName = document.getElementById("device_name");
|
||||
// const macAddress = document.getElementById("mac_address");
|
||||
// const deviceName = document.getElementById("device_name");
|
||||
const isRoaming = document.getElementById("is_roaming");
|
||||
const isGaming = document.getElementById("is_gaming");
|
||||
|
||||
localStorage.setItem("customer_name", customerName.value);
|
||||
localStorage.setItem("mac_address", macAddress.value);
|
||||
localStorage.setItem("device_name", deviceName.value);
|
||||
// localStorage.setItem("mac_address", macAddress.value);
|
||||
// localStorage.setItem("device_name", deviceName.value);
|
||||
localStorage.setItem("is_roaming", isRoaming.checked? "true": "false");
|
||||
localStorage.setItem("is_gaming", isGaming.checked? "true": "false");
|
||||
|
||||
saveMACAddresses();
|
||||
saveDeviceNames();
|
||||
}
|
||||
|
||||
function clearForm() {
|
||||
if (!confirm("This will remove all the data that is currently filled out. Do you want to continue?")) return;
|
||||
|
||||
localStorage.removeItem("customer_name");
|
||||
localStorage.removeItem("mac_address");
|
||||
localStorage.removeItem("device_name");
|
||||
document.getElementById("customer_name").value = "";
|
||||
document.getElementById("mac_address").value = "";
|
||||
document.getElementById("device_name").value = "";
|
||||
for (const macAddressElement of macAddressElements) {
|
||||
removeMACAddress(macAddressElement)
|
||||
}
|
||||
}
|
||||
|
||||
function setPricing() {
|
||||
@ -65,9 +141,9 @@
|
||||
saveForm();
|
||||
}
|
||||
|
||||
function fillDeviceName() {
|
||||
function fillDeviceName(id) {
|
||||
let deviceType = "";
|
||||
const macAddress = document.getElementById("mac_address").value;
|
||||
const macAddress = document.getElementById(id).value;
|
||||
// now we find out which format it is
|
||||
// 35:df:61 = customerfirstname-android
|
||||
// 3A-DF-61 = customerfirstname-laptop
|
||||
@ -89,12 +165,16 @@
|
||||
const firstName = fullName.split(" ")[0];
|
||||
const deviceName = `${firstName}-${deviceType}`.toLowerCase();
|
||||
|
||||
const deviceNameInput = document.getElementById("device_name");
|
||||
const deviceNameInput = document.getElementById(`${id}_device`);
|
||||
if (!deviceNameInput.value) deviceNameInput.value = deviceName;
|
||||
|
||||
saveDeviceNames()
|
||||
}
|
||||
|
||||
function validateMACAddress() {
|
||||
var macAddress = document.getElementById("mac_address");
|
||||
function validateMACAddress(id) {
|
||||
console.log(id)
|
||||
var macAddress = document.getElementById(id);
|
||||
macAddress.value = macAddress.value.replace(blacklistedChars, ":");
|
||||
var macAddressRegex = new RegExp(
|
||||
/^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/
|
||||
);
|
||||
@ -110,12 +190,25 @@
|
||||
}
|
||||
macAddress.classList.add("input-success");
|
||||
macAddress.reportValidity();
|
||||
fillDeviceName();
|
||||
fillDeviceName(id);
|
||||
return true;
|
||||
}
|
||||
|
||||
function validateDeviceName(id) {
|
||||
const deviceName = document.getElementById(`${id}_device`);
|
||||
deviceName.value = deviceName.value.toLowerCase().replace(blacklistedChars, "-")
|
||||
deviceName.setCustomValidity("");
|
||||
deviceName.classList.remove("input-error");
|
||||
deviceName.classList.remove("input-success");
|
||||
|
||||
// any custom validation
|
||||
|
||||
deviceName.classList.add("input-success");
|
||||
return true;
|
||||
}
|
||||
|
||||
function validateForm() {
|
||||
const macAddressValid = validateMACAddress();
|
||||
const macAddressValid = macAddressElements.map(macAddressElement => validateMACAddress(macAddressElement)).every(r => r === true);
|
||||
const customerName = document.getElementById("customer_name");
|
||||
customerName.classList.remove("input-error");
|
||||
// customerName.setCustomValidity("");
|
||||
@ -233,18 +326,49 @@
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-bold text-lg text-base-content"
|
||||
>MAC Address</span
|
||||
>MAC Addresses</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="mac_address"
|
||||
id="mac_address"
|
||||
placeholder="00-00-00-00-00-00"
|
||||
class="input input-bordered"
|
||||
onchange="validateForm()"
|
||||
oninput="validateMACAddress()"
|
||||
/>
|
||||
<input type="hidden" name="mac_address" id="mac_address" />
|
||||
<input type="hidden" name="device_name" id="device_name" />
|
||||
|
||||
<div id="mac_addresses">
|
||||
<!-- <div id="mac_address_1_container" class="join w-full mt-4">
|
||||
<div class="w-full flex flex-row justify-stretch">
|
||||
<div class="flex-grow">
|
||||
<input
|
||||
id="mac_address_1"
|
||||
class="input input-bordered join-item w-full"
|
||||
placeholder="00:00:00:00:00:00"
|
||||
oninput="validateMACAddress('mac_address_1')"
|
||||
onchange="saveMACAddresses()"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<input
|
||||
id="mac_address_1_device"
|
||||
class="input input-bordered join-item w-full"
|
||||
onchange="saveMACAddresses()"
|
||||
placeholder="iphone-12"
|
||||
onclick="fillDeviceName('mac_address_1')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="indicator"
|
||||
onclick="event.preventDefault();removeMACAddress('mac_address_1')"
|
||||
>
|
||||
<span class="indicator-item badge badge-error">-</span>
|
||||
</button>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn btn-block btn-success mt-4"
|
||||
onclick="event.preventDefault();addMACAddress()"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
@ -330,26 +454,6 @@
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="join-vertical">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-bold text-lg text-base-content"
|
||||
>Device Name</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="device_name"
|
||||
name="device_name"
|
||||
placeholder="iphone-12"
|
||||
class="input input-bordered"
|
||||
onchange="validateForm()"
|
||||
oninput="this.value =
|
||||
this.value.toLowerCase().replace(blacklistedChars, '-');"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="join-vertical">
|
||||
<div class="form-control">
|
||||
<label class="label cursor-pointer">
|
||||
|
||||
@ -22,4 +22,7 @@
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
<script>
|
||||
localStorage.clear();
|
||||
</script>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user