wad-lab 1.0.7 → 1.0.8

package/templates/vue-food-ordering/src/views/MenuView.vue

@@ -0,0 +1,145 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useFoodStore } from '../stores/foodStore'
+
+const store = useFoodStore()
+const selectedCategory = ref('All')
+
+const filteredItems = computed(() => {
+  if (selectedCategory.value === 'All') {
+    return store.menuItems
+  }
+  return store.menuItems.filter((item) => item.category === selectedCategory.value)
+})
+
+const selectCategory = (category) => {
+  selectedCategory.value = category
+}
+</script>
+
+<template>
+  <div class="menu-container">
+    <h2>Menu</h2>
+    
+    <div class="category-tabs">
+      <button
+        v-for="cat in store.categories"
+        :key="cat"
+        :class="{ active: selectedCategory === cat }"
+        class="tab-btn"
+        @click="selectCategory(cat)"
+      >
+        {{ cat }}
+      </button>
+    </div>
+
+    <div class="menu-grid">
+      <div v-for="item in filteredItems" :key="item.id" class="menu-card">
+        <div class="card-header">
+          <h3>{{ item.name }}</h3>
+          <span class="category-tag">{{ item.category }}</span>
+        </div>
+        <p class="description">{{ item.description }}</p>
+        <div class="card-footer">
+          <span class="price">${{ item.price.toFixed(2) }}</span>
+          <button class="add-btn" @click="store.addToCart(item)">Add to Order</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.menu-container {
+  padding: 1rem 0;
+}
+
+.category-tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.tab-btn {
+  padding: 0.5rem 1rem;
+  border: 1px solid #ccc;
+  background-color: #f8f9fa;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.tab-btn.active {
+  background-color: #007bff;
+  color: #fff;
+  border-color: #007bff;
+}
+
+.menu-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 1rem;
+}
+
+.menu-card {
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: #fff;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 0.5rem;
+}
+
+.card-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+}
+
+.category-tag {
+  font-size: 0.75rem;
+  background-color: #e9ecef;
+  padding: 0.2rem 0.5rem;
+  border-radius: 3px;
+  color: #495057;
+}
+
+.description {
+  color: #666;
+  font-size: 0.9rem;
+  margin: 0 0 1rem 0;
+  flex-grow: 1;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.price {
+  font-weight: bold;
+  font-size: 1.1rem;
+  color: #28a745;
+}
+
+.add-btn {
+  padding: 0.4rem 0.8rem;
+  background-color: #28a745;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.add-btn:hover {
+  background-color: #218838;
+}
+</style>

package/templates/vue-food-ordering/src/views/OrderCartView.vue

@@ -0,0 +1,181 @@
+<script setup>
+import { useRouter } from 'vue-router'
+import { useFoodStore } from '../stores/foodStore'
+
+const store = useFoodStore()
+const router = useRouter()
+
+const checkout = () => {
+  if (store.cart.length > 0) {
+    router.push('/order-success')
+  }
+}
+</script>
+
+<template>
+  <div class="cart-container">
+    <h2>Your Order Cart</h2>
+
+    <div v-if="store.cart.length === 0" class="empty-cart">
+      <p>Your cart is empty.</p>
+      <router-link to="/" class="menu-link">Browse Menu</router-link>
+    </div>
+
+    <div v-else>
+      <table class="cart-table">
+        <thead>
+          <tr>
+            <th>Item</th>
+            <th>Price</th>
+            <th>Quantity</th>
+            <th>Total</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in store.cart" :key="item.id">
+            <td>{{ item.name }}</td>
+            <td>${{ item.price.toFixed(2) }}</td>
+            <td class="qty-cell">
+              <button class="qty-btn" @click="store.decrementQuantity(item.id)">-</button>
+              <span class="qty-val">{{ item.quantity }}</span>
+              <button class="qty-btn" @click="store.incrementQuantity(item.id)">+</button>
+            </td>
+            <td>${{ (item.price * item.quantity).toFixed(2) }}</td>
+            <td>
+              <button class="remove-btn" @click="store.removeFromCart(item.id)">Remove</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="cart-summary">
+        <div class="summary-row">
+          <span>Subtotal:</span>
+          <span>${{ store.cartSubtotal.toFixed(2) }}</span>
+        </div>
+        <div class="summary-row">
+          <span>Tax (5%):</span>
+          <span>${{ store.taxAmount.toFixed(2) }}</span>
+        </div>
+        <div class="summary-row total-row">
+          <span>Grand Total:</span>
+          <span>${{ store.totalBill.toFixed(2) }}</span>
+        </div>
+
+        <div class="checkout-actions">
+          <button class="checkout-btn" @click="checkout">Proceed to Checkout</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cart-container {
+  padding: 1rem 0;
+}
+
+.empty-cart {
+  text-align: center;
+  padding: 2rem;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+}
+
+.menu-link {
+  display: inline-block;
+  margin-top: 0.5rem;
+  color: #007bff;
+  text-decoration: none;
+}
+
+.cart-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1.5rem;
+}
+
+.cart-table th,
+.cart-table td {
+  border: 1px solid #ddd;
+  padding: 0.75rem;
+  text-align: left;
+}
+
+.cart-table th {
+  background-color: #f8f9fa;
+}
+
+.qty-cell {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: none;
+}
+
+.qty-btn {
+  width: 28px;
+  height: 28px;
+  background-color: #e9ecef;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.qty-val {
+  min-width: 20px;
+  text-align: center;
+}
+
+.remove-btn {
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  padding: 0.3rem 0.6rem;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.cart-summary {
+  max-width: 350px;
+  margin-left: auto;
+  border: 1px solid #ddd;
+  padding: 1rem;
+  border-radius: 6px;
+  background-color: #fff;
+}
+
+.summary-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.total-row {
+  font-weight: bold;
+  font-size: 1.1rem;
+  border-top: 1px solid #ddd;
+  padding-top: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.checkout-actions {
+  margin-top: 1rem;
+}
+
+.checkout-btn {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.checkout-btn:hover {
+  background-color: #0069d9;
+}
+</style>

package/templates/vue-food-ordering/src/views/OrderSuccessView.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useFoodStore } from '../stores/foodStore'
+
+const store = useFoodStore()
+const router = useRouter()
+
+const orderId = ref('ORD-' + Math.floor(100000 + Math.random() * 900000))
+const totalPaid = ref(store.totalBill)
+
+const orderAgain = () => {
+  store.clearCart()
+  router.push('/')
+}
+</script>
+
+<template>
+  <div class="success-container">
+    <div class="success-card">
+      <div class="success-icon">&#10003;</div>
+      <h2>Order Placed Successfully!</h2>
+      <p>Thank you for your order. We are preparing your delicious food.</p>
+
+      <div class="order-details">
+        <div class="detail-row">
+          <span>Order ID:</span>
+          <strong>#{{ orderId }}</strong>
+        </div>
+        <div class="detail-row">
+          <span>Total Paid:</span>
+          <strong>${{ totalPaid.toFixed(2) }}</strong>
+        </div>
+      </div>
+
+      <button class="order-again-btn" @click="orderAgain">Order Again</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.success-container {
+  display: flex;
+  justify-content: center;
+  padding: 3rem 1rem;
+}
+
+.success-card {
+  max-width: 480px;
+  width: 100%;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 2rem;
+  text-align: center;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.success-icon {
+  font-size: 3rem;
+  color: #28a745;
+  margin-bottom: 1rem;
+}
+
+.order-details {
+  margin: 1.5rem 0;
+  padding: 1rem;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.order-again-btn {
+  background-color: #28a745;
+  color: white;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.order-again-btn:hover {
+  background-color: #218838;
+}
+</style>

package/templates/vue-food-ordering/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()]
+})

package/templates/vue-symposium-system/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Symposium Management System</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>

package/templates/vue-symposium-system/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "vue-symposium-system",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "pinia": "^4.1.0",
+    "vue": "^3.5.44"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.10",
+    "vite": "^8.3.4"
+  }
+}