wad-lab 1.2.2 → 1.2.3

package/templates/fullstack-springboot-vue/frontend/vue-axios-router-pinia/src/views/EmployeeView.vue

@@ -1,257 +1,143 @@
-<template>
-  <div class="employee-view">
-    <h2>Employees Management</h2>
-
-    <section class="card">
-      <h3>Add Employee</h3>
-      <form @submit.prevent="handleSubmit" class="form">
-        <div class="form-group">
-          <label for="emp-name">Full Name</label>
-          <input
-            id="emp-name"
-            v-model="form.name"
-            type="text"
-            required
-            placeholder="e.g. Jane Doe"
-          />
-        </div>
-        <div class="form-group">
-          <label for="emp-email">Email Address</label>
-          <input
-            id="emp-email"
-            v-model="form.email"
-            type="email"
-            required
-            placeholder="e.g. jane@example.com"
-          />
-        </div>
-        <div class="form-group">
-          <label for="emp-dept">Department</label>
-          <select id="emp-dept" v-model="form.departmentId" required>
-            <option value="" disabled>Select Department</option>
-            <option v-for="dept in companyStore.departments" :key="dept.id" :value="dept.id">
-              {{ dept.name }} ({{ dept.code }})
-            </option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label for="emp-salary">Salary</label>
-          <input
-            id="emp-salary"
-            v-model.number="form.salary"
-            type="number"
-            min="0"
-            step="any"
-            required
-            placeholder="e.g. 75000"
-          />
-        </div>
-        <button type="submit" class="btn btn-primary">Add Employee</button>
-      </form>
-    </section>
-
-    <section class="card table-card">
-      <h3>Employee List</h3>
-      <div class="table-wrapper">
-        <table>
-          <thead>
-            <tr>
-              <th>ID</th>
-              <th>Name</th>
-              <th>Email</th>
-              <th>Department</th>
-              <th>Salary</th>
-              <th>Action</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-if="companyStore.employees.length === 0">
-              <td colspan="6" class="empty">No employees found</td>
-            </tr>
-            <tr v-for="emp in companyStore.employees" :key="emp.id">
-              <td>{{ emp.id }}</td>
-              <td>{{ emp.name }}</td>
-              <td>{{ emp.email }}</td>
-              <td>{{ companyStore.getDepartmentName(emp.departmentId) }}</td>
-              <td>${{ Number(emp.salary).toLocaleString() }}</td>
-              <td>
-                <button @click="handlePatchEmployee(emp.id, emp.salary)" class="btn btn-warning">Patch</button>
-                <button @click="handleDelete(emp.id)" class="btn btn-danger">Delete</button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script setup>
-import { reactive, onMounted } from 'vue'
-import { useCompanyStore } from '../stores/companyStore'
-
-const companyStore = useCompanyStore()
-
-const form = reactive({
-  name: '',
-  email: '',
-  departmentId: '',
-  salary: ''
-})
-
-const handleSubmit = async () => {
-  await companyStore.addEmployee({
-    name: form.name,
-    email: form.email,
-    departmentId: Number(form.departmentId),
-    salary: Number(form.salary)
-  })
-  form.name = ''
-  form.email = ''
-  form.departmentId = ''
-  form.salary = ''
-}
-
-const handleDelete = async (id) => {
-  await companyStore.deleteEmployee(id)
-}
-
-const handlePatchEmployee = async (id, salary) => {
-  const newSalary = prompt('New salary:', salary)
-  if (newSalary !== null && newSalary !== '') {
-    await companyStore.patchEmployee(id, { salary: Number(newSalary) })
-  }
-}
-
-onMounted(() => {
-  companyStore.fetchEmployees()
-  companyStore.fetchDepartments()
-})
-</script>
-
-<style scoped>
-.employee-view h2 {
-  font-size: 22px;
-  margin-bottom: 20px;
-  color: #1a1a1a;
-}
-
-.card {
-  background: #ffffff;
-  border: 1px solid #e1e4e8;
-  border-radius: 8px;
-  padding: 20px;
-  margin-bottom: 24px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
-
-.card h3 {
-  font-size: 16px;
-  margin-bottom: 16px;
-  color: #333333;
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-width: 400px;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.form-group label {
-  font-size: 13px;
-  font-weight: 600;
-  color: #444444;
-}
-
-.form-group input,
-.form-group select {
-  padding: 8px 10px;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-  font-size: 14px;
-  background-color: #ffffff;
-}
-
-.form-group input:focus,
-.form-group select:focus {
-  outline: none;
-  border-color: #0066cc;
-}
-
-.btn {
-  padding: 8px 14px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.btn-primary {
-  background-color: #0066cc;
-  color: #ffffff;
-  align-self: flex-start;
-}
-
-.btn-primary:hover {
-  background-color: #0052a3;
-}
-
-.btn-danger {
-  background-color: #d9383a;
-  color: #ffffff;
-  padding: 4px 8px;
-  font-size: 12px;
-}
-
-.btn-danger:hover {
-  background-color: #b8282a;
-}
-
-.btn-warning {
-  background-color: #f0ad4e;
-  color: #ffffff;
-  padding: 4px 8px;
-  font-size: 12px;
-  margin-right: 6px;
-}
-
-.btn-warning:hover {
-  background-color: #ec971f;
-}
-
-.table-wrapper {
-  overflow-x: auto;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-
-th, td {
-  text-align: left;
-  padding: 8px 10px;
-  border-bottom: 1px solid #eeeeee;
-}
-
-th {
-  background-color: #fafbfc;
-  color: #555555;
-  font-weight: 600;
-}
-
-.empty {
-  text-align: center;
-  color: #888888;
-  padding: 16px;
-}
-</style>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useCompanyStore } from '../stores/companyStore'
+import ItemTable from '../components/ItemTable.vue'
+import ItemFormModal from '../components/ItemFormModal.vue'
+import ItemPatchModal from '../components/ItemPatchModal.vue'
+
+const store = useCompanyStore()
+const isFormModalOpen = ref(false)
+const isPatchModalOpen = ref(false)
+const selectedEmp = ref(null)
+
+const columns = [
+  { key: 'id', label: 'ID' },
+  { key: 'name', label: 'Name' },
+  { key: 'email', label: 'Email' },
+  {
+    key: 'departmentId',
+    label: 'Department',
+    format: (val) => {
+      const dept = store.departments.find(d => d.id === val)
+      return dept ? dept.name : (val ? 'Dept #' + val : 'N/A')
+    }
+  },
+  {
+    key: 'salary',
+    label: 'Salary',
+    format: (val) => '$' + Number(val || 0).toLocaleString()
+  }
+]
+
+const formFields = ref([])
+
+function prepareFormFields() {
+  formFields.value = [
+    { key: 'name', label: 'Full Name', required: true, placeholder: 'e.g. John Doe' },
+    { key: 'email', label: 'Email', type: 'email', required: true, placeholder: 'john@example.com' },
+    {
+      key: 'departmentId',
+      label: 'Department',
+      type: 'select',
+      required: true,
+      options: store.departments.map(d => ({ label: d.name + ' (' + d.code + ')', value: d.id }))
+    },
+    { key: 'salary', label: 'Salary ($)', type: 'number', required: true, placeholder: '60000' }
+  ]
+}
+
+function openAddEmployee() {
+  prepareFormFields()
+  isFormModalOpen.value = true
+}
+
+async function handleCreate(data) {
+  await store.createEmployee({
+    name: data.name,
+    email: data.email,
+    departmentId: Number(data.departmentId),
+    salary: Number(data.salary)
+  })
+  isFormModalOpen.value = false
+}
+
+function handleOpenPatch(emp) {
+  selectedEmp.value = emp
+  isPatchModalOpen.value = true
+}
+
+async function handleApplyPatch(newSalary) {
+  if (selectedEmp.value && newSalary) {
+    await store.patchEmployee(selectedEmp.value.id, { salary: Number(newSalary) })
+  }
+  isPatchModalOpen.value = false
+}
+
+async function handleDelete(id) {
+  if (confirm('Delete this employee?')) {
+    await store.deleteEmployee(id)
+  }
+}
+
+onMounted(() => {
+  store.fetchDepartments()
+  store.fetchEmployees()
+})
+</script>
+
+<template>
+  <div class="view-container">
+    <div class="view-header">
+      <h2>Employee Management (Pinia)</h2>
+      <button type="button" class="btn btn-primary" @click="openAddEmployee">Add Employee</button>
+    </div>
+
+    <ItemTable
+      :columns="columns"
+      :items="store.employees"
+      :loading="store.loading"
+      @patch="handleOpenPatch"
+      @delete="handleDelete"
+    />
+
+    <ItemFormModal
+      :show="isFormModalOpen"
+      title="Create Employee"
+      :fields="formFields"
+      @close="isFormModalOpen = false"
+      @submit="handleCreate"
+    />
+
+    <ItemPatchModal
+      :show="isPatchModalOpen"
+      title="Patch Employee Salary"
+      field-label="New Salary ($)"
+      :initial-value="selectedEmp ? selectedEmp.salary : ''"
+      @close="isPatchModalOpen = false"
+      @submit="handleApplyPatch"
+    />
+  </div>
+</template>
+
+<style scoped>
+.view-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.view-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.btn-primary {
+  background: #0284c7;
+  color: #fff;
+  border: none;
+  padding: 8px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+</style>

package/templates/game-bingo/script.js

@@ -113,6 +113,6 @@ function checkBingo() {
 
     if (displayLines >= 5 && !isWon) {
         isWon = true;
-        document.getElementById("winBanner").textContent = "🎉 BINGO! You won! 🎉";
+        document.getElementById("winBanner").textContent = "BINGO! You won!";
     }
 }

package/templates/game-memory-cards/script.js

@@ -1,4 +1,4 @@
-const symbols = ["🐶", "🐱", "🐭", "🐹", "🐰", "🦊"];
+const symbols = ["A", "B", "C", "D", "E", "F"];
 let cards = [];
 let flippedCards = [];
 let matchedCount = 0;
@@ -73,7 +73,7 @@ function checkMatch() {
 
         if (matchedCount === symbols.length) {
             setTimeout(function () {
-                alert("Congratulations! You won in " + moves + " moves! 🎉");
+                alert("Congratulations! You won in " + moves + " moves!");
             }, 300);
         }
     } else {

package/templates/game-rock-paper-scissors/index.html

@@ -18,9 +18,9 @@
         </div>
 
         <div class="controls">
-            <button type="button" class="btn" onclick="playGame('Rock')">✊ Rock</button>
-            <button type="button" class="btn" onclick="playGame('Paper')">✋ Paper</button>
-            <button type="button" class="btn" onclick="playGame('Scissors')">✌ Scissors</button>
+            <button type="button" class="btn" onclick="playGame('Rock')">Rock</button>
+            <button type="button" class="btn" onclick="playGame('Paper')">Paper</button>
+            <button type="button" class="btn" onclick="playGame('Scissors')">Scissors</button>
         </div>
 
         <div class="results-box">

package/templates/game-rock-paper-scissors/script.js

@@ -22,11 +22,11 @@ function playGame(playerChoice) {
         (playerChoice === "Paper" && computerChoice === "Rock") ||
         (playerChoice === "Scissors" && computerChoice === "Paper")
     ) {
-        result = "You Win! 🎉";
+        result = "You Win!";
         playerScore++;
         document.getElementById("playerScore").textContent = playerScore;
     } else {
-        result = "Computer Wins! 💻";
+        result = "Computer Wins!";
         computerScore++;
         document.getElementById("computerScore").textContent = computerScore;
     }

package/templates/game-tic-tac-toe/script.js

@@ -54,14 +54,14 @@ function checkResult() {
     }
 
     if (roundWon) {
-        document.getElementById("status").textContent = "Player " + currentPlayer + " Wins! 🎉";
+        document.getElementById("status").textContent = "Player " + currentPlayer + " Wins!";
         gameActive = false;
         return;
     }
 
     const roundDraw = !board.includes("");
     if (roundDraw) {
-        document.getElementById("status").textContent = "Game Draw! 🤝";
+        document.getElementById("status").textContent = "Game Draw!";
         gameActive = false;
         return;
     }

package/templates/game-whack-a-mole/index.html

@@ -19,15 +19,15 @@
         <button type="button" class="btn-start" id="startBtn" onclick="startGame()">Start Game</button>
 
         <div class="grid">
-            <div class="hole" data-index="0"><div class="mole" onclick="whackMole(this)">🐹</div></div>
-            <div class="hole" data-index="1"><div class="mole" onclick="whackMole(this)">🐹</div></div>
-            <div class="hole" data-index="2"><div class="mole" onclick="whackMole(this)">🐹</div></div>
-            <div class="hole" data-index="3"><div class="mole" onclick="whackMole(this)">🐹</div></div>
-            <div class="hole" data-index="4"><div class="mole" onclick="whackMole(this)">🐹</div></div>
-            <div class="hole" data-index="5"><div class="mole" onclick="whackMole(this)">🐹</div></div>
-            <div class="hole" data-index="6"><div class="mole" onclick="whackMole(this)">🐹</div></div>
-            <div class="hole" data-index="7"><div class="mole" onclick="whackMole(this)">🐹</div></div>
-            <div class="hole" data-index="8"><div class="mole" onclick="whackMole(this)">🐹</div></div>
+            <div class="hole" data-index="0"><div class="mole" onclick="whackMole(this)">[TARGET]</div></div>
+            <div class="hole" data-index="1"><div class="mole" onclick="whackMole(this)">[TARGET]</div></div>
+            <div class="hole" data-index="2"><div class="mole" onclick="whackMole(this)">[TARGET]</div></div>
+            <div class="hole" data-index="3"><div class="mole" onclick="whackMole(this)">[TARGET]</div></div>
+            <div class="hole" data-index="4"><div class="mole" onclick="whackMole(this)">[TARGET]</div></div>
+            <div class="hole" data-index="5"><div class="mole" onclick="whackMole(this)">[TARGET]</div></div>
+            <div class="hole" data-index="6"><div class="mole" onclick="whackMole(this)">[TARGET]</div></div>
+            <div class="hole" data-index="7"><div class="mole" onclick="whackMole(this)">[TARGET]</div></div>
+            <div class="hole" data-index="8"><div class="mole" onclick="whackMole(this)">[TARGET]</div></div>
         </div>
     </div>
 </body>

package/templates/servlet-basic/WEB-INF/ItemServlet.java

@@ -1,3 +1,16 @@
+/*
+COMPILE FROM INSIDE WEB-INF DIRECTORY:
+Linux:   javac -cp "../../../lib/*" -d classes ItemServlet.java
+Windows: javac -cp "../../../lib/*" -d classes ItemServlet.java
+
+RUN TOMCAT:
+Linux:   ../../../bin/startup.sh
+Windows: ..\..\..\bin\startup.bat
+
+URL:
+http://localhost:8080/servlet-basic/index.html
+*/
+
 import java.io.IOException;
 import java.io.PrintWriter;
 import javax.servlet.ServletException;

package/templates/servlet-flow/WEB-INF/HelloServlet.java

@@ -1,26 +1,35 @@
-import java.io.IOException;
-import java.io.PrintWriter;
-
-
-import javax.servlet.*;
-import javax.servlet.http.*;
-
-
-
-
-public class HelloServlet extends HttpServlet{
-    @Override 
-    protected void doPost(HttpServletRequest request,HttpServletResponse response)
-        throws IOException,ServletException{
-            String name=request.getParameter("name");
-            response.setContentType("text/html");
-            PrintWriter pw = response.getWriter();
-            pw.println("<h3>Hello " + name + "!!</h3>");
-            pw.close();
-    }
-    @Override 
-    protected void doGet(HttpServletRequest request,HttpServletResponse response)
-        throws IOException,ServletException{
-            doPost(request,response);
-    }
+/*
+COMPILE FROM INSIDE WEB-INF DIRECTORY:
+Linux:   javac -cp "../../../lib/*" -d classes HelloServlet.java
+Windows: javac -cp "../../../lib/*" -d classes HelloServlet.java
+
+RUN TOMCAT:
+Linux:   ../../../bin/startup.sh
+Windows: ..\..\..\bin\startup.bat
+
+URL:
+http://localhost:8080/servlet-flow/index.html
+*/
+
+import java.io.IOException;
+import java.io.PrintWriter;
+import javax.servlet.*;
+import javax.servlet.http.*;
+
+public class HelloServlet extends HttpServlet {
+    @Override 
+    protected void doPost(HttpServletRequest request, HttpServletResponse response)
+            throws IOException, ServletException {
+        String name = request.getParameter("name");
+        response.setContentType("text/html");
+        PrintWriter pw = response.getWriter();
+        pw.println("<h3>Hello " + name + "!!</h3>");
+        pw.close();
+    }
+
+    @Override 
+    protected void doGet(HttpServletRequest request, HttpServletResponse response)
+            throws IOException, ServletException {
+        doPost(request, response);
+    }
 }

package/templates/servlet-jdbc/WEB-INF/JdbcItemServlet.java

@@ -1,3 +1,16 @@
+/*
+COMPILE FROM INSIDE WEB-INF DIRECTORY:
+Linux:   javac -cp "../../../lib/*" -d classes JdbcItemServlet.java
+Windows: javac -cp "../../../lib/*" -d classes JdbcItemServlet.java
+
+RUN TOMCAT:
+Linux:   ../../../bin/startup.sh
+Windows: ..\..\..\bin\startup.bat
+
+URL:
+http://localhost:8080/servlet-jdbc/index.html
+*/
+
 import java.io.IOException;
 import java.io.PrintWriter;
 import java.sql.Connection;