[frontend] Drip! (#60)

* Updating project structure to use a different layout for the CMS * Getting verticalnav layout laid out * Updating vnav * Add a login page that grabs the token and sets it in memory to use on the CMS pages * Finished routing for CMS * Created basic table with clickable and routable capabilities to get to the Drop Edit view * Finish up the first draft of the Edit Drop UI * Renaming CMS path from 'drips' to 'drip' to match the backend. Update the backend to ease deployment to staging environment. Improve CMS login experience * Adding network calls to read and write drops * Drip CMS fully works for adding and updating drops! * Working on getting drop delete while editing (not creating) * hide delete button on new drip * Work on getting drip plugged into the site * DripView on the site is done * Added a delete confirmation modal * fix drip CMS flex sizing
joseph-flinn · Oct 8, 2023 · 13537ac · 13537ac
1 parent 20af04a
commit 13537ac
Show file tree

Hide file tree

Showing 33 changed files with 762 additions and 131 deletions.
diff --git a/backend/README.md b/backend/README.md
@@ -1,5 +1,16 @@
 ## Backend
 
+### Routes
+
+| verb   | route | data | description |
+| ----   | ----- | ---- | ----------- |
+| GET    | `/rss.xml` || get RSS feed |
+| GET    | `/posts` || get list of all posts |
+| GET    | `/post/:slug` || get all data for post associated with `:slug` |
+| POST   | `/drip` | `{id?, message}` | Update a drip (if `id` is provided), create if otherwise |
+| GET    | `/drip` || Get list of all drops |
+| DELETE | `/drip/:id` || delete drop with the `id` of `:id` |
+
 ### Development
 
 ```
@@ -11,4 +22,5 @@ TOKEN=${TOKEN}
 
 ```
 k6 -e PSK=${TOKEN} test/script.js
+
 ```
diff --git a/backend/package.json b/backend/package.json
@@ -4,8 +4,9 @@
   "private": true,
   "scripts": {
     "dev": "wrangler dev --remote",
-		"test": "k6 -e ENV=dev -e PSK=${TOKEN} run/script.js",
-    "deploy": "wrangler deploy"
+		"test": "k6 -e ENV=dev -e PSK=${TOKEN} run test/script.js",
+		"test:staging": "k6 -e ENV=staging -e PSK=${TOKEN} run test/script.js",
+    "deploy:staging": "wrangler --env staging deploy"
   },
   "devDependencies": {
     "wrangler": "^3.7.0"

diff --git a/backend/src/worker.js b/backend/src/worker.js
@@ -43,7 +43,7 @@ app.get('/posts', async c => {
 		.then(postList => {
 			c.header('content-type', 'application/json')
 			c.header('etag', postBlob.httpEtag)
-			return c.text(JSON.stringify({ postList: postList }), 200)
+			return c.text(JSON.stringify({ data: postList }), 200)
 		})
 })
 
@@ -61,7 +61,7 @@ app.get('/posts/:slug', async c => {
 		.then(post => {
 			c.header('content-type', 'application/json')
 			c.header('etag', postBlob.httpEtag)
-			return c.text(JSON.stringify({ post: post}), 200)
+			return c.text(JSON.stringify({ data: post}), 200)
 		})
 })
 
@@ -116,7 +116,7 @@ app.post(
 
 app.get('/drip', async c => {
 	const { success, results } = await c.env.DB_DRIP.prepare(`
-		select * from drip ORDER BY created_at DESC LIMIT 1
+		select * from drip ORDER BY created_at DESC LIMIT 10
 	`).bind().all()
 
 	if (!success) return c.text(JSON.stringify({ message: "something went wrong"}), 400)
@@ -135,18 +135,15 @@ app.delete('/drip/*', async(c, next) => {
 })
 
 
-app.delete(
-	'/drip/:id',
-	async c => {
-		const { id } = c.req.param()
-		const { success } = await c.env.DB_DRIP.prepare(`
-			delete from drip where id=?
-		`).bind(id).run()
+app.delete( '/drip/:id', async c => {
+	const id = c.req.param('id')
+	const { success } = await c.env.DB_DRIP.prepare(`
+		delete from drip where id=?
+	`).bind(id).run()
 
-		if (success) return c.text(JSON.stringify({ message: `drip deleted` }, null, 2), 201)
+	if (success) return c.text(JSON.stringify({ message: `drip deleted` }), 201)
 
-		return c.text('something went wrong', 400)
-	}
-)
+	return c.text('something went wrong', 400)
+})
 
 export default app
diff --git a/backend/test/script.js b/backend/test/script.js
@@ -64,6 +64,7 @@ export default function () {
 
 
 	// GROUP: drip
+	let newDripId = null;
 	group('drip', function () {
 		const res = http.get(`${BASE_URL}/drip`)
 
@@ -105,6 +106,8 @@ export default function () {
 			'POST - create: verify body': (r) => r.body.includes('create')
 		})
 
+		// newPostId = r.body.
+
     sleep(SLEEP_TIME) // second
   })
 

diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -2,6 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
+		<link rel="stylesheet" href="%sveltekit.assets%/global.css" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%

diff --git a/frontend/src/data.json → frontend/src/lib/assets/data.json b/frontend/src/data.json → frontend/src/lib/assets/data.json
@@ -1,16 +1,18 @@
 {
-  "pages": [
-    {"name": "home", "path": "/"},
-    {"name": "posts", "path": "/posts"},
-    {"name": "drip", "path": "/drip"}
-  ],
+  "pages": {
+    "site": [
+      {"name": "home", "path": "/"},
+      {"name": "posts", "path": "/posts"},
+      {"name": "drip", "path": "/drip"}
+    ]
+  },
   "skillsData": {
     "leadership": [
       "lean management",
       "organizational alignment",
       "managing for high performance: purpose + expectations + feedback",
       "effective feedback with PSBIQ model",
-      "coach"
+      "coaching"
     ],
     "technical": [ 
       "linux",

diff --git a/frontend/src/lib/components/Button.svelte b/frontend/src/lib/components/Button.svelte
@@ -0,0 +1,46 @@
+<script>
+  export let text = null; 
+  export let handleClick;
+  export let primary = true;
+</script>
+
+
+<button 
+  class="{primary ? 'buttonPrimary' : 'buttonSecondary'}"
+  on:click={handleClick}
+>
+  {text}
+</button>
+
+
+<style>
+  button {
+    margin-left: auto;
+    padding: 0.5em 1.5em 0.5em 1.5em;
+    color: #fffefb;
+    text-align: center;
+    border-radius: 5px;
+    border: none;
+  }
+
+  button:hover {
+    cursor: pointer;
+    background-color: #777;
+  }
+
+  .buttonPrimary {
+    background-color: #5c5955; 
+  }
+
+  .buttonSecondary {
+    background-color: #9b9894
+  }
+
+  .buttonPrimary:hover {
+    background-color: #777;
+  }
+
+  .buttonSecondary:hover {
+    background-color: #DAD9D7
+  }
+</style>
diff --git a/frontend/src/lib/components/DripTable.svelte b/frontend/src/lib/components/DripTable.svelte
@@ -0,0 +1,62 @@
+<script>
+  export let data;
+
+  import { goto } from "$app/navigation";
+  import { base } from '$app/paths';
+
+  import Card from '$lib/components/Card.svelte';
+  import { dropEdit } from '$lib/store.js';
+
+  const handleDripClick = (id) => {
+    console.log(`clicked row ${id}`)
+    dropEdit.set(data.data.filter(datum => datum.id === id)[0])
+    goto(`${base}/cms/drip/${id}`)
+  }
+
+  const drip = data.data.sort((dropA, dropB) => new Date(dropA.timestamp) > new Date(dropB.timestamp) ? -1 : 1)
+</script>
+
+
+<Card>
+  <table>
+    <tr>
+      <th style="width: 200px">timestamp</th>
+      <th>drop</th>
+    </tr>
+    {#each data.data as datum}
+      <tr class="row" on:click={() => handleDripClick(datum.id)}>
+        <td>{datum.created_at}</td>
+        <td>{datum.message}</td>
+      </tr>
+    {/each}
+  </table>
+</Card>
+
+
+<style>
+  table {
+    padding: 1.5em;
+    border-spacing: 0px;
+  }
+
+  td, th {
+    padding: 1em;
+    border: 0px;
+  }
+
+  .row {
+  }
+
+  .row:hover {
+    background-color: #eee;
+    cursor: pointer;
+  }
+
+  th {
+    text-align: left;
+  }
+
+  td {
+    vertical-align: top;
+  }
+</style>
diff --git a/frontend/src/lib/components/Header.svelte → ...d/src/lib/components/HorizontalNav.svelte b/frontend/src/lib/components/Header.svelte → ...d/src/lib/components/HorizontalNav.svelte
@@ -1,8 +1,6 @@
 <script>
   export let pages;
 
-  import NavBar from "$lib/components/NavBar.svelte";
-
   import { base } from "$app/paths";
   import logo from "$lib/assets/jf-icon.svg";
 </script>
@@ -12,7 +10,11 @@
   <a href="{base}/">
     <img src={logo} alt="JF Brand Icon" class="svg"/>
   </a>
-  <NavBar pages={pages}/>
+  <div style="padding: 0.5em;">
+    {#each pages as page}
+      <a href="{base}{page.path}"><b>{page.name}</b></a>
+    {/each}
+  </div>
 </div>
 <div class="spacer"/>
 
@@ -28,6 +30,14 @@
     padding: 1em 0em 1em 0em;
   }
 
+  a {
+    padding: 1em;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
   @media only screen and (max-width: 600px) {
     .svg {
       width: 50px;

diff --git a/frontend/src/lib/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte
@@ -0,0 +1,62 @@
+<script>
+  export let showModal; // boolean
+
+  let dialog; // HTMLDialogElement
+  let dialogIsOpen = false;
+
+  $: if (dialog && !dialogIsOpen && showModal) {
+    dialog.showModal();
+    dialogIsOpen = true;
+  }
+
+  $: if (dialog && dialogIsOpen && !showModal) {
+    dialog.close();
+    dialogIsOpen = false;
+  }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<dialog
+  bind:this={dialog}
+  on:close={() => (showModal = false)}
+  on:click|self={() => dialog.close()}
+>
+  <slot />
+</dialog>
+
+<style>
+	dialog {
+		max-width: 32em;
+		border-radius: 0.2em;
+		border: none;
+		padding: 0;
+	}
+	dialog::backdrop {
+		background: rgba(0, 0, 0, 0.3);
+	}
+	dialog[open] {
+		animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+	@keyframes zoom {
+		from {
+			transform: scale(0.95);
+		}
+		to {
+			transform: scale(1);
+		}
+	}
+	dialog[open]::backdrop {
+		animation: fade 0.2s ease-out;
+	}
+	@keyframes fade {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+	button {
+		display: block;
+	}
+</style>
diff --git a/frontend/src/lib/components/NavBar.svelte b/frontend/src/lib/components/NavBar.svelte