83 lines
2.8 KiB
HTML
83 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="h-full bg-gray-100">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Menu Manager | Restaurant Management</title>
|
|
<script type="module" src="src/main.js" defer></script>
|
|
</head>
|
|
<body class="h-full flex items-center justify-center p-4">
|
|
|
|
<div x-data="menuApp()" class="w-full max-w-2xl bg-white shadow-lg rounded-lg overflow-hidden font-mono">
|
|
|
|
<!-- Header & Close -->
|
|
<div class="p-6 flex justify-between items-center">
|
|
<h2 class="text-2xl font-semibold">Menu Management</h2>
|
|
<button
|
|
type="button"
|
|
@click="openMain()"
|
|
class="bg-red-400 text-white px-4 py-2 rounded hover:bg-red-500"
|
|
>Close Manager</button>
|
|
</div>
|
|
|
|
<!-- New/Edit Form -->
|
|
<div class="p-6 space-y-4">
|
|
<div class="flex gap-2">
|
|
<input
|
|
type="text"
|
|
x-model="form.name"
|
|
placeholder="Item Name"
|
|
class="flex-1 border rounded p-2"
|
|
/>
|
|
<input
|
|
type="number"
|
|
x-model.number="form.price"
|
|
placeholder="Price"
|
|
class="w-24 border rounded p-2"
|
|
step="0.01"
|
|
/>
|
|
<button
|
|
@click="saveItem()"
|
|
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
|
|
x-text="form.id ? 'Update' : 'Add'"
|
|
></button>
|
|
</div>
|
|
<textarea
|
|
x-model="form.description"
|
|
placeholder="Description"
|
|
class="w-full border rounded p-2"
|
|
rows="2"
|
|
></textarea>
|
|
</div>
|
|
|
|
<!-- Items Grid -->
|
|
<div class="bg-gray-50 p-6 border-t space-y-4 max-h-[400px] overflow-auto">
|
|
<template x-if="items.length">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<template x-for="item in items" :key="item.id">
|
|
<div class="border rounded p-4 bg-white flex flex-col justify-between">
|
|
<div>
|
|
<div class="font-semibold" x-text="item.name"></div>
|
|
<div class="text-sm text-gray-600" x-text="item.description"></div>
|
|
</div>
|
|
<div class="flex justify-between items-center mt-4">
|
|
<div class="text-gray-800 font-medium" x-text="`$${Number(item.price).toFixed(2)}`"></div>
|
|
<div class="space-x-2">
|
|
<button @click="editItem(item)" class="text-blue-500 hover:underline text-sm">Edit</button>
|
|
<button @click="deleteItem(item.id)" class="text-red-500 hover:underline text-sm">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<template x-if="!items.length">
|
|
<p class="text-gray-500 text-center">No menu items found.</p>
|
|
</template>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|