kinda working

2023-05-30 21:28:23 -06:00
parent 7d1852d380
commit 80ec635705
91 changed files with 13103 additions and 2 deletions
--- a/static/index.html
+++ b/static/index.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Notely</title>
+</head>
+
+<body>
+    <h1>Notely</h1>
+    <button id="createUserButton">Create User</button>
+
+    <h2>Create Note</h2>
+    <textarea id="newNoteContent"></textarea>
+    <button id="createNoteButton">Create Note</button>
+
+    <h2>Your Notes</h2>
+    <div id="notes"></div>
+
+    <script>
+        const API_BASE = '/v1';
+        let currentUserAPIKey = localStorage.getItem('currentUserAPIKey')
+        let currentUser = null;
+
+        document.getElementById('createUserButton').addEventListener('click', createUser);
+        document.getElementById('createNoteButton').addEventListener('click', createNote);
+
+        async function createUser() {
+            const response = await fetch(`${API_BASE}/users`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name: 'Test User' })
+            });
+            const user = await response.json();
+            localStorage.setItem('currentUserAPIKey', user.api_key);
+            currentUserAPIKey = user.api_key;
+            currentUser = user;
+            alert(`User Created: ${user.name}`);
+        }
+
+        async function createNote() {
+            if (!currentUser) {
+                alert('Please create a user first');
+                return;
+            }
+            const noteContent = document.getElementById('newNoteContent').value;
+            const response = await fetch(`${API_BASE}/notes`,
+                {
+                    method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `ApiKey ${currentUserAPIKey}` },
+                    body: JSON.stringify({ note: noteContent })
+                });
+            const note = await response.json();
+            displayNote(note);
+
+        }
+
+        async function getUser() {
+            const response = await fetch(`${API_BASE}/users`, { headers: { 'Authorization': `ApiKey ${currentUserAPIKey}` } });
+            return await response.json();
+        }
+
+        function logout() {
+            localStorage.removeItem('currentUserAPIKey');
+            currentUser = null;
+        }
+
+        async function loadNotes() {
+            if (!currentUser) {
+                return;
+            }
+            const response = await fetch(`${API_BASE}/notes`, { headers: { 'Authorization': `ApiKey ${currentUserAPIKey}` } });
+            const notes = await response.json();
+            const notesContainer = document.getElementById('notes');
+            notesContainer.innerHTML = '';
+            notes.forEach(note => displayNote(note));
+        }
+
+        function displayNote(note) {
+            const noteElement = document.createElement('div');
+            noteElement.className = 'note';
+            noteElement.textContent = note.note;
+            document.getElementById('notes').appendChild(noteElement);
+        }
+
+        async function login() {
+            if (!currentUserAPIKey) {
+                return
+            }
+            const user = await getUser();
+            currentUser = user;
+            currentUserAPIKey = user.api_key;
+            await loadNotes();
+        }
+
+        login();
+    </script>
+
+    <style>
+        :root {
+            --primary: hsl(235, 86%, 65%);
+            --primary-light: hsl(235, 88%, 73%);
+            --dark: #121212;
+            --light: #E4E4E4;
+            --grey: #424242;
+        }
+
+        body {
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            background-color: var(--dark);
+            color: var(--light);
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            height: 100vh;
+            justify-content: center;
+        }
+
+
+
+        textarea {
+            width: 300px;
+            height: 100px;
+            margin-bottom: 10px;
+        }
+
+        button {
+            background-color: var(--primary);
+            color: var(--light);
+            border: none;
+            padding: 15px 32px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 16px;
+            margin: 4px 2px;
+            cursor: pointer;
+            transition-duration: 0.4s;
+        }
+
+        button:hover {
+            background-color: var(--primary-light);
+        }
+
+        .note {
+            width: 300px;
+            background-color: var(--grey);
+            border: 1px solid var(--primary);
+            padding: 10px;
+            margin-bottom: 10px;
+        }
+    </style>
+</body>
+
+</html>