Steven/LuggageTrackerUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Steven:fd0211efceb29910d038f920eb28a2f096aadbd5
Branches Tags
Steven:master
...
compare: Steven:master
Branches Tags
Steven:master

4 Commits
fd0211efce ... master

Author SHA1 Message Date
Steven Tracey
4cb2bc7d29 v1.1 2025-07-17 12:18:02 -04:00
Steven Tracey
a08c4708e2 V2 ish 2025-07-14 22:09:36 -04:00
Steven Tracey
94c7412081 Beta v2 2025-07-10 15:47:18 -04:00
Steven Tracey
356669fdfd V1 2025-07-10 09:04:16 -04:00
12 changed files with 418 additions and 79 deletions
Expand all files Collapse all files

18
generic.php Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/head.php"; ?>
<body>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/header.php"; ?>
<div class="container">
<div class="content flex-vertical">
<div class="section-one">
<h1>{{ .header }}</h1>
<p>{{ .body }}</p>
</div>
</div>
</div>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/footer.php" ?>
</body>
</html>

56
genqr.php Normal file
View File

@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/head.php" ?>
<body>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/header.php" ?>
<div class="container">
<div class="content flex-vertical">
<div class="section-one">
<h1>QR Code</h1>
<a id="qr-link" href="">
<div id="qr"></div>
</a>
</div>
<div class="section-two">
<div id="loading"></div>
</div>
</div>
</div>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/footer.php" ?>
<script src="/static/qrcode.min.js"></script>
<script>
const path = window.location.pathname;
const parts = path.split("/");
const user = parts.pop();
let url = location.protocol + "//" + location.host + "/u/" + user.toLowerCase();
const qrcode = new QRCode(document.getElementById('qr'), {
text: url,
width: 1024,
height: 1024,
colorDark : '#000',
colorLight : '#fff',
correctLevel : QRCode.CorrectLevel.L
});
let qrLink = document.getElementById("qr-link");
let qrImg = document.querySelector("#qr img");
console.log(qrImg.src);
qrLink.setAttribute("download", "qrcode-" + user.toLowerCase() + ".png");
const delay = ms => new Promise(res => setTimeout(res, ms));
const setHref = async () => {
while (!qrLink.href.startsWith("data:")) {
await delay(100);
qrLink.setAttribute("href", qrImg.src);
console.log("Refreshing...");
}
document.getElementById("loading").remove();
};
setHref();
</script>
</body>
</html>

6
home.php
View File

@@ -1,10 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Luggage Tracker</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/head.php" ?>
<body>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/header.php" ?>

23
info.php Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/head.php" ?>
<body>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/header.php" ?>
<div class="container">
<div class="content flex-vertical">
<div class="section-one flex-vertical">
<h1>Owner Information</h1>
</div>
<div class="section-two flex-vertical align-left">
<p>Contact Name: {{ .contact_name }}</p>
<p>Phone Number: {{ .phone_number }}</p>
<p>Email Address: {{ .email_address }}</p>
<p>Address: {{ .address }}</p>
</div>
</div>
</div>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/footer.php" ?>
</body>
</html>

52
register.php Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/head.php" ?>
<body>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/header.php" ?>
<div class="container">
<div class="content flex-vertical">
<div class="section-one">
<h1>Registration</h1>
</div>
<div class="section-two">
<form id="reg-form" accept-charset="UTF-8" action="/api/register" method="post">
<div class="inputs">
<div class="flex flex-vertical">
<label class="label-left" for="name">Name</label>
<input id="name" name="name" type="text" placeholder="John Doe">
<label class="label-left" for="user-id">User ID</label>
<input id="user-id" name="user-id" type="text" placeholder="jdoe">
<label class="label-left" for="email">Email Address</label>
<input id="email" name="email" type="text" placeholder="johndoe@example.com">
<label class="label-left" for="phone-number">Phone Number</label>
<input id="phone-number" name="phone-number" type="text" placeholder="+1(212)555-1234">
<label class="label-left" for="registration_code">Registration Code</label>
<input id="registration_code" name="registration_code" type="text" placeholder="xxxxxxxx">
<p id="msg-box"></p>
</div>
<div class="flex flex-vertical">
<label class="label-left" for="street1">Street Line 1</label>
<input id="street1" name="street1" type="text" placeholder="123 Main Street">
<label class="label-left" for="street2">Street Line 2</label>
<input id="street2" name="street2" type="text" placeholder="(Optional)">
<label class="label-left" for="city">City</label>
<input id="city" name="city" type="text" placeholder="Anytown">
<label class="label-left" for="state">State</label>
<input id="state" name="state" type="text" placeholder="New York">
<label class="label-left" for="postal-code">Postal Code</label>
<input id="postal-code" name="postal-code" type="text" placeholder="12345">
<label class="label-left" for="country">Country</label>
<input id="country" name="country" type="text" placeholder="United States">
</div>
</div>
<input class="btn" type="submit" value="Register">
</form>
</div>
</div>
</div>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/footer.php" ?>
<script src="/static/register.js"></script>
</body>
</html>

6
snippets/head.php Normal file
View File

@@ -0,0 +1,6 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, internal-scale=1, viewport-fit=cover">
<title>My Luggage Info</title>
<link rel="stylesheet" href="/static/style.css?v=43">
</head>

4
snippets/header.php
View File

@@ -1,7 +1,9 @@
<?php ?>
<header class="header">
<a class="icon-link" href="/">
<img class="header-icon" src="/static/icon.png" alt="icon"/>
<h1 class="title">Luggage Tracker</h1>
</a>
<h1 class="title">My Luggage Info</h1>
<div class="spacer"></div>
</header>

1
static/qrcode.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

29
static/register.js Normal file
View File

@@ -0,0 +1,29 @@
const form = document.getElementById("reg-form");
form.addEventListener("submit", async (event) => {
event.preventDefault();
let userId = document.getElementById("user-id").value;
let msgBox = document.getElementById("msg-box");
try {
const response = await fetch(`/api/checkname/${userId}`, {
method: "GET",
});
if (response.status === 409) {
msgBox.innerText = "Entry with id \"" + userId + "\" already in use";
return;
} else if (!response.ok) {
throw new Error(`Server Error: ${response.status}`);
}
const data = await response.json();
console.log("Fetch successful:", data);
form.submit();
} catch (error) {
console.error("Fetch failed:", error);
msgBox.innerText = "Internal Error: " + error;
}
});

222
static/style.css
View File

@@ -8,6 +8,90 @@
font-family: Verdana,sans-serif;
}
@media only screen and (min-width: 300px) {
body {
margin: 0;
height: 92vh;
display: flex;
flex-direction: column;
}
.header {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
background-color: var(--mid-dark);
padding: 0 1rem;
height: 120px;
}
.spacer {
flex: 0 0 72px;
}
.header-icon {
display: block;
flex: 0 0 72px;
width: 85px;
height: 85px;
}
.footer {
background-color: var(--dark);
display: flex;
flex: 0 0 auto;
height: 120px;
}
.content {
display: flex;
width: 85vw;
max-width: 800px;
padding: 1.5rem;
background: white;
border-radius: 15px;
text-align: center;
}
.content input {
font-size: 16px;
}
.btn {
color: var(--dark);
background-color: var(--light);
border-radius: 8px;
border: 2px solid;
border-color: var(--dark);
padding: 8px 12px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
.align-left {
align-items: flex-start;
margin-left: 5vw;
}
.inputs {
display: flex;
flex: 1 0 auto;
flex-direction: column;
}
.inputs div {
flex: 1 0 auto;
}
.inputs input {
margin-bottom: 10px;
}
}
@media only screen and (min-width: 700px) {
body {
margin: 0;
height: 100vh;
@@ -29,18 +113,15 @@ body {
flex: 0 0 64px;
}
.icon-link {
display: flex;
}
.header-icon {
display: block;
flex: 0 0 64px;
width: 15vw;
height: auto;
max-height: 80px;
}
.title {
flex: 1;
text-align: center;
color: var(--light);
width: 80px;
height: 80px;
}
.footer {
@@ -50,6 +131,61 @@ body {
height: 80px;
}
.content {
display: flex;
width: 90vw;
max-width: 800px;
padding: 1.5rem;
background: white;
border-radius: 5px;
text-align: center;
}
.content input {
font-size: 16px;
}
.btn {
color: var(--dark);
background-color: var(--light);
border-radius: 8px;
border: 2px solid;
border-color: var(--dark);
padding: 8px 12px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
.align-left {
align-items: flex-start;
margin-left: 5vw;
}
.inputs {
display: flex;
flex: 1 0 auto;
flex-direction: row;
justify-content: space-between;
column-gap: 5vw;
}
.inputs div {
flex: 1 0 auto;
}
.inputs input {
margin-bottom: 10px;
}
}
.title {
flex: 1;
text-align: center;
color: var(--light);
}
.footer-text {
display: inherit;
align-content: center;
@@ -96,13 +232,7 @@ body {
);
}
.content {
display: flex;
width: 90vw;
max-width: 800px;
padding: 1.5rem;
background: white;
border-radius: 5px;
.content h1 {
text-align: center;
}
@@ -114,23 +244,6 @@ body {
text-align: center;
}
.content input {
font-size: 16px;
}
.content button {
color: var(--dark);
background-color: var(--light);
border-radius: 8px;
border: 2px solid;
border-color: var(--dark);
padding: 8px 12px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
.content button:hover {
color: var(--light);
background-color: var(--dark);
@@ -140,11 +253,17 @@ body {
background-color: var(--dark-click);
}
.flex {
display: flex;
}
.flex-vertical {
/*display: flex;*/
flex-direction: column;
}
.flex-horizontal {
/*display: flex;*/
flex-direction: row;
}
@@ -161,6 +280,43 @@ body {
flex: 1 0 auto;
}
.label-left {
text-align: left;
}
#reg-form {
flex: 1 0 auto;
}
#status {
margin-bottom: 0;
}
#qr-link {
display: inline-flex;
}
#qr {
display: flex;
justify-content: center;
}
#qr img {
width: auto;
height: 60vh;
}
#loading {
display: inline-block;
width: 50px;
height: 50px;
border: 3px solid var(--mid-light);
border-radius: 50%;
border-top-color: var(--mid-dark);
animation: spin 1s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}

26
static/verify.js
View File

@@ -1,15 +1,12 @@
let baseUrl = "http://localhost:8000"
document.getElementById("submitBtn").addEventListener('click', function(e) {
let code = document.getElementById("code").value;
console.log("Clicked: " + code);
let submitBtn = document.getElementById("submitBtn");
submitBtn.addEventListener('click', function(e) {
let code = document.getElementById("code").value.replaceAll(" ", "");
const path = window.location.pathname;
const parts = path.split("/");
//const user = parts.pop();
const user = parts.pop().toLowerCase();
const user = "tracey"
fetch(baseUrl + "/api/verify/" + user, {
fetch("/api/verify/" + user, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
@@ -18,18 +15,25 @@ document.getElementById("submitBtn").addEventListener('click', function(e) {
}).then(response => response.json())
.then(data => {
let statusText = document.getElementById("status");
console.log(data);
statusText.classList.remove("hidden");
console.log("Status Code: " + data.status);
console.log("Code Type: " + typeof data.status)
if (data.status === 404) {
// Not found
statusText.innerText = "User with that code not found";
} else if (data.status === 200) {
// Display found and redirect to baseUrl/u/user/info with auth token
statusText.innerText = "User found, redirecting...";
window.location.replace(baseUrl + "/u/" + user + "/info")
window.location.replace("/u/" + user + "/info?token=" + data.token);
} else {
// Error
statusText.innerText = "Error, please send this to Steven to be fixed. Error: " + data.error;
}
})
})
});
document.getElementById("code").addEventListener('keyup', function(e) {
if (e.key === "Enter") {
submitBtn.click();
}
});

10
verify.php
View File

@@ -1,10 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Luggage Tracker</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/head.php" ?>
<body>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/header.php" ?>
@@ -13,10 +9,10 @@
<div class="section-one flex-horizontal">
<label for="code">Secret Code (SC):</label>
<input id="code" type="text">
<button id="submitBtn">Submit</button>
<button id="submitBtn" class="btn">Submit</button>
</div>
<div class="section-two flex-vertical">
<p id="status" class="hidden">Text</p>
<p id="status" class="hidden"></p>
</div>
</div>
</div>