93 lines
3.2 KiB
Svelte
93 lines
3.2 KiB
Svelte
<!--
|
|
- This file is a part of the SteamWar software.
|
|
-
|
|
- Copyright (C) 2023 SteamWar.de-Serverteam
|
|
-
|
|
- This program is free software: you can redistribute it and/or modify
|
|
- it under the terms of the GNU Affero General Public License as published by
|
|
- the Free Software Foundation, either version 3 of the License, or
|
|
- (at your option) any later version.
|
|
-
|
|
- This program is distributed in the hope that it will be useful,
|
|
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
- GNU Affero General Public License for more details.
|
|
-
|
|
- You should have received a copy of the GNU Affero General Public License
|
|
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
-->
|
|
|
|
<script lang="ts">
|
|
import {Spinner, Toolbar, ToolbarButton, ToolbarGroup} from "flowbite-svelte";
|
|
import {json} from "@codemirror/lang-json";
|
|
import CodeMirror from "svelte-codemirror-editor";
|
|
import {base64ToBytes} from "../../util.ts";
|
|
import type {Page} from "@type/page.ts";
|
|
import {materialDark} from '@ddietr/codemirror-themes/material-dark.js'
|
|
import {createEventDispatcher} from "svelte";
|
|
import MDEMarkdownEditor from "./MDEMarkdownEditor.svelte";
|
|
import {pageRepo} from "@repo/page.ts";
|
|
|
|
export let pageId: number;
|
|
export let branch: string;
|
|
export let dirty: boolean = false;
|
|
|
|
let dispatcher = createEventDispatcher();
|
|
|
|
$: pageFuture = $pageRepo.getPage(pageId, branch).then(getPage);
|
|
let pageContent = "";
|
|
let page: Page | null = null;
|
|
|
|
function getPage(value: Page): Page {
|
|
page = value;
|
|
pageContent = new TextDecoder().decode(base64ToBytes(value.content));
|
|
return value;
|
|
}
|
|
|
|
function savePage() {
|
|
let message = window.prompt("Commit message:", "Update " + page!.name)
|
|
if (message) {
|
|
$pageRepo.updatePage(pageId, pageContent, page!.sha, message, branch)
|
|
dirty = false;
|
|
}
|
|
}
|
|
|
|
async function deletePage() {
|
|
let message = window.prompt("Commit message:", "Delete " + page!.name)
|
|
if (message) {
|
|
await $pageRepo.deletePage(pageId, message, page!.sha, branch)
|
|
dirty = false;
|
|
dispatcher("reload")
|
|
}
|
|
}
|
|
</script>
|
|
<svelte:window on:beforeunload={() => {
|
|
if (dirty) {
|
|
return "You have unsaved changes. Are you sure you want to leave?";
|
|
}
|
|
}} />
|
|
{#await pageFuture}
|
|
<Spinner />
|
|
{:then p}
|
|
<div>
|
|
<div>
|
|
<Toolbar class="!bg-gray-900">
|
|
<ToolbarGroup slot="end">
|
|
<ToolbarButton on:click={deletePage}>
|
|
Delete
|
|
</ToolbarButton>
|
|
<ToolbarButton color="primary" on:click={savePage}>
|
|
Save
|
|
</ToolbarButton>
|
|
</ToolbarGroup>
|
|
</Toolbar>
|
|
</div>
|
|
{#if page?.name.endsWith("md")}
|
|
<MDEMarkdownEditor bind:value={pageContent} bind:dirty />
|
|
{:else}
|
|
<CodeMirror bind:value={pageContent} lang={json()} theme={materialDark} on:change={() => dirty = true} />
|
|
{/if}
|
|
</div>
|
|
{:catch error}
|
|
<p>{error.message}</p>
|
|
{/await} |