ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2026-04-03 14:37:29 +02:00
Code Issues Packages Releases Activity

Migrate config, migrate analysis plotselection

Browse Source
This commit is contained in:
Christoph Kluge
2025-06-16 17:09:02 +02:00
parent d6d92071bf
commit 6a6dca3fce
16 changed files with 224 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/frontend/src/config/admin/AddUser.svelte
View File

@@ -10,17 +10,19 @@
<script>
import { Button, Card, CardTitle } from "@sveltestrap/sveltestrap";
import { createEventDispatcher } from "svelte";
import { fade } from "svelte/transition";
const dispatch = createEventDispatcher();
/* Svelte 5 Props */
let { roles, reloadUser } = $props();
let message = { msg: "", color: "#d63384" };
let displayMessage = false;
/* State Init */
let message = $state({ msg: "", color: "#d63384" });
let displayMessage = $state(false);
export let roles;
async function handleUserSubmit() {
/* Functions */
async function handleUserSubmit(event) {
event.preventDefault();
let form = document.querySelector("#create-user-form");
let formData = new FormData(form);
@@ -29,7 +31,7 @@
if (res.ok) {
let text = await res.text();
popMessage(text, "#048109");
reloadUserList();
reloadUser();
form.reset();
} else {
let text = await res.text();
@@ -47,10 +49,6 @@
displayMessage = false;
}, 3500);
}
function reloadUserList() {
dispatch("reload");
}
</script>
<Card>
@@ -60,7 +58,7 @@
action="/config/users/"
class="card-body"
autocomplete="off"
on:submit|preventDefault={handleUserSubmit}
onsubmit={(e) => handleUserSubmit(e)}
>
<CardTitle class="mb-3">Create User</CardTitle>
<div class="mb-3">

32
web/frontend/src/config/admin/EditProject.svelte
View File

@@ -7,15 +7,19 @@
<script>
import { Card, CardTitle, CardBody } from "@sveltestrap/sveltestrap";
import { createEventDispatcher } from "svelte";
import { fade } from "svelte/transition";
const dispatch = createEventDispatcher();
/* Svelte 5 Props */
let { reloadUser } = $props();
let message = { msg: "", color: "#d63384" };
let displayMessage = false;
/* State Init */
let message = $state({ msg: "", color: "#d63384" });
let displayMessage = $state(false);
/* Functions */
async function handleAddProject(event) {
event.preventDefault();
async function handleAddProject() {
const username = document.querySelector("#project-username").value;
const project = document.querySelector("#project-id").value;
@@ -36,7 +40,7 @@
if (res.ok) {
let text = await res.text();
popMessage(text, "#048109");
reloadUserList();
reloadUser();
} else {
let text = await res.text();
throw new Error("Response Code " + res.status + "-> " + text);
@@ -46,7 +50,9 @@
}
}
async function handleRemoveProject() {
async function handleRemoveProject(event) {
event.preventDefault();
const username = document.querySelector("#project-username").value;
const project = document.querySelector("#project-id").value;
@@ -67,7 +73,7 @@
if (res.ok) {
let text = await res.text();
popMessage(text, "#048109");
reloadUserList();
reloadUser();
} else {
let text = await res.text();
throw new Error("Response Code " + res.status + "-> " + text);
@@ -84,10 +90,6 @@
displayMessage = false;
}, 3500);
}
function reloadUserList() {
dispatch("reload");
}
</script>
<Card>
@@ -108,19 +110,17 @@
placeholder="project-id"
id="project-id"
/>
<!-- PreventDefault on Sveltestrap-Button more complex to achieve than just use good ol' html button -->
<!-- see: https://stackoverflow.com/questions/69630422/svelte-how-to-use-event-modifiers-in-my-own-components -->
<button
class="btn btn-primary"
type="button"
id="add-project-button"
on:click|preventDefault={() => handleAddProject()}>Add</button
onclick={(e) => handleAddProject(e)}>Add</button
>
<button
class="btn btn-danger"
type="button"
id="remove-project-button"
on:click|preventDefault={() => handleRemoveProject()}>Remove</button
onclick={(e) => handleRemoveProject(e)}>Remove</button
>
</div>
<p>

32
web/frontend/src/config/admin/EditRole.svelte
View File

@@ -10,17 +10,19 @@
<script>
import { Card, CardTitle, CardBody } from "@sveltestrap/sveltestrap";
import { createEventDispatcher } from "svelte";
import { fade } from "svelte/transition";
const dispatch = createEventDispatcher();
/* SVelte 5 Props */
let {roles, reloadUser } = $props();
let message = { msg: "", color: "#d63384" };
let displayMessage = false;
/* State Init */
let message = $state({ msg: "", color: "#d63384" });
let displayMessage = $state(false);
export let roles;
/* Functions */
async function handleAddRole(event) {
event.preventDefault();
async function handleAddRole() {
const username = document.querySelector("#role-username").value;
const role = document.querySelector("#role-select").value;
@@ -41,7 +43,7 @@
if (res.ok) {
let text = await res.text();
popMessage(text, "#048109");
reloadUserList();
reloadUser();
} else {
let text = await res.text();
throw new Error("Response Code " + res.status + "-> " + text);
@@ -51,7 +53,9 @@
}
}
async function handleRemoveRole() {
async function handleRemoveRole(event) {
event.preventDefault();
const username = document.querySelector("#role-username").value;
const role = document.querySelector("#role-select").value;
@@ -72,7 +76,7 @@
if (res.ok) {
let text = await res.text();
popMessage(text, "#048109");
reloadUserList();
reloadUser();
} else {
let text = await res.text();
throw new Error("Response Code " + res.status + "-> " + text);
@@ -89,10 +93,6 @@
displayMessage = false;
}, 3500);
}
function reloadUserList() {
dispatch("reload");
}
</script>
<Card>
@@ -113,19 +113,17 @@
>
{/each}
</select>
<!-- PreventDefault on Sveltestrap-Button more complex to achieve than just use good ol' html button -->
<!-- see: https://stackoverflow.com/questions/69630422/svelte-how-to-use-event-modifiers-in-my-own-components -->
<button
class="btn btn-primary"
type="button"
id="add-role-button"
on:click|preventDefault={() => handleAddRole()}>Add</button
onclick={(e) => handleAddRole(e)}>Add</button
>
<button
class="btn btn-danger"
type="button"
id="remove-role-button"
on:click|preventDefault={() =>handleRemoveRole()}>Remove</button
onclick={(e) =>handleRemoveRole(e)}>Remove</button
>
</div>
<p>

19
web/frontend/src/config/admin/NoticeEdit.svelte
View File

@@ -6,14 +6,18 @@
import { Col, Card, CardTitle, CardBody } from "@sveltestrap/sveltestrap";
import { fade } from "svelte/transition";
export let ncontent;
/* Svelte 5 Props */
let { ncontent } = $props();
let message = { msg: "", color: "#d63384" };
let displayMessage = false;
/* State Init */
let message = $state({ msg: "", color: "#d63384" });
let displayMessage = $state(false);
/* Functions */
async function handleEditNotice(event) {
event.preventDefault();
async function handleEditNotice() {
const content = document.querySelector("#notice-content").value;
let formData = new FormData();
formData.append("new-content", content);
@@ -56,14 +60,11 @@
value={ncontent}
id="notice-content"
/>
<!-- PreventDefault on Sveltestrap-Button more complex to achieve than just use good ol' html button -->
<!-- see: https://stackoverflow.com/questions/69630422/svelte-how-to-use-event-modifiers-in-my-own-components -->
<button
class="btn btn-primary"
type="button"
id="edit-notice-button"
on:click|preventDefault={() => handleEditNotice()}>Edit Notice</button
onclick={(e) => handleEditNotice(e)}>Edit Notice</button
>
</div>
<p>

9
web/frontend/src/config/admin/Options.svelte
View File

@@ -6,10 +6,13 @@
import { getContext, onMount } from "svelte";
import { Col, Card, CardBody, CardTitle } from "@sveltestrap/sveltestrap";
let scrambled;
/*Const Init */
const resampleConfig = getContext("resampling");
/* State Init */
let scrambled = $state(false);
/* on Mount */
onMount(() => {
scrambled = window.localStorage.getItem("cc-scramble-names") != null;
});
@@ -33,7 +36,7 @@
type="checkbox"
id="scramble-names-checkbox"
style="margin-right: 1em;"
on:click={() => handleScramble()}
onclick={() => handleScramble()}
bind:checked={scrambled}
/>
Active?

19
web/frontend/src/config/admin/ShowUsers.svelte
View File

@@ -16,23 +16,19 @@
CardTitle,
CardBody,
} from "@sveltestrap/sveltestrap";
import { createEventDispatcher } from "svelte";
import ShowUsersRow from "./ShowUsersRow.svelte";
export let users = [];
const dispatch = createEventDispatcher();
function reloadUserList() {
dispatch("reload");
}
/*Svelte 5 Props */
let { users = $bindable([]), reloadUser } = $props();
/* Functions */
function deleteUser(username) {
if (confirm("Are you sure?")) {
let formData = new FormData();
formData.append("username", username);
fetch("/config/users/", { method: "DELETE", body: formData }).then((res) => {
if (res.status == 200) {
reloadUserList();
reloadUser();
} else {
confirm(res.statusText);
}
@@ -40,7 +36,6 @@
}
}
$: userList = users;
</script>
<Card class="h-100">
@@ -53,7 +48,7 @@
<Button
color="secondary"
size="sm"
on:click={() => reloadUserList()}
onclick={() => reloadUser()}
style="float: right;">Reload</Button
>
</p>
@@ -71,13 +66,13 @@
</tr>
</thead>
<tbody id="users-list">
{#each userList as user}
{#each users as user}
<tr id="user-{user.username}">
<ShowUsersRow {user} />
<td
><button
class="btn btn-danger del-user"
on:click={() => deleteUser(user.username)}>Delete</button
onclick={() => deleteUser(user.username)}>Delete</button
></td
>
</tr>

10
web/frontend/src/config/admin/ShowUsersRow.svelte
View File

@@ -10,9 +10,13 @@
import { Button } from "@sveltestrap/sveltestrap";
import { fetchJwt } from "../../generic/utils.js"
export let user;
/* Svelte 5 Props */
let { user } = $props();
let jwt = "";
/* State Init */
let jwt = $state("");
/* Functions */
function getUserJwt(username) {
const p = fetchJwt(username);
p.then((content) => {
@@ -30,7 +34,7 @@
<td><code>{user?.roles ? user.roles.join(", ") : "No Roles"}</code></td>
<td>
{#if !jwt}
<Button color="success" on:click={() => getUserJwt(user.username)}
<Button color="success" onclick={() => getUserJwt(user.username)}
>Gen. JWT</Button
>
{:else}