Jannis/Kino-Website-Framework
1
0
Fork 0
forked from Aaron/Kino-Website
Code Issues 1 Pull Requests Actions Activity

dev_jannis #3

Merged
Jannis merged 20 commits from dev_jannis into master 2026-05-05 11:46:01 +00:00
Conversation 0 Commits 20 Files Changed 114 +3371 -153
12 changed files with 3371 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c805221208 - Show all commits

2
.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
node_modules
dist/

14
index.html
View File

@@ -735,8 +735,8 @@
<div class="header-sub-info"> <div class="header-sub-info">
<p id="modal-info-text">Saal • Zeit</p> <p id="modal-info-text">Saal • Zeit</p>
<div id="tech-badges" class="tech-badges-container hidden"> <div id="tech-badges" class="tech-badges-container hidden">
<img src="img/dolby.png" alt="Dolby" class="tech-badge"> <img src="img/Dolby.png" alt="Dolby" class="tech-badge">
<img src="img/dbox.png" alt="D-Box" class="tech-badge"> <img src="img/dbox.jpg" alt="D-Box" class="tech-badge">
</div> </div>
</div> </div>
</div> </div>
@@ -948,11 +948,11 @@
</div> </div>
</div> </div>
<script src="account.js"></script> <script src="src/main.js"></script>
<script src="cart.js"></script> <script src="src/cart.js"></script>
<script src="booking.js"></script> <script src="src/booking.js"></script>
<script src="checkout.js"></script> <script src="src/checkout.js"></script>
<script src="main.js"></script> <script type="module" src="dist/account.js"></script>
</body> </body>
</html> </html>

3093
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

25
package.json Normal file
View File

@@ -0,0 +1,25 @@
{
"name": "p1---kino",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"build": "tsc",
"watch": "tsc --watch",
"serve": "serve .",
"run": "npm-run-all --parallel watch serve"
},
"repository": {
"type": "git",
"url": "ssh://git@gitea.starfour.de:2222/Aaron/Kino-Website.git"
},
"keywords": [],
"author": "Aaron und Jannis",
"license": "ISC",
"type": "commonjs",
"devDependencies": {
"npm-run-all": "^4.1.5",
"serve": "^14.2.6",
"typescript": "^6.0.3"
}
}

71
account.js → src/account.ts
View File

@@ -1,4 +1,6 @@
function readStorageJson(key, fallbackValue) { import type { User } from "./interfaces";
function readStorageJson(key: string, fallbackValue: any) {
const raw = localStorage.getItem(key); const raw = localStorage.getItem(key);
if (!raw || raw === "undefined" || raw === "null") { if (!raw || raw === "undefined" || raw === "null") {
@@ -13,11 +15,7 @@
} }
} }
function normalizeUser(user) { function normalizeUser(user: User): User {
if (!user || typeof user !== "object") {
return null;
}
return { return {
firstName: user.firstName || "", firstName: user.firstName || "",
lastName: user.lastName || "", lastName: user.lastName || "",
@@ -28,7 +26,7 @@ function normalizeUser(user) {
}; };
} }
function escapeHtml(value) { function escapeHtml(value: string) {
return String(value || "") return String(value || "")
.replaceAll("&", "&amp;") .replaceAll("&", "&amp;")
.replaceAll("<", "&lt;") .replaceAll("<", "&lt;")
@@ -37,7 +35,7 @@ function escapeHtml(value) {
.replaceAll("'", "&#39;"); .replaceAll("'", "&#39;");
} }
function formatEuro(value) { function formatEuro(value: string) {
return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`; return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`;
} }
@@ -53,15 +51,21 @@ function persistCurrentUser() {
} }
} }
let users = readStorageJson("eagleUsers", []); export let users = readStorageJson("eagleUsers", []);
if (!Array.isArray(users)) { if (!Array.isArray(users)) {
users = []; users = [];
} }
users = users.map(normalizeUser).filter(Boolean); users = users.map(normalizeUser).filter(Boolean);
let currentUser = normalizeUser(readStorageJson("currentUser", null)); const rawCurrentUser = readStorageJson("currentUser", null);
export var currentUser: User | null = rawCurrentUser ? normalizeUser(rawCurrentUser) : null;
if (currentUser && currentUser.email) { if (currentUser && currentUser.email) {
const storedMatch = users.find((user) => user.email === currentUser.email); const currentEmail = currentUser.email;
const storedMatch = users.find((user: { email: string; }) => {
return user.email === currentEmail;
});
if (storedMatch) { if (storedMatch) {
currentUser = storedMatch; currentUser = storedMatch;
} else { } else {
@@ -70,18 +74,23 @@ if (currentUser && currentUser.email) {
} }
} }
async function hashMessage(message) { async function hashMessage(message: string) {
const msgBuffer = new TextEncoder().encode(message); // Encode as UTF-8 const msgBuffer = new TextEncoder().encode(message); // Encode as UTF-8
const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer); // Hash const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer); // Hash
const hashArray = Array.from(new Uint8Array(hashBuffer)); // Convert to bytes const hashArray = Array.from(new Uint8Array(hashBuffer)); // Convert to bytes
return hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // Hex string return hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // Hex string
} }
async function registerUser() { function getInputValue(id: string): string {
const firstName = document.getElementById("reg-firstname")?.value.trim() || ""; const el = document.getElementById(id) as HTMLInputElement | null;
const lastName = document.getElementById("reg-lastname")?.value.trim() || ""; return el?.value.trim() ?? "";
const email = (document.getElementById("reg-email")?.value.trim() || "").toLowerCase(); }
const password = document.getElementById("reg-password")?.value || "";
export async function registerUser() {
const firstName = getInputValue("reg-firstname");
const lastName = getInputValue("reg-lastname");
const email = getInputValue("reg-email").toLowerCase();
const password = document.querySelector<HTMLInputElement>("#reg-password")?.value ?? "";
if (!firstName || !lastName || !email || !password) { if (!firstName || !lastName || !email || !password) {
alert("Bitte fuelle alle Felder aus."); alert("Bitte fuelle alle Felder aus.");
@@ -93,7 +102,7 @@ async function registerUser() {
return; return;
} }
const existingUser = users.find((user) => user.email.toLowerCase() === email); const existingUser = users.find((user: User) => user.email.toLowerCase() === email);
if (existingUser) { if (existingUser) {
alert("E-Mail bereits registriert"); alert("E-Mail bereits registriert");
return; return;
@@ -122,13 +131,13 @@ async function registerUser() {
openAccountDashboard(); openAccountDashboard();
} }
async function loginUser() { export async function loginUser() {
const email = (document.getElementById("login-email")?.value.trim() || "").toLowerCase(); const email = (document.querySelector<HTMLInputElement>("#login-email")?.value.trim() || "").toLowerCase();
const password = document.getElementById("login-password")?.value || ""; const password = document.querySelector<HTMLInputElement>("#login-password")?.value || "";
const hashedPassword = await hashMessage(password); const hashedPassword = await hashMessage(password);
const user = users.find( const user = users.find(
(entry) => entry.email.toLowerCase() === email && entry.hashedPassword === hashedPassword (entry: User) => entry.email.toLowerCase() === email && entry.hashedPassword === hashedPassword
); );
if (!user) { if (!user) {
@@ -141,7 +150,7 @@ async function loginUser() {
openAccountDashboard(); openAccountDashboard();
} }
function openAccountDashboard() { export function openAccountDashboard() {
const accountView = document.getElementById("account-view"); const accountView = document.getElementById("account-view");
if (!accountView) { if (!accountView) {
return; return;
@@ -152,7 +161,7 @@ function openAccountDashboard() {
return; return;
} }
accountView.innerHTML = ` accountView.innerHTML = /*html*/`
<div class="account-panel"> <div class="account-panel">
<div class="account-panel-header"> <div class="account-panel-header">
<h2>Mein Konto</h2> <h2>Mein Konto</h2>
@@ -208,7 +217,7 @@ function renderOrders() {
const orderHtml = orders const orderHtml = orders
.map((order, index) => { .map((order, index) => {
const movieItems = Array.isArray(order.items) const movieItems = Array.isArray(order.items)
? order.items.filter((item) => item.category === "movie") ? order.items.filter((item: any) => item.category === "movie")
: []; : [];
const previewItem = movieItems[0] || (Array.isArray(order.items) ? order.items[0] : null); const previewItem = movieItems[0] || (Array.isArray(order.items) ? order.items[0] : null);
const previewTitle = previewItem?.title || "Bestellung"; const previewTitle = previewItem?.title || "Bestellung";
@@ -237,20 +246,20 @@ function renderOrders() {
`; `;
const detailTarget = document.getElementById("order-ticket-details"); const detailTarget = document.getElementById("order-ticket-details");
const orderButtons = Array.from(target.querySelectorAll(".order-item-btn")); const orderButtons = Array.from(target.querySelectorAll<HTMLButtonElement>(".order-item-btn"));
const renderOrderTicket = (orderIndex) => { const renderOrderTicket = (orderIndex: number) => {
const order = orders[orderIndex]; const order = orders[orderIndex];
if (!order || !detailTarget) { if (!order || !detailTarget) {
return; return;
} }
const movieItems = Array.isArray(order.items) const movieItems = Array.isArray(order.items)
? order.items.filter((item) => item.category === "movie") ? order.items.filter((item: any) => item.category === "movie")
: []; : [];
const primaryMovie = movieItems[0] || (Array.isArray(order.items) ? order.items[0] : null); const primaryMovie = movieItems[0] || (Array.isArray(order.items) ? order.items[0] : null);
const poster = primaryMovie?.img || ""; const poster = primaryMovie?.img || "";
const seats = movieItems.map((item) => item.seatId).filter(Boolean).join(", ") || "-"; const seats = movieItems.map((item: any) => item.seatId).filter(Boolean).join(", ") || "-";
const ticketCount = movieItems.length || (Array.isArray(order.items) ? order.items.length : 0); const ticketCount = movieItems.length || (Array.isArray(order.items) ? order.items.length : 0);
const hall = primaryMovie?.hall || "-"; const hall = primaryMovie?.hall || "-";
const time = primaryMovie?.time ? `${primaryMovie.time} Uhr` : "-"; const time = primaryMovie?.time ? `${primaryMovie.time} Uhr` : "-";
@@ -300,7 +309,7 @@ function renderPayments() {
return; return;
} }
target.innerHTML = ` target.innerHTML = /*html*/`
<div class="account-card"> <div class="account-card">
<h3>Zahlungsmethoden</h3> <h3>Zahlungsmethoden</h3>
<p class="account-payments-note">Platzhalter zum Hinterlegen deiner Logos oder Anbieter-Informationen.</p> <p class="account-payments-note">Platzhalter zum Hinterlegen deiner Logos oder Anbieter-Informationen.</p>
@@ -454,7 +463,7 @@ function renderPayments() {
} }
function logoutUser() { function logoutUser() {
currentUser = null;
persistCurrentUser(); persistCurrentUser();
window.location.reload(); window.location.reload();
} }

44
booking.js → src/booking.ts
View File

@@ -1,7 +1,11 @@
let currentBookingContext = null; import { seatLayouts, occupiedSeatsData, prices, cart } from "./main"
let currentHallLayout = null; import { renderCart, saveCart } from "./cart";
import { renderCheckout } from "./checkout";
function openBooking(movie, hall, time) { let currentBookingContext: any = null;
let currentHallLayout: any = null;
export function openBooking(movie: string, hall: string, time: any) {
const titleEl = document.getElementById("modal-movie-title"); const titleEl = document.getElementById("modal-movie-title");
const infoEl = document.getElementById("modal-info-text"); const infoEl = document.getElementById("modal-info-text");
@@ -20,13 +24,13 @@ function openBooking(movie, hall, time) {
updateBookingSummary(); updateBookingSummary();
document.getElementById("booking-modal")?.classList.remove("hidden"); document.getElementById("booking-modal")?.classList.remove("hidden");
} }
function getRowLabel(rowIndex) { function getRowLabel(rowIndex: number) {
return String(rowIndex + 1); return String(rowIndex + 1);
} }
function buildHallLayout(hallName, baseConfig) { function buildHallLayout(hallName: string, baseConfig:any) {
const rows = Number(baseConfig.rows || 0); const rows = Number(baseConfig.rows || 0);
const totalCols = Number(baseConfig.left || 0) + Number(baseConfig.right || 0); const totalCols = Number(baseConfig.left || 0) + Number(baseConfig.right || 0);
const isDeluxe = /deluxe/i.test(hallName); const isDeluxe = /deluxe/i.test(hallName);
@@ -39,7 +43,7 @@ function buildHallLayout(hallName, baseConfig) {
const vipRows = rows > 0 ? [rows] : []; const vipRows = rows > 0 ? [rows] : [];
const dboxMap = new Set(); const dboxMap = new Set();
const markDboxRange = (rowNumber, startCol, width) => { const markDboxRange = (rowNumber: number, startCol: number, width: number) => {
if (!rowNumber || width <= 0) { if (!rowNumber || width <= 0) {
return; return;
} }
@@ -52,7 +56,7 @@ function buildHallLayout(hallName, baseConfig) {
if (isDeluxe) { if (isDeluxe) {
const configuredDboxSeats = Array.isArray(baseConfig.dbox) const configuredDboxSeats = Array.isArray(baseConfig.dbox)
? baseConfig.dbox.reduce((sum, section) => sum + Number(section.w || 0), 0) ? baseConfig.dbox.reduce((sum: number, section: any) => sum + Number(section.w || 0), 0)
: 0; : 0;
const totalDboxSeats = Math.max(4, configuredDboxSeats || 0); const totalDboxSeats = Math.max(4, configuredDboxSeats || 0);
@@ -77,7 +81,7 @@ function buildHallLayout(hallName, baseConfig) {
markDboxRange(rowNumber, startCol, seatsForRow); markDboxRange(rowNumber, startCol, seatsForRow);
}); });
} else if (Array.isArray(baseConfig.dbox)) { } else if (Array.isArray(baseConfig.dbox)) {
baseConfig.dbox.forEach((section) => { baseConfig.dbox.forEach((section: any) => {
const rowNumber = Number(section.r || 0); const rowNumber = Number(section.r || 0);
const width = Number(section.w || 0); const width = Number(section.w || 0);
const startCol = Number(section.c || 0); const startCol = Number(section.c || 0);
@@ -96,7 +100,7 @@ function buildHallLayout(hallName, baseConfig) {
}; };
} }
function getSeatType(layout, rowNumber, colNumber) { function getSeatType(layout: any, rowNumber: number, colNumber: number) {
if (layout.dboxMap.has(`${rowNumber}-${colNumber}`)) { if (layout.dboxMap.has(`${rowNumber}-${colNumber}`)) {
return "dbox"; return "dbox";
} }
@@ -112,7 +116,7 @@ function getSeatType(layout, rowNumber, colNumber) {
return "normal"; return "normal";
} }
function createSeatElement({ seatId, seatType, occupiedSeats }) { function createSeatElement({seatId, seatType, occupiedSeats }:any) {
const seat = document.createElement("button"); const seat = document.createElement("button");
seat.type = "button"; seat.type = "button";
seat.classList.add("seat", seatType); seat.classList.add("seat", seatType);
@@ -136,7 +140,7 @@ function createSeatElement({ seatId, seatType, occupiedSeats }) {
return seat; return seat;
} }
function createSeats(hallName, time) { function createSeats(hallName: string, time: any) {
const seatGrid = document.getElementById("seat-grid"); const seatGrid = document.getElementById("seat-grid");
if (!seatGrid) { if (!seatGrid) {
return; return;
@@ -144,7 +148,8 @@ function createSeats(hallName, time) {
seatGrid.innerHTML = ""; seatGrid.innerHTML = "";
const baseConfig = seatLayouts[hallName]; const arrIndex = hallName as keyof typeof seatLayouts;
const baseConfig: any = seatLayouts[arrIndex];
if (!baseConfig) { if (!baseConfig) {
currentHallLayout = null; currentHallLayout = null;
return; return;
@@ -235,7 +240,7 @@ function renderBookingLegend() {
} }
function updateBookingSummary() { function updateBookingSummary() {
const selectedSeats = Array.from(document.querySelectorAll("#seat-grid .seat.selected")); const selectedSeats = Array.from(document.querySelectorAll("#seat-grid .seat.selected")) as HTMLElement[];;
const summaryPanel = document.getElementById("booking-summary"); const summaryPanel = document.getElementById("booking-summary");
const summaryItems = document.getElementById("summary-items"); const summaryItems = document.getElementById("summary-items");
const totalEl = document.getElementById("total-price"); const totalEl = document.getElementById("total-price");
@@ -245,7 +250,7 @@ function updateBookingSummary() {
if (summaryItems) { if (summaryItems) {
summaryItems.innerHTML = selectedSeats summaryItems.innerHTML = selectedSeats
.map((seat) => { .map((seat) => {
const type = seat.dataset.type || "normal"; const type = (seat.dataset.type || "normal") as keyof typeof prices;
const seatPrice = Number(prices?.[type] ?? prices?.normal ?? 11); const seatPrice = Number(prices?.[type] ?? prices?.normal ?? 11);
total += seatPrice; total += seatPrice;
@@ -272,12 +277,13 @@ function updateBookingSummary() {
summaryPanel?.classList.toggle("hidden", selectedSeats.length === 0); summaryPanel?.classList.toggle("hidden", selectedSeats.length === 0);
} }
function findMoviePoster(movieTitle) { function findMoviePoster(movieTitle: string) {
const cards = Array.from(document.querySelectorAll(".movie-card, .detailed-card")); const cards = Array.from(document.querySelectorAll(".movie-card, .detailed-card"));
const normalizedTarget = String(movieTitle || "").trim().toLowerCase(); const normalizedTarget = String(movieTitle || "").trim().toLowerCase();
for (const card of cards) { for (const card of cards) {
const title = card.querySelector("h2, h3")?.innerText?.trim().toLowerCase(); const currentCard = card.querySelector("h2, h3") as HTMLElement;
const title = currentCard.innerText?.trim().toLowerCase();
if (title === normalizedTarget) { if (title === normalizedTarget) {
const imageSrc = card.querySelector("img")?.src; const imageSrc = card.querySelector("img")?.src;
if (imageSrc) { if (imageSrc) {
@@ -290,7 +296,7 @@ function findMoviePoster(movieTitle) {
} }
function confirmSelectedSeats() { function confirmSelectedSeats() {
const selectedSeats = Array.from(document.querySelectorAll("#seat-grid .seat.selected")); const selectedSeats = Array.from(document.querySelectorAll("#seat-grid .seat.selected")) as HTMLElement[];
if (!currentBookingContext || selectedSeats.length === 0) { if (!currentBookingContext || selectedSeats.length === 0) {
alert("Bitte waehle mindestens einen Platz aus."); alert("Bitte waehle mindestens einen Platz aus.");
@@ -304,7 +310,7 @@ function confirmSelectedSeats() {
const seatId = seat.dataset.seatId; const seatId = seat.dataset.seatId;
const seatType = seat.dataset.type || "normal"; const seatType = seat.dataset.type || "normal";
const alreadyInCart = cart.some((item) => const alreadyInCart = cart.some((item: any) =>
item.category === "movie" && item.category === "movie" &&
item.title === currentBookingContext.movie && item.title === currentBookingContext.movie &&
item.hall === currentBookingContext.hall && item.hall === currentBookingContext.hall &&

46
cart.js → src/cart.ts
View File

@@ -1,8 +1,10 @@
function formatEuro(value) { import { cart } from "./main";
function formatEuro(value: number) {
return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`; return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`;
} }
function escapeHtml(value) { function escapeHtml(value: any) {
return String(value || "") return String(value || "")
.replaceAll("&", "&amp;") .replaceAll("&", "&amp;")
.replaceAll("<", "&lt;") .replaceAll("<", "&lt;")
@@ -11,14 +13,14 @@ function escapeHtml(value) {
.replaceAll("'", "&#39;"); .replaceAll("'", "&#39;");
} }
function buildCartKey(item) { function buildCartKey(item: { category: string; seatId: any; hall: any; time: any; title: any; }) {
const infoText = item.category === "movie" const infoText = item.category === "movie"
? `Sitz: ${item.seatId} (${item.hall})` ? `Sitz: ${item.seatId} (${item.hall})`
: item.time; : item.time;
return `${item.title}-${item.hall}-${infoText}`; return `${item.title}-${item.hall}-${infoText}`;
} }
function isDrinkItem(item) { function isDrinkItem(item: { category: string; title: any; hall: any; }) {
if (item.category !== "snack") { if (item.category !== "snack") {
return false; return false;
} }
@@ -39,7 +41,7 @@ function isDrinkItem(item) {
return drinkKeywords.some((word) => title.includes(word)) || size.includes("l"); return drinkKeywords.some((word) => title.includes(word)) || size.includes("l");
} }
function buildItemInfo(item) { function buildItemInfo(item: { category: any; seatId?: any; hall: any; time?: any; title: any; }) {
if (item.category === "movie") { if (item.category === "movie") {
return ` return `
<div>Sitzplatz: ${escapeHtml(item.seatId || "-")}</div> <div>Sitzplatz: ${escapeHtml(item.seatId || "-")}</div>
@@ -65,7 +67,7 @@ function buildItemInfo(item) {
function groupCartItems() { function groupCartItems() {
const groups = new Map(); const groups = new Map();
cart.forEach((item) => { cart.forEach((item: { price?: any; category: string; seatId: any; hall: any; time: any; title: any; }) => {
const key = buildCartKey(item); const key = buildCartKey(item);
if (!groups.has(key)) { if (!groups.has(key)) {
@@ -85,12 +87,12 @@ function groupCartItems() {
return Array.from(groups.values()); return Array.from(groups.values());
} }
function saveCart() { export function saveCart() {
localStorage.setItem("eagleCart", JSON.stringify(cart)); localStorage.setItem("eagleCart", JSON.stringify(cart));
updateCartBadge(); updateCartBadge();
} }
function updateCartBadge() { export function updateCartBadge() {
const cartBadge = document.getElementById("cart-badge"); const cartBadge = document.getElementById("cart-badge");
if (!cartBadge) { if (!cartBadge) {
@@ -101,7 +103,7 @@ function updateCartBadge() {
cartBadge.classList.toggle("hidden", cart.length === 0); cartBadge.classList.toggle("hidden", cart.length === 0);
} }
function renderCart() { export function renderCart() {
const cartList = document.getElementById("cart-items-list"); const cartList = document.getElementById("cart-items-list");
const totalEl = document.getElementById("cart-total-right"); const totalEl = document.getElementById("cart-total-right");
const vatEl = document.getElementById("cart-vat-right"); const vatEl = document.getElementById("cart-vat-right");
@@ -119,7 +121,7 @@ function renderCart() {
const groupedItems = groupCartItems(); const groupedItems = groupCartItems();
const header = ` const header = /*html*/`
<div class="cart-header-row"> <div class="cart-header-row">
<div class="col-amount">MENGE</div> <div class="col-amount">MENGE</div>
<div class="col-img">VORSCHAU</div> <div class="col-img">VORSCHAU</div>
@@ -133,11 +135,11 @@ function renderCart() {
const rows = groupedItems const rows = groupedItems
.map((group) => { .map((group) => {
const imageHtml = group.item.img const imageHtml = group.item.img
? `<img class="cart-img-small" src="${escapeHtml(group.item.img)}" alt="${escapeHtml(group.item.title)}">` ? /*html*/`<img class="cart-img-small" src="${escapeHtml(group.item.img)}" alt="${escapeHtml(group.item.title)}">`
: `<div class="cart-img-fallback">Kein Bild</div>`; : /*html*/`<div class="cart-img-fallback">Kein Bild</div>`;
const quantityHtml = group.item.category === "movie" const quantityHtml = group.item.category === "movie"
? `<div class="qty-static" aria-label="Feste Ticketanzahl">${group.quantity}x</div>` ? /*html*/`<div class="qty-static" aria-label="Feste Ticketanzahl">${group.quantity}x</div>`
: ` : /*html*/`
<div class="qty-stepper"> <div class="qty-stepper">
<button class="btn-qty" data-action="minus" data-key="${escapeHtml(group.key)}">-</button> <button class="btn-qty" data-action="minus" data-key="${escapeHtml(group.key)}">-</button>
<span>${group.quantity}</span> <span>${group.quantity}</span>
@@ -145,7 +147,7 @@ function renderCart() {
</div> </div>
`; `;
return ` return /*html*/`
<div class="cart-item-row"> <div class="cart-item-row">
<div class="col-amount"> <div class="col-amount">
${quantityHtml} ${quantityHtml}
@@ -172,22 +174,23 @@ function renderCart() {
saveCart(); saveCart();
} }
//@ts-ignore
window.removeItem = function removeItem(id) { window.removeItem = function removeItem(id: any) {
cart = cart.filter((item) => item.id !== id); var localCart = cart.filter((item: { id: any; }) => item.id !== id);
saveCart(); saveCart();
renderCart(); renderCart();
}; };
window.changeQty = function changeQty(title, delta) { //@ts-ignore
window.changeQty = function changeQty(title, delta): void {
if (delta > 0) { if (delta > 0) {
const item = cart.find((entry) => entry.title === title); const item = cart.find((entry: { title: any; }) => entry.title === title);
if (item) { if (item) {
cart.push({ ...item, id: Date.now() + Math.random() }); cart.push({ ...item, id: Date.now() + Math.random() });
} }
} else { } else {
const index = cart const index = cart
.map((entry) => entry.title) .map((entry: { title: any; }) => entry.title)
.lastIndexOf(title); .lastIndexOf(title);
if (index !== -1) { if (index !== -1) {
cart.splice(index, 1); cart.splice(index, 1);
@@ -197,3 +200,4 @@ window.changeQty = function changeQty(title, delta) {
saveCart(); saveCart();
renderCart(); renderCart();
}; };

22
checkout.js → src/checkout.ts
View File

@@ -1,11 +1,15 @@
function formatCheckoutEuro(value) { import { currentUser, users } from "./account";
import { renderCart, saveCart } from "./cart";
import { cart, emptyCart, occupiedSeatsData } from "./main";
function formatCheckoutEuro(value: number) {
return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`; return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`;
} }
let selectedPaymentMethod = ""; let selectedPaymentMethod = "";
let checkoutEventsBound = false; let checkoutEventsBound = false;
function setCheckoutStep(step) { function setCheckoutStep(step: number) {
const step1 = document.getElementById("checkout-step-1"); const step1 = document.getElementById("checkout-step-1");
const step2 = document.getElementById("checkout-step-2"); const step2 = document.getElementById("checkout-step-2");
const step3 = document.getElementById("checkout-step-3"); const step3 = document.getElementById("checkout-step-3");
@@ -27,7 +31,7 @@ function setCheckoutStep(step) {
line2?.classList.toggle("active", step >= 3); line2?.classList.toggle("active", step >= 3);
} }
function renderCheckout() { export function renderCheckout() {
const summaryList = document.getElementById("checkout-summary-list"); const summaryList = document.getElementById("checkout-summary-list");
const totalDisplay = document.getElementById("checkout-total-display"); const totalDisplay = document.getElementById("checkout-total-display");
const vatDisplay = document.getElementById("checkout-vat-display"); const vatDisplay = document.getElementById("checkout-vat-display");
@@ -93,7 +97,7 @@ function generateTicket() {
const qrData = encodeURIComponent(`EAGLE-IMAX|${mainMovie.title}|${mainMovie.hall}|${matchingMovieSeats}`); const qrData = encodeURIComponent(`EAGLE-IMAX|${mainMovie.title}|${mainMovie.hall}|${matchingMovieSeats}`);
const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${qrData}&bgcolor=ffffff`; const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${qrData}&bgcolor=ffffff`;
ticketContainer.innerHTML = ` ticketContainer.innerHTML = /*html*/`
<div class="luxury-ticket"> <div class="luxury-ticket">
<div class="ticket-left"> <div class="ticket-left">
<img src="${mainMovie.img}" class="ticket-poster" alt="${mainMovie.title}"> <img src="${mainMovie.img}" class="ticket-poster" alt="${mainMovie.title}">
@@ -115,7 +119,7 @@ function generateTicket() {
`; `;
} }
function saveOrderForCurrentUser(orderItems, orderTotal) { function saveOrderForCurrentUser(orderItems: any[], orderTotal: any) {
if (typeof currentUser === "undefined" || !currentUser) { if (typeof currentUser === "undefined" || !currentUser) {
return; return;
} }
@@ -131,6 +135,7 @@ function saveOrderForCurrentUser(orderItems, orderTotal) {
paymentMethod: selectedPaymentMethod || "-" paymentMethod: selectedPaymentMethod || "-"
}; };
//@ts-ignore
const userIndex = users.findIndex((entry) => entry.email === currentUser.email); const userIndex = users.findIndex((entry) => entry.email === currentUser.email);
if (userIndex === -1) { if (userIndex === -1) {
return; return;
@@ -144,7 +149,7 @@ function saveOrderForCurrentUser(orderItems, orderTotal) {
localStorage.setItem("eagleUsers", JSON.stringify(users)); localStorage.setItem("eagleUsers", JSON.stringify(users));
} }
function reserveSeatsAfterPayment(orderItems) { function reserveSeatsAfterPayment(orderItems: any[]) {
const movieItems = orderItems.filter((item) => item.category === "movie"); const movieItems = orderItems.filter((item) => item.category === "movie");
movieItems.forEach((item) => { movieItems.forEach((item) => {
@@ -166,7 +171,7 @@ function completeCheckout() {
saveOrderForCurrentUser(orderItems, orderTotal); saveOrderForCurrentUser(orderItems, orderTotal);
reserveSeatsAfterPayment(orderItems); reserveSeatsAfterPayment(orderItems);
cart = []; emptyCart?.()
saveCart?.(); saveCart?.();
renderCart?.(); renderCart?.();
} }
@@ -180,7 +185,7 @@ function bindCheckoutEvents() {
const nextButton = document.getElementById("btn-next-step-2"); const nextButton = document.getElementById("btn-next-step-2");
const backButton = document.getElementById("btn-back-to-step1"); const backButton = document.getElementById("btn-back-to-step1");
const payNowButton = document.getElementById("btn-pay-now"); const payNowButton = document.getElementById("btn-pay-now") as HTMLButtonElement;
document.querySelectorAll(".payment-method").forEach((method) => { document.querySelectorAll(".payment-method").forEach((method) => {
method.addEventListener("click", () => { method.addEventListener("click", () => {
@@ -189,6 +194,7 @@ function bindCheckoutEvents() {
}); });
method.classList.add("selected"); method.classList.add("selected");
//@ts-ignore
selectedPaymentMethod = method.dataset.method || ""; selectedPaymentMethod = method.dataset.method || "";
nextButton?.classList.remove("hidden"); nextButton?.classList.remove("hidden");
}); });

8
src/interfaces.ts Normal file
View File

@@ -0,0 +1,8 @@
export interface User {
firstName: string;
lastName: string;
email: string;
hashedPassword: string;
orders: any[]; // TODO: figure out proper array type of orders. Probably smartest do create an Order interface which this would be an array of
paymentMethods: any[]; // TODO: figure out proper array type of paymentMethods. create paymentMethod interface and make this an array of it
}

120
main.js → src/main.ts
View File

@@ -1,13 +1,18 @@
// Shared app state for legacy script files (account.js, booking.js, cart.js, checkout.js) import { currentUser, loginUser, openAccountDashboard, registerUser } from "./account";
var prices = { normal: 11.0, imax: 15.0, vip: 12.0, dbox: 16.0 }; import { openBooking } from "./booking";
var seatLayouts = { import { renderCart, saveCart, updateCartBadge } from "./cart";
import { renderCheckout } from "./checkout";
// Shared app state for legacy script files (account.js, booking.js, cart.js, checkout.js)
export const prices: Record<string, number> = { normal: 11.0, imax: 15.0, vip: 12.0, dbox: 16.0 };
export var seatLayouts = {
"Kino 1": { rows: 6, left: 3, right: 7, vipRows: [5], dbox: [] }, "Kino 1": { rows: 6, left: 3, right: 7, vipRows: [5], dbox: [] },
"Kino 2": { rows: 7, left: 5, right: 5, vipRows: [6], dbox: [] }, "Kino 2": { rows: 7, left: 5, right: 5, vipRows: [6], dbox: [] },
"Deluxe 1": { rows: 10, left: 7, right: 8, vipRows: [9], dbox: [{ r: 4, c: 5, w: 4 }] }, "Deluxe 1": { rows: 10, left: 7, right: 8, vipRows: [9], dbox: [{ r: 4, c: 5, w: 4 }] },
IMAX: { rows: 15, left: 10, right: 10, vipRows: [], dbox: [], isImax: true } IMAX: { rows: 15, left: 10, right: 10, vipRows: [], dbox: [], isImax: true }
}; };
var cart = JSON.parse(localStorage.getItem("eagleCart")) || []; export var cart = JSON.parse(localStorage.getItem("eagleCart") || '{}');
var occupiedSeatsData = JSON.parse(localStorage.getItem("eagleOccupied")) || {}; export var occupiedSeatsData = JSON.parse(localStorage.getItem("eagleOccupied") || '{}');
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const views = { const views = {
@@ -326,10 +331,10 @@ document.addEventListener("DOMContentLoaded", () => {
["13:00", "16:00", "18:20", "20:40"] ["13:00", "16:00", "18:20", "20:40"]
]; ];
let movieProgram = []; let movieProgram: any = []; // TODO: Find type
let heroItems = []; let heroItems: any = []; // TODO: find Type
let heroIndex = 0; let heroIndex = 0;
let heroTimer = null; let heroTimer:any = null; // TODO: find type
const weekdayShort = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]; const weekdayShort = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
@@ -348,7 +353,7 @@ document.addEventListener("DOMContentLoaded", () => {
window.scrollTo({ top: 0, behavior: "smooth" }); window.scrollTo({ top: 0, behavior: "smooth" });
}; };
const showMovieList = (programIndexToFocus = null) => { const showMovieList = (programIndexToFocus:number = NaN) => {
hideAllViews(); hideAllViews();
views.list?.classList.remove("hidden"); views.list?.classList.remove("hidden");
@@ -365,7 +370,7 @@ document.addEventListener("DOMContentLoaded", () => {
} }
}; };
const showStaticView = (viewElement) => { const showStaticView = (viewElement: HTMLElement) => {
if (!viewElement) { if (!viewElement) {
return; return;
} }
@@ -394,20 +399,20 @@ document.addEventListener("DOMContentLoaded", () => {
ui.bookingModal?.classList.add("hidden"); ui.bookingModal?.classList.add("hidden");
}; };
const escapeHtml = (value) => String(value || "") const escapeHtml = (value: string) => String(value || "")
.replaceAll("&", "&amp;") .replaceAll("&", "&amp;")
.replaceAll("<", "&lt;") .replaceAll("<", "&lt;")
.replaceAll(">", "&gt;") .replaceAll(">", "&gt;")
.replaceAll('"', "&quot;") .replaceAll('"', "&quot;")
.replaceAll("'", "&#39;"); .replaceAll("'", "&#39;");
const formatDateShort = (dateObj) => { const formatDateShort = (dateObj: any) => {
const day = String(dateObj.getDate()).padStart(2, "0"); const day = String(dateObj.getDate()).padStart(2, "0");
const month = String(dateObj.getMonth() + 1).padStart(2, "0"); const month = String(dateObj.getMonth() + 1).padStart(2, "0");
return `${day}.${month}.`; return `${day}.${month}.`;
}; };
const buildDayMeta = (offset) => { const buildDayMeta = (offset: number) => {
const date = new Date(); const date = new Date();
date.setHours(0, 0, 0, 0); date.setHours(0, 0, 0, 0);
date.setDate(date.getDate() + offset); date.setDate(date.getDate() + offset);
@@ -441,14 +446,15 @@ document.addEventListener("DOMContentLoaded", () => {
}; };
}; };
const buildScheduleForMovie = (movieIndex) => { const buildScheduleForMovie = (movieIndex: number) => {
return Array.from({ length: 7 }, (_, dayOffset) => { return Array.from({ length: 7 }, (_, dayOffset) => {
const dayMeta = buildDayMeta(dayOffset); const dayMeta = buildDayMeta(dayOffset);
const pattern = timePatterns[(movieIndex + dayOffset) % timePatterns.length]; const pattern = timePatterns[(movieIndex + dayOffset) % timePatterns.length] || "Error reading";
const desiredCount = 4 + ((movieIndex + dayOffset) % 2); const desiredCount = 4 + ((movieIndex + dayOffset) % 2);
const showCount = Math.min(pattern.length, desiredCount); const showCount = Math.min(pattern.length, desiredCount);
const showings = pattern.slice(0, showCount).map((time, slotIndex) => { //@ts-ignore
const showings = pattern.slice(0, showCount).map((time: any, slotIndex: number) => { // TODO: fix map issue
const hall = hallRotation[(movieIndex + dayOffset + slotIndex) % hallRotation.length]; const hall = hallRotation[(movieIndex + dayOffset + slotIndex) % hallRotation.length];
return { time, hall }; return { time, hall };
}); });
@@ -468,7 +474,7 @@ document.addEventListener("DOMContentLoaded", () => {
heroItems = movieProgram.slice(0, 5); heroItems = movieProgram.slice(0, 5);
}; };
const setHeroSlide = (index) => { const setHeroSlide = (index: number) => {
if (!heroItems.length || !ui.heroSlider) { if (!heroItems.length || !ui.heroSlider) {
return; return;
} }
@@ -497,17 +503,18 @@ document.addEventListener("DOMContentLoaded", () => {
return; return;
} }
ui.heroSlider.innerHTML = heroItems.map((movie, index) => ` ui.heroSlider.innerHTML = heroItems.map((movie: any, index: number) => `
<div class="hero-slide ${index === 0 ? "active" : ""}" style="background-image: linear-gradient(118deg, rgba(0,0,0,0.34), rgba(0,0,0,0.04)), url('${escapeHtml(movie.backdrop || movie.poster)}');"></div> <div class="hero-slide ${index === 0 ? "active" : ""}" style="background-image: linear-gradient(118deg, rgba(0,0,0,0.34), rgba(0,0,0,0.04)), url('${escapeHtml(movie.backdrop || movie.poster)}');"></div>
`).join(""); `).join("");
if (ui.heroDots) { if (ui.heroDots) {
ui.heroDots.innerHTML = heroItems.map((_, index) => ` ui.heroDots.innerHTML = heroItems.map((_:any, index: number) => `
<button type="button" class="hero-dot ${index === 0 ? "active" : ""}" data-hero-index="${index}"></button> <button type="button" class="hero-dot ${index === 0 ? "active" : ""}" data-hero-index="${index}"></button>
`).join(""); `).join("");
ui.heroDots.addEventListener("click", (event) => { ui.heroDots.addEventListener("click", (event: any) => {
const dot = event.target.closest(".hero-dot"); const dotTarget = event.target || 0;
const dot = dotTarget.closest(".hero-dot");
if (!dot) { if (!dot) {
return; return;
} }
@@ -538,7 +545,8 @@ document.addEventListener("DOMContentLoaded", () => {
return; return;
} }
ui.nowRunningRow.innerHTML = movieProgram.map((movie, index) => ` // TODO: implement movie interface
ui.nowRunningRow.innerHTML = movieProgram.map((movie: any, index: number) => /*html*/`
<article class="running-poster"> <article class="running-poster">
<img src="${escapeHtml(movie.poster)}" alt="${escapeHtml(movie.title)}"> <img src="${escapeHtml(movie.poster)}" alt="${escapeHtml(movie.title)}">
<div class="running-meta"> <div class="running-meta">
@@ -550,7 +558,7 @@ document.addEventListener("DOMContentLoaded", () => {
`).join(""); `).join("");
}; };
const renderScheduleRows = (programIndex, dayIndex) => { const renderScheduleRows = (programIndex: number, dayIndex: number) => {
const movie = movieProgram[programIndex]; const movie = movieProgram[programIndex];
if (!movie) { if (!movie) {
return; return;
@@ -562,7 +570,7 @@ document.addEventListener("DOMContentLoaded", () => {
return; return;
} }
body.innerHTML = day.showings.map((showing) => ` body.innerHTML = day.showings.map((showing: { hall: string; time: string; }) => /*html*/`
<button class="schedule-row time-chip program-time-row" data-movie="${escapeHtml(movie.title)}" data-hall="${escapeHtml(showing.hall)}" data-time="${escapeHtml(showing.time)}"> <button class="schedule-row time-chip program-time-row" data-movie="${escapeHtml(movie.title)}" data-hall="${escapeHtml(showing.hall)}" data-time="${escapeHtml(showing.time)}">
<span>${escapeHtml(day.long)}</span> <span>${escapeHtml(day.long)}</span>
<span class="hall-pill">${escapeHtml(showing.hall)}</span> <span class="hall-pill">${escapeHtml(showing.hall)}</span>
@@ -576,15 +584,15 @@ document.addEventListener("DOMContentLoaded", () => {
return; return;
} }
ui.movieProgramList.innerHTML = movieProgram.map((movie, programIndex) => { ui.movieProgramList.innerHTML = movieProgram.map((movie: { schedule: any[]; poster: string; title: string; fsk: string; duration: any; genre: string; description: string; }, programIndex: any) => {
const dayTabs = movie.schedule.map((day, dayIndex) => ` const dayTabs = movie.schedule.map((day, dayIndex) => /*html*/`
<button type="button" class="program-day-tab ${dayIndex === 0 ? "active" : ""}" data-program-index="${programIndex}" data-day-index="${dayIndex}"> <button type="button" class="program-day-tab ${dayIndex === 0 ? "active" : ""}" data-program-index="${programIndex}" data-day-index="${dayIndex}">
<span>${escapeHtml(day.short)}</span> <span>${escapeHtml(day.short)}</span>
<small>${escapeHtml(formatDateShort(day.date))}</small> <small>${escapeHtml(formatDateShort(day.date))}</small>
</button> </button>
`).join(""); `).join("");
return ` return /*html*/`
<article class="detailed-card program-card reveal-on-scroll" data-program-index="${programIndex}"> <article class="detailed-card program-card reveal-on-scroll" data-program-index="${programIndex}">
<div class="card-left"> <div class="card-left">
<img src="${escapeHtml(movie.poster)}" alt="${escapeHtml(movie.title)}"> <img src="${escapeHtml(movie.poster)}" alt="${escapeHtml(movie.title)}">
@@ -610,7 +618,7 @@ document.addEventListener("DOMContentLoaded", () => {
`; `;
}).join(""); }).join("");
movieProgram.forEach((_, programIndex) => { movieProgram.forEach((_: any, programIndex: number) => {
renderScheduleRows(programIndex, 0); renderScheduleRows(programIndex, 0);
}); });
}; };
@@ -658,12 +666,16 @@ document.addEventListener("DOMContentLoaded", () => {
ui.linkSnacks?.addEventListener("click", (event) => { ui.linkSnacks?.addEventListener("click", (event) => {
event.preventDefault(); event.preventDefault();
if (views.snacks) {
showStaticView(views.snacks); showStaticView(views.snacks);
}
}); });
ui.linkAbout?.addEventListener("click", (event) => { ui.linkAbout?.addEventListener("click", (event) => {
event.preventDefault(); event.preventDefault();
if (views.about) {
showStaticView(views.about); showStaticView(views.about);
}
}); });
ui.linkCart?.addEventListener("click", (event) => { ui.linkCart?.addEventListener("click", (event) => {
@@ -693,17 +705,17 @@ document.addEventListener("DOMContentLoaded", () => {
}; };
const bindProgramActions = () => { const bindProgramActions = () => {
views.moviesGrid?.addEventListener("click", (event) => { views.moviesGrid?.addEventListener("click", (event:any) => {
const trigger = event.target.closest(".open-program-btn"); const trigger = event.target.closest(".open-program-btn");
if (!trigger) { if (!trigger) {
return; return;
} }
const programIndex = Number(trigger.dataset.programIndex || 0); const programIndex = Number(trigger.dataset.programIndex) || 0;
showMovieList(programIndex); showMovieList(programIndex);
}); });
ui.movieProgramList?.addEventListener("click", (event) => { ui.movieProgramList?.addEventListener("click", (event:any) => {
const dayButton = event.target.closest(".program-day-tab"); const dayButton = event.target.closest(".program-day-tab");
if (!dayButton) { if (!dayButton) {
return; return;
@@ -713,7 +725,7 @@ document.addEventListener("DOMContentLoaded", () => {
const dayIndex = Number(dayButton.dataset.dayIndex || 0); const dayIndex = Number(dayButton.dataset.dayIndex || 0);
const tabRow = dayButton.closest(".program-day-tabs"); const tabRow = dayButton.closest(".program-day-tabs");
tabRow?.querySelectorAll(".program-day-tab").forEach((tab) => tab.classList.remove("active")); tabRow?.querySelectorAll(".program-day-tab").forEach((tab: { classList: { remove: (arg0: string) => any; }; }) => tab.classList.remove("active"));
dayButton.classList.add("active"); dayButton.classList.add("active");
renderScheduleRows(programIndex, dayIndex); renderScheduleRows(programIndex, dayIndex);
@@ -739,7 +751,7 @@ document.addEventListener("DOMContentLoaded", () => {
openButtons.forEach((button) => { openButtons.forEach((button) => {
button.addEventListener("click", () => { button.addEventListener("click", () => {
const targetId = button.getAttribute("data-home-view-open"); const targetId = button.getAttribute("data-home-view-open") as keyof typeof targetMap;
const target = targetId ? targetMap[targetId] : null; const target = targetId ? targetMap[targetId] : null;
if (target) { if (target) {
showStaticView(target); showStaticView(target);
@@ -792,10 +804,11 @@ document.addEventListener("DOMContentLoaded", () => {
const THEME_KEY = "eagleTheme"; const THEME_KEY = "eagleTheme";
const applyTheme = (theme) => { const applyTheme = (theme: any) => {
const isLight = theme === "light"; const isLight = theme === "light";
document.body.classList.toggle("theme-light", isLight); document.body.classList.toggle("theme-light", isLight);
document.body.classList.toggle("theme-dark", !isLight); document.body.classList.toggle("theme-dark", !isLight);
//@ts-ignore
ui.themeToggle.classList.toggle("is-light", isLight); ui.themeToggle.classList.toggle("is-light", isLight);
localStorage.setItem(THEME_KEY, isLight ? "light" : "dark"); localStorage.setItem(THEME_KEY, isLight ? "light" : "dark");
}; };
@@ -812,14 +825,14 @@ document.addEventListener("DOMContentLoaded", () => {
const bindAccountActions = () => { const bindAccountActions = () => {
const registerModal = document.getElementById("register-modal"); const registerModal = document.getElementById("register-modal");
const forgotModal = document.getElementById("forgot-modal"); const forgotModal = document.getElementById("forgot-modal");
const forgotEmailInput = document.getElementById("forgot-email"); const forgotEmailInput = document.getElementById("forgot-email") as HTMLInputElement;
const resetMessage = document.getElementById("reset-message"); const resetMessage = document.getElementById("reset-message");
const loginError = document.getElementById("login-error"); const loginError = document.getElementById("login-error");
const loginEmailInput = document.getElementById("login-email"); const loginEmailInput = document.getElementById("login-email");
const loginPasswordInput = document.getElementById("login-password"); const loginPasswordInput = document.getElementById("login-password");
const openModal = (modal) => modal?.classList.remove("hidden"); const openModal = (modal: HTMLElement | null) => modal?.classList.remove("hidden");
const closeModal = (modal) => modal?.classList.add("hidden"); const closeModal = (modal: HTMLElement | null) => modal?.classList.add("hidden");
const triggerLogin = () => { const triggerLogin = () => {
loginError?.classList.add("hidden"); loginError?.classList.add("hidden");
if (typeof loginUser === "function") { if (typeof loginUser === "function") {
@@ -855,7 +868,7 @@ document.addEventListener("DOMContentLoaded", () => {
}); });
document.getElementById("btn-forgot-password")?.addEventListener("click", () => { document.getElementById("btn-forgot-password")?.addEventListener("click", () => {
if (forgotEmailInput) { if (forgotEmailInput != null) {
forgotEmailInput.value = ""; forgotEmailInput.value = "";
} }
resetMessage?.classList.add("hidden"); resetMessage?.classList.add("hidden");
@@ -900,10 +913,10 @@ document.addEventListener("DOMContentLoaded", () => {
}; };
const bindGlobalDocumentClicks = () => { const bindGlobalDocumentClicks = () => {
document.addEventListener("click", (event) => { document.addEventListener("click", (event: any) => {
if (event.target.classList.contains("opt-btn")) { if (event.target.classList.contains("opt-btn")) {
const optionGroup = event.target.parentElement; const optionGroup = event.target.parentElement;
optionGroup?.querySelectorAll(".opt-btn").forEach((button) => button.classList.remove("active")); optionGroup?.querySelectorAll(".opt-btn").forEach((button: { classList: { remove: (arg0: string) => any; }; }) => button.classList.remove("active"));
event.target.classList.add("active"); event.target.classList.add("active");
} }
@@ -912,15 +925,17 @@ document.addEventListener("DOMContentLoaded", () => {
const row = deleteBtn.closest(".cart-item-row"); const row = deleteBtn.closest(".cart-item-row");
if (row) { if (row) {
row.classList.add("slide-out-left"); row.classList.add("slide-out-left");
row.querySelectorAll("button").forEach((button) => { row.querySelectorAll("button").forEach((button: { disabled: boolean; }) => {
button.disabled = true; button.disabled = true;
}); });
setTimeout(() => { setTimeout(() => {
removeFromCartByKey(deleteBtn.dataset.key); //@ts-ignore
removeFromCartByKey(deleteBtn.dataset.key); //TODO: removeFromCartByKey doesnt exist
}, 380); }, 380);
} else { } else {
removeFromCartByKey(deleteBtn.dataset.key); //@ts-ignore
removeFromCartByKey(deleteBtn.dataset.key); //TODO: removeFromCartByKey doesnt exist
} }
return; return;
} }
@@ -949,7 +964,7 @@ document.addEventListener("DOMContentLoaded", () => {
return; return;
} }
const relatedItem = cart.find((item) => { const relatedItem = cart.find((item: { category: string; seatId: any; hall: any; time: any; title: any; }) => {
const infoText = item.category === "movie" const infoText = item.category === "movie"
? `Sitz: ${item.seatId} (${item.hall})` ? `Sitz: ${item.seatId} (${item.hall})`
: item.time; : item.time;
@@ -963,7 +978,7 @@ document.addEventListener("DOMContentLoaded", () => {
if (action === "plus") { if (action === "plus") {
cart.push({ ...relatedItem, id: Date.now() + Math.random() }); cart.push({ ...relatedItem, id: Date.now() + Math.random() });
} else { } else {
const keyList = cart.map((item) => { const keyList = cart.map((item: { category: string; seatId: any; hall: any; time: any; title: any; }) => {
const infoText = item.category === "movie" const infoText = item.category === "movie"
? `Sitz: ${item.seatId} (${item.hall})` ? `Sitz: ${item.seatId} (${item.hall})`
: item.time; : item.time;
@@ -982,7 +997,7 @@ document.addEventListener("DOMContentLoaded", () => {
}; };
const bindSnacksActions = () => { const bindSnacksActions = () => {
ui.snacksView?.addEventListener("click", (event) => { ui.snacksView?.addEventListener("click", (event:any) => {
const sizeChip = event.target.closest(".size-chip"); const sizeChip = event.target.closest(".size-chip");
if (!sizeChip) { if (!sizeChip) {
return; return;
@@ -1026,7 +1041,7 @@ document.addEventListener("DOMContentLoaded", () => {
}, 800); }, 800);
}); });
document.querySelectorAll(".tab-btn").forEach((button) => { document.querySelectorAll(".tab-btn").forEach((button: any) => {
button.addEventListener("click", () => { button.addEventListener("click", () => {
document.querySelectorAll(".tab-btn").forEach((tab) => tab.classList.remove("active")); document.querySelectorAll(".tab-btn").forEach((tab) => tab.classList.remove("active"));
button.classList.add("active"); button.classList.add("active");
@@ -1063,9 +1078,9 @@ document.addEventListener("DOMContentLoaded", () => {
} }
}); });
}; };
// @ts-ignore
window.removeFromCartByKey = function removeFromCartByKey(key) { window.removeFromCartByKey = function removeFromCartByKey(key: string) {
cart = cart.filter((item) => { cart = cart.filter((item: { category: string; seatId: any; hall: any; time: any; title: any; }) => {
const infoText = item.category === "movie" const infoText = item.category === "movie"
? `Sitz: ${item.seatId} (${item.hall})` ? `Sitz: ${item.seatId} (${item.hall})`
: item.time; : item.time;
@@ -1090,3 +1105,8 @@ document.addEventListener("DOMContentLoaded", () => {
updateCartBadge?.(); updateCartBadge?.();
renderCheckout?.(); renderCheckout?.();
}); });
export function emptyCart() {
cart = []
return
}

6
style.css
View File

@@ -2902,15 +2902,15 @@ body {
} }
.inline-halls .inline-media { .inline-halls .inline-media {
background-image: linear-gradient(120deg, rgba(0, 113, 227, 0.3), rgba(7, 10, 16, 0.55)), url('img/placeholder-hall.jpg'); background-image: linear-gradient(120deg, rgba(0, 113, 227, 0.3), rgba(7, 10, 16, 0.55)), url('img/shelter.jpg');
} }
.inline-dbox .inline-media { .inline-dbox .inline-media {
background-image: linear-gradient(120deg, rgba(255, 176, 0, 0.2), rgba(8, 12, 18, 0.62)), url('img/placeholder-dbox.jpg'); background-image: linear-gradient(120deg, rgba(255, 176, 0, 0.2), rgba(8, 12, 18, 0.62)), url('img/dbox.jpg');
} }
.inline-collectors .inline-media { .inline-collectors .inline-media {
background-image: linear-gradient(120deg, rgba(185, 124, 255, 0.15), rgba(8, 12, 18, 0.62)), url('img/placeholder-collector.jpg'); background-image: linear-gradient(120deg, rgba(185, 124, 255, 0.15), rgba(8, 12, 18, 0.62)), url('img/popcorn.jpg');
} }
.inline-content { .inline-content {

45
tsconfig.json Normal file
View File

@@ -0,0 +1,45 @@
{
// Visit https://aka.ms/tsconfig to read more about this file
"compilerOptions": {
// File Layout
"rootDir": "./src",
"outDir": "./dist",
// Environment Settings
// See also https://aka.ms/tsconfig/module
"module": "ES2020",
"target": "ES2021",
"types": [],
// For nodejs:
// "lib": ["esnext"],
// "types": ["node"],
// and npm install -D @types/node
// Other Outputs
"sourceMap": true,
"declaration": true,
"declarationMap": true,
// Stricter Typechecking Options
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
// Style Options
// "noImplicitReturns": true,
// "noImplicitOverride": true,
// "noUnusedLocals": true,
// "noUnusedParameters": true,
// "noFallthroughCasesInSwitch": true,
// "noPropertyAccessFromIndexSignature": true,
// Recommended Options
"strict": true,
"jsx": "react-jsx",
"verbatimModuleSyntax": true,
"isolatedModules": true,
"noUncheckedSideEffectImports": true,
"moduleDetection": "force",
"skipLibCheck": true,
},
"include": ["src/*"]
}