* init p2p polling app

2026-03-31 19:09:46 +02:00
parent 4275cbd795
commit b5cb0e83e3
16 changed files with 638 additions and 1 deletions
--- a/app/app.vue
+++ b/app/app.vue
@@ -0,0 +1,94 @@
+<style>
+/* Basic styling to make it look clean */
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+  background-color: #f4f4f9;
+  color: #333;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  padding: 2rem;
+}
+
+header {
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+h1 { margin: 0 0 0.5rem 0; }
+
+input {
+  flex-grow: 1;
+  padding: 0.75rem;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 1rem;
+}
+
+button {
+  background: #3b82f6;
+  color: white;
+  border: none;
+  padding: 0.75rem 1rem;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: background 0.2s;
+}
+
+button:hover { background: #2563eb; }
+
+.status {
+  font-size: 0.85rem;
+  color: #666;
+}
+.status .connected { color: #10b981; font-weight: bold; }
+
+.connectionFailed { color: #FF2525; font-weight: bold; }
+
+.poll-container {
+  background: white;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  width: 100%;
+  max-width: 500px;
+}
+
+.back-btn { 
+  margin-left: 1rem; 
+  padding: 0.2rem 0.5rem; 
+  font-size: 0.7rem; 
+  background: #64748b; 
+}
+</style>
+<template>
+    <div class="poll-container">
+        <header>
+            <h1 @click="activePollId = null" style="cursor:pointer">P2P Polling App 🗳️</h1>
+            <div class="status">
+                <button v-if="activePollId" @click="activePollId = null" class="back-btn">← Back To List</button>
+                <span :class="{ 'connected': isConnected }">
+                    ● {{ isConnected ? 'Synced' : 'Waiting for other Peers...' }}
+                </span>
+                <span> | Peers online: {{ connectedPeers }}</span>
+            </div>
+            <h2 v-if="connectionAttempFailed" class="connectionFailed">⚠ Connection to Signaling Server Failed!</h2>
+        </header>
+
+        <main>
+            <PollList v-if="!activePollId" @select-poll="selectPoll" />
+            <Poll v-else :activePollId="activePollId" :pollData="pollData" :addOption="addOption" :vote="vote"/>
+        </main>
+    </div>
+</template>
+
+<script setup lang="ts">
+    const activePollId = ref<string | null>(null);
+
+    const { pollData, isConnected, connectionAttempFailed, connectedPeers, addOption, vote } = usePoll(activePollId);
+
+    const selectPoll = (id: string) => {
+        activePollId.value = id;
+    };
+</script>