Merge pull request #53 from aquariophilie/feature/frontend-progress

Feature/frontend progress
aquariophilie · Jul 19, 2021 · 6d9145a · 6d9145a
2 parents 89ac08b + 9f239aa
commit 6d9145a
Show file tree

Hide file tree

Showing 17 changed files with 620 additions and 26 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -1,5 +1,6 @@
 {
-  "name": "~TODO~",
+  "name": "ugly-frontend",
+  "description": "Frontend of the Blobfishes ugly app",
   "version": "0.0.1",
   "scripts": {
     "dev": "svelte-kit dev",
@@ -18,8 +19,11 @@
     "postcss-load-config": "^3.1.0",
     "svelte": "^3.34.0",
     "svelte-preprocess": "^4.7.4",
+    "sveltestrap": "^5.5.0",
     "tailwindcss": "^2.2.4"
   },
   "type": "module",
-  "dependencies": {}
+  "dependencies": {
+    "axios": "^0.21.1"
+  }
 }
diff --git a/client/src/app.css b/client/src/app.css
@@ -2,3 +2,7 @@
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
         'Open Sans', 'Helvetica Neue', sans-serif;
 }
+
+h1 {
+    @apply text-4xl text-green-900 p-3;
+}
diff --git a/client/src/app.html b/client/src/app.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.png" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %svelte.head%
   </head>

diff --git a/client/src/components/Nav.svelte b/client/src/components/Nav.svelte
@@ -1,9 +1,21 @@
-<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
+<div class="p-1 mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
   <div class="flex-shrink-0">
-    <h2>_/°U°\_</h2>
+    <h2 class="m-3 px-2 py-6 bg-blue-50 rounded-full font-mono text-2xl">_/°U°\_</h2>
   </div>
   <div>
-    <div class="text-xl font-medium text-black">Blobfish</div>
-    <p class="text-gray-500">Hugly Book Collection Manager</p>
+    <div class="text-2xl tracking-widest font-medium text-black">Blobfishes</div>
+    <p class="font-sans text-gray-500">Ugly Book Collection Manager</p>
   </div>
-</div>
+  <div class="divide-x flex-auto h-20">
+    <a class="float-left " href="/">Home</a>
+    <a class="float-left" href="/books">Books</a>
+    <a class="float-left" href="/authors">Authors</a>
+    <a class="float-right"  href="/about">About</a>
+  </div>
+</div>
+
+<style>
+  a {
+    @apply hover:text-indigo-600 hover:underline  text-lg px-4 pt-12;
+  }
+</style>
diff --git a/client/src/json/authors.json b/client/src/json/authors.json
@@ -0,0 +1,26 @@
+[{
+    "_id": {
+        "$oid": "60f02567e63786678fa5c45f"
+    },
+    "id": 1,
+    "name": "Douglas Adams",
+    "bio": "Douglas Noel Adams (11 March 1952 – 11 May 2001) was an English author, screenwriter, essayist, humorist, satirist and dramatist. Adams was author of The Hitchhiker's Guide to the Galaxy, which originated in 1978 as a BBC radio comedy, before developing into a \"trilogy\" of five books that sold more than 15 million copies in his lifetime and generated a television series, several stage plays, comics, a video game, and in 2005 a feature film. Adams's contribution to UK radio is commemorated in The Radio Academy's Hall of Fame.[2]\n\nAdams also wrote Dirk Gently's Holistic Detective Agency (1987) and The Long Dark Tea-Time of the Soul (1988), and co-wrote The Meaning of Liff (1983), The Deeper Meaning of Liff (1990), and Last Chance to See (1990). He wrote two stories for the television series Doctor Who, co-wrote City of Death, and served as script editor for its seventeenth season in 1979. He co-wrote the Monty Python sketch \"Patient Abuse\" which appeared in the final episode of Monty Python's Flying Circus. A posthumous collection of his selected works, including the first publication of his final (unfinished) novel, was published as The Salmon of Doubt in 2002.\n\nAdams was an advocate for environmentalism and conservation, a lover of fast cars,[3] technological innovation and the Apple Macintosh, and a self-proclaimed \"radical atheist\".",
+    "birthday": {
+        "$date": {
+            "$numberLong": "-541558800000"
+        }
+    }
+},
+{
+    "_id": {
+        "$oid": "60f02de9e63786678fa5c461"
+    },
+    "id": 2,
+    "name": "Eoin Colfer",
+    "bio": "Eoin Colfer (/ˈoʊ.ɪn/; born 14 May 1965) is an Irish author of children's books. He worked as a primary school teacher before he became a full-time writer. He is best known for being the author of the Artemis Fowl series. In September 2008, Colfer was commissioned to write the sixth installment of the Hitchhiker's Guide to the Galaxy series, entitled And Another Thing ..., which was published in October 2009. In October 2016, in a contract with Marvel Comics, he released Iron Man: The Gauntlet. He served as Laureate na nÓg (Ireland's Children's Laureate) between 2014 and 2016.",
+    "birthday": {
+        "$date": {
+            "$numberLong": "-541558800000"
+        }
+    }
+}]
diff --git a/client/src/json/books.json b/client/src/json/books.json
@@ -0,0 +1,126 @@
+[{
+    "_id": {
+        "$oid": "60f01c5be63786678fa5c459"
+    },
+    "id": 1,
+    "title": "The Hitchhiker's Guide to the Galaxy",
+    "authors": [
+        {
+            "id": 1,
+            "name": "Douglas Adams"
+        }
+    ],
+    "genres": [
+        "science fiction",
+        "comedy"
+    ],
+    "location": "Living Room",
+    "owner": "Homer",
+    "reading": []
+},
+{
+    "_id": {
+        "$oid": "60f02464e63786678fa5c45a"
+    },
+    "id": 2,
+    "title": "The Restaurant at the End of the Universe",
+    "authors": [
+        {
+            "id": 1,
+            "name": "Douglas Adams"
+        }
+    ],
+    "genres": [
+        "science fiction",
+        "comedy"
+    ],
+    "location": "Bedroom",
+    "owner": "Homer",
+    "reading": [
+        "Lisa"
+    ]
+},
+{
+    "_id": {
+        "$oid": "60f02497e63786678fa5c45b"
+    },
+    "id": 3,
+    "title": "Life, the Universe and Everything",
+    "authors": [
+        {
+            "id": 1,
+            "name": "Douglas Adams"
+        }
+    ],
+    "genres": [
+        "science fiction",
+        "comedy"
+    ],
+    "location": "Bedroom",
+    "owner": "Homer",
+    "reading": []
+},
+{
+    "_id": {
+        "$oid": "60f024b4e63786678fa5c45c"
+    },
+    "id": 4,
+    "title": "So Long, and Thanks for All the Fish",
+    "authors": [
+        {
+            "id": 1,
+            "name": "Douglas Adams"
+        }
+    ],
+    "genres": [
+        "science fiction",
+        "comedy"
+    ],
+    "location": "Attic",
+    "owner": "Homer",
+    "reading": []
+},
+{
+    "_id": {
+        "$oid": "60f024cde63786678fa5c45d"
+    },
+    "id": 5,
+    "title": "Mostly Harmless",
+    "authors": [
+        {
+            "id": 1,
+            "name": "Douglas Adams"
+        }
+    ],
+    "genres": [
+        "science fiction",
+        "comedy"
+    ],
+    "location": "Attic",
+    "owner": "Homer",
+    "reading": []
+},
+{
+    "_id": {
+        "$oid": "60f024e3e63786678fa5c45e"
+    },
+    "id": 6,
+    "title": "And Another Thing...",
+    "authors": [
+        {
+            "id": 2,
+            "name": "Eoin Colfer"
+        },
+        {
+            "id": 1,
+            "name": "Douglas Adams"
+        }
+    ],
+    "genres": [
+        "science fiction",
+        "comedy"
+    ],
+    "location": "Attic",
+    "owner": "Homer",
+    "reading": []
+}]
diff --git a/client/src/json/db.js b/client/src/json/db.js
@@ -0,0 +1,7 @@
+import books from './books.json'
+import authors from './authors.json'
+
+export default {
+  books,
+  authors
+}
diff --git a/client/src/routes/__layout.svelte b/client/src/routes/__layout.svelte
@@ -7,5 +7,12 @@
 <Nav />
 
 <main>
-  <slot></slot>
-</main>
+  <div class="px-6">
+    <slot></slot>
+  </div>
+
+
+</main>
+
+<style>
+</style>
diff --git a/client/src/routes/about.svelte b/client/src/routes/about.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+  <title>Blobfishes: About</title>
+</svelte:head>
+
+<h1>About this Ugly Application</h1>
diff --git a/client/src/routes/api/authors/[slug].js b/client/src/routes/api/authors/[slug].js
@@ -0,0 +1,34 @@
+import db from '../../../json/db.js'
+
+const authors = db.authors
+
+export async function get (request) {
+  try {
+    const bid = request.params.slug
+    const book = await authors.find(({ id }) => id === bid)
+    return {
+      status: 200,
+      body: book
+    }
+  } catch (err) {
+    return {
+      status: 500,
+      body: {
+        error: 'A server error occured: ',
+        type: '' + err
+      }
+    }
+  }
+}
+
+export async function del (request) {
+  const bid = parseInt(request.params.slug)
+  const ret = authors.findIndex(({ id }) => id === bid)
+  if (ret >= 0) {
+    authors.splice(ret, 1)
+  }
+  return {
+    status: 200,
+    body: { i: ret }
+  }
+}