stores.ts added, StrapiNoteRepository using it, updated editor

This commit is contained in:
j-weissen 2022-10-16 23:22:19 +02:00
parent 22396d1a00
commit 154d496208
3 changed files with 67 additions and 11 deletions

View file

@ -1,24 +1,65 @@
<script lang="ts">
import type {Note} from "../../models/types";
import {StrapiNoteRepository} from "../../models/StrapiNoteRepository";
import {onMount} from "svelte";
import {currentNoteId} from "../../stores";
let notes: Note[] = JSON.parse(window.localStorage.getItem("notes"));
const clickedNoteId = window.localStorage.getItem("clickedNoteId");
let noteRepo: StrapiNoteRepository;
let currentNote: Note;
let id;
onMount(async () => {
currentNoteId.subscribe(v => id = v);
noteRepo = StrapiNoteRepository.getInstance();
currentNote = await noteRepo.getNote(noteRepo.currentNoteId);
title = (<Note>currentNote).title;
content = (<Note>currentNote).content;
console.log(noteRepo.currentNoteId)
})
export let title: string, content: string;
function save() {
noteRepo.updateNote(currentNote.id, {
"title": currentNote.title,
"content": currentNote.content
})
}
function cancel() {
window.location = "/";
}
const currNote = notes.find((note)=>{
return note.id === parseInt(clickedNoteId);
});
</script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{"Pomelonote | Edit " + currNote.title}</title>
<title>Editor</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="" rel="stylesheet">
</head>
<html lang="en">
<div class="offset-3 col-6">
{currNote.content}
<input bind:value={title} class="input"> <br />
<textarea bind:value={content} class="input"></textarea>
<button on:click={() => save()} class="btn btn-primary save">Save</button>
<button on:click={() => cancel()} class="btn btn-outline-danger cancel">Cancel</button>
</div>
</html>
<style>
.input {
margin-top: 30px;
width: 100%;
}
.save {
justify-content: right;
}
.cancel {
justify-content: right;
}
</style>