Frontend cards + backend fix

backend/db/main.go

@@ -27,10 +27,10 @@ func InitDB(driver string, connStr string) error {
         );
 		CREATE TABLE IF NOT EXISTS cards (
             id INTEGER PRIMARY KEY AUTOINCREMENT,
-			list_id INTEGER,
+			project_id INTEGER,
             title TEXT,
 			content TEXT,
-			FOREIGN KEY(list_id) REFERENCES lists(id)
+			FOREIGN KEY(project_id) REFERENCES projects(id)
         );
     `)
 	if err != nil {

backend/handlers/cards.go

@@ -1,6 +1,7 @@
 package handlers
 
 import (
+	"fmt"
 	"strconv"
 
 	"git.bhasher.com/bhasher/focus/backend/db"
@@ -16,24 +17,24 @@ func CreateCards(c *fiber.Ctx) error {
 
 	id, err := db.CreateCard(card)
 	if err != nil {
-		return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"error": "Cannot create card"})
+		return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"error": "Cannot create card", "trace": fmt.Sprint(err)})
 	}
 
 	return c.Status(fiber.StatusCreated).JSON(fiber.Map{"id": id})
 }
 
 func GetAllCardsOf(c *fiber.Ctx) error {
-	listID, err := strconv.Atoi(c.Params("project_id"))
+	projectID, err := strconv.Atoi(c.Params("project_id"))
 	if err != nil {
-		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "Invalid project_id"})
+		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"status": "error", "error": "Invalid project_id"})
 	}
 
-	lists, err := db.GetAllListsOf(listID)
+	projects, err := db.GetAllCardsOf(projectID)
 	if err != nil {
 		return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"error": "Cannot retrieve cards"})
 	}
 
-	return c.JSON(lists)
+	return c.JSON(fiber.Map{"status": "ok", "data": projects})
 }
 
 func GetCard(c *fiber.Ctx) error {

backend/handlers/projects.go

@@ -1,8 +1,6 @@
 package handlers
 
 import (
-	"fmt"
-
 	"git.bhasher.com/bhasher/focus/backend/db"
 	"git.bhasher.com/bhasher/focus/backend/types"
 	"github.com/gofiber/fiber/v2"
@@ -14,8 +12,6 @@ func GetAllProjects(c *fiber.Ctx) error {
 		return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"error": "Cannot retrieve projects"})
 	}
 
-	fmt.Println(projects)
-
 	return c.JSON(projects)
 }
 

backend/main.go

@@ -30,17 +30,23 @@ func main() {
 		AllowHeaders: "Origin, Content-Type, Accept",
 	}))
 
+	app.Post("/api/project", handlers.CreateProject)
 	app.Get("/api/projects", handlers.GetAllProjects)
 	app.Get("/api/project/:id", handlers.GetProject)
-	app.Post("/api/project", handlers.CreateProject)
 	app.Put("/api/project/:id", handlers.UpdateProject)
 	app.Delete("/api/project/:id", handlers.DeleteProject)
 
 	app.Post("/api/list", handlers.CreateList)
-	app.Get("/api/lists/:board_id", handlers.GetAllListsOf)
+	app.Get("/api/lists/:project_id", handlers.GetAllListsOf)
 	app.Get("/api/list/:id", handlers.GetList)
 	app.Delete("/api/list/:id", handlers.DeleteList)
 	app.Put("/api/list/:id", handlers.UpdateList)
 
+	app.Post("/api/card", handlers.CreateCards)
+	app.Get("/api/cards/:project_id", handlers.GetAllCardsOf)
+	app.Get("/api/card/:id", handlers.GetCard)
+	app.Delete("/api/card/:id", handlers.DeleteCard)
+	app.Put("/api/card/:id", handlers.UpdateCard)
+
 	log.Fatal(app.Listen(fmt.Sprintf(":%v", port)))
 }

frontend/src/components/card.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	interface Card {
+		id: number;
+		title: string;
+		content: string;
+	}
+
+	export let card: Card = {
+		id: 0,
+		title: 'No title',
+		content: 'Nocontent'
+	};
+</script>
+
+<svelte:head>
+	<link rel="stylesheet" type="text/css" href="/css/card.css" />
+</svelte:head>
+
+<div class="card" draggable={true}>
+	<div class="title">{card.title}</div>
+	<div class="tags">
+		<span class="tag" style="background-color: #874d45;">HIGH</span>
+		<span class="tag" style="background-color: #4a8645;">PERSONAL</span>
+	</div>
+</div>

frontend/src/components/project.svelte

@@ -1,9 +1,56 @@
 <script lang="ts">
-    export const projectId: number = 0;
+	import axios from "axios";
+	import { onMount } from "svelte";
+	import Card from "./card.svelte";
+
+    export let projectId: number = 0;
+
+    const backend = 'http://127.0.0.1:3000';
+
+    interface Project {
+        id: number | undefined,
+        title: string,
+    }
+
+    
+    interface Card {
+        id: number,
+        title: string,
+        content: string,
+    }
+    
+    let project: Project;
+    let cards: Card[];
+
+    onMount(async () => {
+        let response = await axios.get(`${backend}/api/project/${projectId}`);
+
+        project = response.data; 
+
+        response = await axios.get(`${backend}/api/cards/${projectId}`)
+
+        if(response.data.status === "ok") {
+            cards = response.data.data;
+        } else {
+            console.error(response.data)
+        }
+    })
 </script>
 
-{#if Number.isNaN(projectId)}
+<svelte:head>
-    <p>Invalid number</p>
+    <link rel="stylesheet" type="text/css" href="/css/project.css" />
-{:else}
+</svelte:head>
-    <p>Hello on dashboard {projectId}!</p>
+
+{#if project}
+<div id="project">
+    <h2>{project.title}</h2>
+
+    <ul>
+        {#if cards}
+        {#each cards as card}
+            <Card {card} />
+        {/each}
+        {/if}
+    </ul>
+</div>
 {/if}

frontend/src/routes/[project]/+page.svelte

@@ -1,10 +1,18 @@
 <script lang="ts">
-	import Project from "../../components/project.svelte";
+	import Project from '../../components/project.svelte';
-	import Sidebar from "../../components/sidebar.svelte";
+	import Sidebar from '../../components/sidebar.svelte';
 	import { page } from '$app/stores';
 
 	let projectId: number = +$page.params.project;
 </script>
 
+<div id="projectPage">
 	<Sidebar />
 	<Project {projectId} />
+</div>
+
+<style>
+	#projectPage {
+		display: flex;
+	}
+</style>

frontend/static/css/card.css

@@ -0,0 +1,31 @@
+.card {
+    padding: 10px;
+    border-radius: 6px;
+    border: 1px solid #555;
+    margin: 10px;
+    width: 200px;
+    font-family: "Open Sans", sans-serif;
+    font-size: 14px;
+}
+
+.card:hover{
+    background-color: #303030;
+    cursor: pointer;
+}
+
+.card .title {
+    font-weight: normal;
+}
+
+.card .tags {
+    padding-top: 10px;
+    font-weight: lighter;
+}
+
+.card .tag {
+    padding: 2px 8px;
+    margin: 4px 4px 0 0;
+    text-transform: uppercase;
+    border-radius: 3px;
+    font-size: 90%;
+}

frontend/static/css/index.css

@@ -1,8 +1,10 @@
-body {
+* {
-    margin: 0;
-    font-family: "Open sans", sans-serif;
-    color: white;
-    background-color: #2b2e30;
     margin: 0;
     padding: 0;
 }
+
+body {
+    font-family: "Open sans", sans-serif;
+    color: white;
+    background-color: #252525;
+}

frontend/static/css/project.css

@@ -0,0 +1,3 @@
+#project {
+    padding: 10px 20px;
+}

frontend/static/css/sidebar.css

@@ -5,6 +5,7 @@
     height: 100vh;
     display: flex;
     flex-direction: column;
+    float: left;
 }
 
 #sidebar .logo {