Skip to content

Commit 2d43e1c

Browse files
MaddyGuthridgeMaddyGuthridge
committed
Split admin panel into distinct components
1 parent 061bc58 commit 2d43e1c

File tree

3 files changed

+118
-89
lines changed

3 files changed

+118
-89
lines changed

‎src/routes/admin/+page.svelte‎

Lines changed: 16 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,25 @@
11
<script lang="ts">
2-
import api from '$endpoints';
3-
import Background from '$components/Background.svelte';
4-
import Navbar from '$components/navbar';
5-
import Paper from '$components/Paper.svelte';
6-
import consts from '$lib/consts';
7-
8-
export let data: import('./$types').PageData;
9-
10-
// Git setup
11-
let gitUrl = '';
12-
13-
async function submitSwitchToGit() {
14-
await api().admin.git.init(gitUrl);
15-
}
16-
17-
// Git controls
18-
let commitMessage = '';
19-
20-
async function gitCommit() {
21-
await api().admin.git.commit(commitMessage);
22-
}
2+
import Background from "$components/Background.svelte";
3+
import Navbar from "$components/navbar";
4+
import Paper from "$components/Paper.svelte";
5+
import consts from "$lib/consts";
6+
import GitSettings from "./GitSettings.svelte";
7+
import ChangePassword from "./ChangePassword.svelte";
8+
import ReloadData from "./ReloadData.svelte";
9+
10+
export let data: import("./$types").PageData;
2311
</script>
2412

2513
<svelte:head>
2614
<title>Admin - {data.globals.config.siteName}</title>
27-
<meta name="generator" content="{consts.APP_NAME}">
28-
<meta name="theme-color" content="{data.globals.config.color}">
15+
<meta name="generator" content={consts.APP_NAME} />
16+
<meta name="theme-color" content={data.globals.config.color} />
2917
<!-- Prevent web crawlers from indexing the admin page -->
30-
<meta name="robots" content="noindex">
18+
<meta name="robots" content="noindex" />
3119
</svelte:head>
3220

3321
<Navbar
34-
path={[{ txt: 'Admin', url: 'admin' }]}
22+
path={[{ txt: "Admin", url: "admin" }]}
3523
config={data.globals.config}
3624
loggedIn={true}
3725
/>
@@ -42,70 +30,9 @@
4230
<div id="paper-container">
4331
<Paper>
4432
<div id="contents">
45-
<div>
46-
{#if data.repo}
47-
<h2>Git status</h2>
48-
<p>Current branch: {data.repo.branch}</p>
49-
<p>Current commit: {data.repo.commit}</p>
50-
<p>
51-
{#if data.repo.behind}
52-
{data.repo.behind} commits behind.
53-
{/if}
54-
{#if data.repo.ahead}
55-
{data.repo.ahead} commits ahead.
56-
{/if}
57-
</p>
58-
59-
<!-- Push/pull -->
60-
{#if data.repo.behind}
61-
<button on:click={() => api().admin.git.push()}>Push</button>
62-
{:else if data.repo.ahead}
63-
<button on:click={() => api().admin.git.pull()}>Pull</button>
64-
{/if}
65-
66-
<!-- Commit -->
67-
{#if !data.repo.clean}
68-
69-
<h3>Changes</h3>
70-
71-
<ul>
72-
{#each data.repo.changes as change}
73-
{#if change.from}
74-
<li>Rename {change.from} to ({change.path})</li>
75-
{:else if change.index === '?'}
76-
<li>Create {change.path}</li>
77-
{:else if change.index === 'D'}
78-
<li>Delete {change.path}</li>
79-
{:else}
80-
<li>Update {change.path}</li>
81-
{/if}
82-
{/each}
83-
</ul>
84-
85-
<form on:submit|preventDefault={gitCommit}>
86-
<input required type="text" name="commit-message" id="commit-message" placeholder="Commit message" bind:value={commitMessage}>
87-
<input type="submit" value="Commit changes">
88-
</form>
89-
{/if}
90-
91-
{:else}
92-
<h2>Git is currently not in use</h2>
93-
94-
You can use a Git repository to back up your portfolio data. Enter the
95-
clone URL for an empty Git repository and it will be set up for you.
96-
97-
<form on:submit|preventDefault={submitSwitchToGit}>
98-
<input required type="text" name="git-url" id="git-url" placeholder="git@github.com:MaddyGuthridge/Minifolio.git" bind:value={gitUrl}>
99-
<input type="submit" value="Switch to a Git repository">
100-
</form>
101-
{/if}
102-
</div>
103-
<div>
104-
<h2>Reload data from disk</h2>
105-
If you have edited your data manually, you can use this button to
106-
refresh it.
107-
<button on:click={() => api().admin.data.refresh()}>Refresh data</button>
108-
</div>
33+
<GitSettings {data} />
34+
<ChangePassword username={"admin"} />
35+
<ReloadData />
10936
</div>
11037
</Paper>
11138
</div>

‎src/routes/admin/GitSettings.svelte‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<script lang="ts">
2+
import api from "$endpoints";
3+
4+
export let data: import("./$types").PageData;
5+
6+
// Git setup
7+
let gitUrl = "";
8+
9+
async function submitSwitchToGit() {
10+
await api().admin.git.init(gitUrl);
11+
}
12+
13+
// Git controls
14+
let commitMessage = "";
15+
16+
async function gitCommit() {
17+
await api().admin.git.commit(commitMessage);
18+
}
19+
</script>
20+
21+
<div>
22+
{#if data.repo}
23+
<h2>Git status</h2>
24+
<p>Current branch: {data.repo.branch}</p>
25+
<p>Current commit: {data.repo.commit}</p>
26+
<p>
27+
{#if data.repo.behind}
28+
{data.repo.behind} commits behind.
29+
{/if}
30+
{#if data.repo.ahead}
31+
{data.repo.ahead} commits ahead.
32+
{/if}
33+
</p>
34+
35+
<!-- Push/pull -->
36+
{#if data.repo.behind}
37+
<button on:click={() => api().admin.git.push()}>Push</button>
38+
{:else if data.repo.ahead}
39+
<button on:click={() => api().admin.git.pull()}>Pull</button>
40+
{/if}
41+
42+
<!-- Commit -->
43+
{#if data.repo.clean}
44+
<h3>Changes</h3>
45+
Working tree clean.
46+
{:else}
47+
<h3>Changes</h3>
48+
49+
<ul>
50+
{#each data.repo.changes as change}
51+
{#if change.from}
52+
<li>Rename {change.from} to ({change.path})</li>
53+
{:else if change.index === "?"}
54+
<li>Create {change.path}</li>
55+
{:else if change.index === "D"}
56+
<li>Delete {change.path}</li>
57+
{:else}
58+
<li>Update {change.path}</li>
59+
{/if}
60+
{/each}
61+
</ul>
62+
63+
<form on:submit|preventDefault={gitCommit}>
64+
<input
65+
required
66+
type="text"
67+
name="commit-message"
68+
id="commit-message"
69+
placeholder="Commit message"
70+
bind:value={commitMessage}
71+
/>
72+
<input type="submit" value="Commit changes" />
73+
</form>
74+
{/if}
75+
{:else}
76+
<h2>Git is currently not in use</h2>
77+
78+
You can use a Git repository to back up your portfolio data. Enter the clone
79+
URL for an empty Git repository and it will be set up for you.
80+
81+
<form on:submit|preventDefault={submitSwitchToGit}>
82+
<input
83+
required
84+
type="text"
85+
name="git-url"
86+
id="git-url"
87+
placeholder="git@github.com:MaddyGuthridge/Minifolio.git"
88+
bind:value={gitUrl}
89+
/>
90+
<input type="submit" value="Switch to a Git repository" />
91+
</form>
92+
{/if}
93+
</div>

‎src/routes/admin/ReloadData.svelte‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script>
2+
import api from "$endpoints";
3+
</script>
4+
5+
<div>
6+
<h2>Reload data from disk</h2>
7+
If you have edited your data manually, you can use this button to refresh it.
8+
<button on:click={() => api().admin.data.refresh()}>Refresh data</button>
9+
</div>

0 commit comments

Comments
 (0)