diff --git a/frontend/src/app.html b/frontend/src/app.html
index c203f6b..4f12515 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -4,6 +4,7 @@
+
%sveltekit.head%
diff --git a/frontend/src/components/project.svelte b/frontend/src/components/project.svelte
new file mode 100644
index 0000000..2645f6f
--- /dev/null
+++ b/frontend/src/components/project.svelte
@@ -0,0 +1,9 @@
+
+
+{#if Number.isNaN(projectId)}
+ Invalid number
+{:else}
+ Hello on dashboard {projectId}!
+{/if}
\ No newline at end of file
diff --git a/frontend/src/components/sidebar.svelte b/frontend/src/components/sidebar.svelte
new file mode 100644
index 0000000..a5f0985
--- /dev/null
+++ b/frontend/src/components/sidebar.svelte
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 99778d1..7b2449b 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,33 +1,6 @@
-
-
-
-
-{#await projects.init()}
-Loading ...
-{:then}
-
-{:catch error}
- Something went wrong: {error.message}
-{/await}
\ No newline at end of file
+
\ No newline at end of file
diff --git a/frontend/src/routes/[project]/+page.svelte b/frontend/src/routes/[project]/+page.svelte
new file mode 100644
index 0000000..03ea08d
--- /dev/null
+++ b/frontend/src/routes/[project]/+page.svelte
@@ -0,0 +1,10 @@
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/stores/projects.ts b/frontend/src/stores/projects.ts
index fb51e7b..1b4992f 100644
--- a/frontend/src/stores/projects.ts
+++ b/frontend/src/stores/projects.ts
@@ -6,23 +6,51 @@ export const projects = getProjects();
const backend = 'http://127.0.0.1:3000'
interface Project {
- id: number,
+ id: number | undefined,
title: string,
}
function getProjects() {
- const { subscribe, set, update } = writable([]);
+ const { subscribe, set, update } = writable([] as Project[]);
return {
subscribe,
init: async () => {
- const response = await axios.get(`${backend}/api/projects`)
- console.log(response.data)
+ const response = await axios.get(`${backend}/api/projects`);
if(response.status < 303) {
- const projects: Project[] = response.data;
+ const data: Project[] = response.data;
- return projects;
+ set(data);
+
+ return data;
+ }
+ },
+ add: async (project: Project) => {
+ const response = await axios.post(`${backend}/api/project`, project);
+
+ if(response.status < 303) {
+ project.id = response.data["id"];
+ update((oldProjects) => {
+ oldProjects.push(project)
+ return oldProjects;
+ });
+ }
+ },
+ edit: async (project: Project) => {
+ const response = await axios.put(`${backend}/api/project/${project.id}`, project)
+
+
+ if(response.status < 303) {
+ update((oldProjects: Project[]) => {
+ for(let p of oldProjects){
+ if(p.id === project.id){
+ p.title = project.title;
+ }
+ }
+
+ return oldProjects;
+ });
}
}
}
diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css
index 89c649d..f5c79a9 100644
--- a/frontend/static/css/index.css
+++ b/frontend/static/css/index.css
@@ -3,71 +3,6 @@ body {
font-family: "Open sans", sans-serif;
color: white;
background-color: #2b2e30;
-}
-
-#sidebar {
- width: 240px;
- background-color: #262a2b;
- color: white;
- height: 100vh;
- display: flex;
- flex-direction: column;
-}
-
-#sidebar .logo {
- display: flex;
- align-items: center;
- padding: 10px;
- margin-top: 20px;
-}
-
-#sidebar .logo img {
- max-height: 30px;
- margin-right: 10px;
-}
-
-#sidebar .logo .title {
- padding-right: 10px;
-}
-#sidebar .logo .version {
- font-size: 0.8em;
- opacity: 0.7;
-}
-
-#sidebar .boards h2 {
- padding-left: 10px;
- font-size: 0.9em;
- margin-top: 20px;
- margin-bottom: 10px;
-}
-
-#sidebar .boards ul {
- list-style: none;
- padding: 0;
margin: 0;
-}
-
-#sidebar .boards ul li a {
- text-decoration: none;
- color: white;
- display: block;
- padding: 5px 10px;
- font-size: 0.9em;
-}
-
-#sidebar .boards ul li a:hover {
- background-color: #444;
-}
-
-#sidebar .bottom-links {
- margin-top: auto;
-}
-
-#sidebar .bottom-links a {
- text-decoration: none;
- color: white;
- display: block;
- padding: 10px;
- font-size: 0.9em;
- border-top: 1px solid #444;
-}
+ padding: 0;
+}
\ No newline at end of file
diff --git a/frontend/static/css/sidebar.css b/frontend/static/css/sidebar.css
new file mode 100644
index 0000000..dcb173f
--- /dev/null
+++ b/frontend/static/css/sidebar.css
@@ -0,0 +1,81 @@
+#sidebar {
+ width: 240px;
+ background-color: #262a2b;
+ color: white;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+#sidebar .logo {
+ display: flex;
+ align-items: center;
+ padding: 10px;
+ margin-top: 20px;
+}
+
+#sidebar .logo img {
+ max-height: 30px;
+ margin-right: 10px;
+}
+
+#sidebar .logo .title {
+ padding-right: 10px;
+}
+#sidebar .logo .version {
+ font-size: 0.8em;
+ opacity: 0.7;
+}
+
+#sidebar .boards h2 {
+ padding-left: 10px;
+ font-size: 0.9em;
+ margin-top: 20px;
+ margin-bottom: 10px;
+}
+
+#sidebar .boards ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+#sidebar a {
+ text-decoration: none;
+ color: white;
+}
+
+#sidebar .boards ul li:hover {
+ background-color: #444;
+}
+
+#sidebar .bottom-links {
+ margin-top: auto;
+}
+
+#sidebar .bottom-links span {
+ text-decoration: none;
+ color: white;
+ display: block;
+ padding: 10px;
+ font-size: 0.9em;
+ border-top: 1px solid #444;
+ cursor: pointer;
+}
+
+#sidebar li {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 5px 10px;
+}
+
+#sidebar .edit-icon {
+ visibility: hidden;
+ margin-right: 10px;
+ cursor: pointer;
+}
+
+#sidebar li:hover .edit-icon {
+ visibility: visible;
+}
\ No newline at end of file
+