review page template

api.md

@@ -22,7 +22,7 @@
 
 ```ts
 {
-    Review[]
+    reviews: Review[]
 }
 ```
 

frontend/index.html

@@ -8,6 +8,8 @@
         <script src="bundle.js" defer></script>
         <title>Postnummer App</title>
 
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

frontend/src/main.ts

@@ -3,6 +3,7 @@ import { setTopbarOffset, addToggleDropdownListener } from "./topbar";
 import { Coordinate, Position, convertPixelsToCoordinate, convertCoordinateToPixels } from "./coordinates";
 import { Size } from "./size";
 import { Tooltip } from "./Tooltip";
+import { loadReviews } from "./review";
 
 const tooltip = new Tooltip(document.getElementById("tooltip")!);
 
@@ -201,7 +202,7 @@ function pageRedirects() {
     
     reviewRedirect.addEventListener("click", () => {
         mainElement.innerHTML = `<h2 id="reviews-title">Anmeldelser</h2>
-        <div id="reviews-container"></div>`
+        <div id="reviews-container">${loadReviews()}</div>`
         const dropdown = document.getElementById("dropdown")!;
         dropdown.classList.remove("enabled");
     

frontend/src/review.ts

@@ -1,21 +1,28 @@
-const reviewContainer = document.getElementById("reviews-container")!
-const reviewRedirect = document.getElementById("review-redirect")!
-const main = document.getElementById("main")!
 
-reviewRedirect.addEventListener("click", () => {
-    main.innerHTML = `<h2 id="reviews-title">Anmeldelser</h2>
-    <div id="reviews-container"></div>`
+export function loadReviews() {
+    let result: string = ""
 
-});
-
-export function addReview(location: string, title: string, content: string, stars: number) {
-    const id = Math.random() * 1000000
-    reviewContainer.innerHTML += 
-    `<div id="review${id}">
-    <h3>${title}</h3>
-    <p>${location}</p>
-    <p>${content}</p>
-    <p>${stars} stjerner</p>
+    result += `
+    <div class="review">
+        <h3>Hvor er min scooter?</h3>
+        <div class="location-and-stars">
+            <p>Randers</p>
+            <div>
+                <span class="material-symbols-outlined">star</span>
+                <span class="material-symbols-outlined">star</span>
+                <span class="material-symbols-outlined">star</span>
+                <span class="material-symbols-outlined">star</span>
+                <span class="material-symbols-outlined">star</span>
+            </div>
+        </div>
+        <p class="review-content">lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet</p>
     </div>`
+    
+    // const body = (await (await fetch("/api/review")).json()).body()
+
+    // if (!body.reviews) return;
+    
+    return result
+
 }
 

frontend/style.css

@@ -227,3 +227,18 @@ code {
     justify-content: center;
 }
 
+.review h3, p {
+    margin: 0;
+}
+
+.location-and-stars {
+    display: flex;
+    justify-content: center;
+    padding: 0;
+    gap: 0.4em;
+    flex-direction: row;
+}
+.material-symbols-outlined {
+    color: yellow;
+    fill: yellow;
+}