step implementing maintanance logic

src/App.vue

@@ -5,5 +5,4 @@
 <script setup lang="ts">
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

src/services/mqtt.ts

@@ -29,3 +29,6 @@ export function publishStartHit(): void {
     tempClient.end(true)
   })
 }
+
+export function publishStartMaintanace(): void {
+}

src/views/DirectPageLayout.vue

@@ -2,9 +2,12 @@
   <main class="app">
     <nav class="nav">
       <router-link to="/" class="nav-link">Home</router-link>
-      <router-link to="/players" class="nav-link" :class="{ active: route.path === '/players' }">Page 1: Players</router-link>
+      <router-link to="/players" class="nav-link" :class="{ active: route.path === '/players' }">
-      <router-link to="/start" class="nav-link" :class="{ active: route.path === '/start' }">Page 2: Start</router-link>
+        Page 1: Players</router-link>
-      <router-link to="/text" class="nav-link" :class="{ active: route.path === '/text' }">Page 3: Text</router-link>
+      <router-link to="/start" class="nav-link" :class="{ active: route.path === '/start' }">
+        Page 2: Start</router-link>
+      <router-link to="/text" class="nav-link" :class="{ active: route.path === '/text' }">
+        Page 3: Text</router-link>
     </nav>
     <section class="page-content">
       <Players v-if="route.path === '/players'" />

src/views/Maintenance.vue

@@ -1,10 +1,49 @@
 <template>
   <main class="app">
-    <h1>Simple Player Web App</h1>
+    <h1>Maintanance View</h1>
+
+    <h2>Sword Status</h2>
+    <div class="status-container">
+      <h3>Inputs</h3>
+      <div class="status-frame">
+        <div class="status-item" :class="{ active: endSensStatus === 1 }">
+          <span class="status-label">EndSens:</span>
+          <span class="status-value">{{ endSensStatus }}</span>
+        </div>
+        <div class="status-item" :class="{ active: startSensStatus === 1 }">
+          <span class="status-label">StartSens:</span>
+          <span class="status-value">{{ startSensStatus }}</span>
+        </div>
+        <div class="status-item" :class="{ active: pullSensStatus === 1 }">
+          <span class="status-label">PullSens:</span>
+          <span class="status-value">{{ pullSensStatus }}</span>
+        </div>
+        <div class="status-item" :class="{ active: lockStatus === 1 }">
+          <span class="status-label">Lock:</span>
+          <span class="status-value">{{ lockStatus }}</span>
+        </div>
+      </div>
+
+      <h3>Outputs</h3>
+      <div class="status-frame">
+        <div class="control-buttons">
+          <button @click="handleLock" class="btn-lock">Lock</button>
+          <button @click="handleUnlock" class="btn-unlock">Unlock</button>
+        </div>
+      </div>
+
+      <h3>Status</h3>
+      
+    </div>
+
+    <h2>Game Views</h2>
     <nav class="nav">
-      <router-link to="/maintenance/players" class="nav-link" :class="{ active: isActive('/maintenance/players') }">Page 1: Players</router-link>
+      <router-link to="/maintenance/players" class="nav-link" :class="{ active: isActive('/maintenance/players') }">Page
-      <router-link to="/maintenance/start" class="nav-link" :class="{ active: isActive('/maintenance/start') }">Page 2: Start</router-link>
+        1: Players</router-link>
-      <router-link to="/maintenance/text" class="nav-link" :class="{ active: isActive('/maintenance/text') }">Page 3: Text</router-link>
+      <router-link to="/maintenance/start" class="nav-link" :class="{ active: isActive('/maintenance/start') }">Page 2:
+        Start</router-link>
+      <router-link to="/maintenance/text" class="nav-link" :class="{ active: isActive('/maintenance/text') }">Page 3:
+        Text</router-link>
     </nav>
     <section class="page-content">
       <router-view></router-view>
@@ -13,11 +52,111 @@
 </template>
 
 <script setup lang="ts">
+import { publishStartMaintanace } from '../services/mqtt'
 import { useRoute } from 'vue-router'
+import { ref } from 'vue'
 
 const route = useRoute()
 
+const endSensStatus = ref<number>(0)
+const startSensStatus = ref<number>(0)
+const pullSensStatus = ref<number>(0)
+const lockStatus = ref<number>(0)
+
 function isActive(path: string): boolean {
   return route.path === path
 }
+
+function handleLock(): void {
+  console.log('Lock button clicked')
+  lockStatus.value = 1
+}
+
+function handleUnlock(): void {
+  console.log('Unlock button clicked')
+  lockStatus.value = 0
+}
 </script>
+
+<style scoped>
+.status-container {
+  margin-bottom: 20px;
+}
+
+.status-frame {
+  border: 2px solid #d1d5db;
+  border-radius: 8px;
+  padding: 16px;
+  background: #f9fafb;
+  margin-bottom: 16px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 12px;
+}
+
+.status-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  border-radius: 6px;
+  background: #e5e7eb;
+  color: #6b7280;
+  transition: background 0.3s, color 0.3s;
+  font-weight: 500;
+}
+
+.status-item.active {
+  background: #10b981;
+  color: #ffffff;
+}
+
+.status-label {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0.8;
+}
+
+.status-value {
+  font-size: 20px;
+  font-weight: 600;
+  margin-top: 4px;
+}
+
+.control-buttons {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.btn-lock,
+.btn-unlock {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+}
+
+.btn-lock {
+  background: #111827;
+  color: #ffffff;
+}
+
+.btn-lock:hover {
+  background: #1f2937;
+}
+
+.btn-unlock {
+  background: #e5e7eb;
+  color: #111827;
+  border: 1px solid #d1d5db;
+}
+
+.btn-unlock:hover {
+  background: #d1d5db;
+}
+</style>

src/views/Players.vue

@@ -2,12 +2,7 @@
   <div>
     <h2>Add players</h2>
     <div class="row">
-      <input
+      <input v-model="playerInput" type="text" placeholder="Enter player name" @keydown.enter="addPlayer" />
-        v-model="playerInput"
-        type="text"
-        placeholder="Enter player name"
-        @keydown.enter="addPlayer"
-      />
       <button @click="addPlayer" type="button">Add</button>
     </div>
     <ul class="player-list">
@@ -15,7 +10,8 @@
         <span class="player-name">{{ player }}</span>
         <button class="delete-btn" @click="deletePlayer(index)" title="Delete player">
           <svg class="trash-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-9l-1 1H5v2h14V4z" fill="currentColor"/>
+            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-9l-1 1H5v2h14V4z"
+              fill="currentColor" />
           </svg>
         </button>
       </li>