ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2025-07-01 03:03:50 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/frontend/src/Config.root.svelte
View File

@ -14,15 +14,18 @@
import SupportSettings from "./config/SupportSettings.svelte";
import AdminSettings from "./config/AdminSettings.svelte";
export let isAdmin;
export let isSupport;
export let isApi;
export let username;
export let ncontent;
/* Svelte 5 Props */
let {
isAdmin,
isSupport,
isApi,
username,
ncontent,
} = $props();
</script>
{#if isAdmin}
<Card style="margin-bottom: 1.5em;">
<Card style="margin-bottom: 1.5rem;">
<CardHeader>
<CardTitle class="mb-1">Admin Options</CardTitle>
</CardHeader>
@ -31,7 +34,7 @@
{/if}
{#if isSupport || isAdmin}
<Card style="margin-bottom: 1.5em;">
<Card style="margin-bottom: 1.5rem;">
<CardHeader>
<CardTitle class="mb-1">Support Options</CardTitle>
</CardHeader>

34
web/frontend/src/analysis/PlotSelection.svelte
View File

@ -21,10 +21,14 @@
} from "@sveltestrap/sveltestrap";
import { gql, getContextClient, mutationStore } from "@urql/svelte";
export let availableMetrics;
export let metricsInHistograms;
export let metricsInScatterplots;
/* Svelte 5 Props */
let {
availableMetrics,
metricsInHistograms = $bindable(),
metricsInScatterplots = $bindable(),
} = $props();
/* Const Init */
const client = getContextClient();
const updateConfigurationMutation = ({ name, value }) => {
return mutationStore({
@ -38,11 +42,13 @@
});
};
let isHistogramConfigOpen = false,
isScatterPlotConfigOpen = false;
let selectedMetric1 = null,
selectedMetric2 = null;
/* State Init */
let isHistogramConfigOpen = $state(false);
let isScatterPlotConfigOpen = $state(false);
let selectedMetric1 = $state(null);
let selectedMetric2 = $state(null);
/* Functions */
function updateConfiguration(data) {
updateConfigurationMutation({
name: data.name,
@ -55,12 +61,12 @@
}
</script>
<Button outline on:click={() => (isHistogramConfigOpen = true)}>
<Button outline onclick={() => (isHistogramConfigOpen = true)}>
<Icon name="" />
Select Plots for Histograms
</Button>
<Button outline on:click={() => (isScatterPlotConfigOpen = true)}>
<Button outline onclick={() => (isScatterPlotConfigOpen = true)}>
<Icon name="" />
Select Plots in Scatter Plots
</Button>
@ -78,7 +84,7 @@
type="checkbox"
bind:group={metricsInHistograms}
value={metric}
on:change={() =>
onchange={() =>
updateConfiguration({
name: "analysis_view_histogramMetrics",
value: metricsInHistograms,
@ -91,7 +97,7 @@
</ListGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" on:click={() => (isHistogramConfigOpen = false)}>
<Button color="primary" onclick={() => (isHistogramConfigOpen = false)}>
Close
</Button>
</ModalFooter>
@ -112,7 +118,7 @@
style="float: right;"
outline
color="danger"
on:click={() => {
onclick={() => {
metricsInScatterplots = metricsInScatterplots.filter(
(p) => pair != p,
);
@ -146,7 +152,7 @@
<Button
outline
disabled={selectedMetric1 == null || selectedMetric2 == null}
on:click={() => {
onclick={() => {
metricsInScatterplots = [
...metricsInScatterplots,
[selectedMetric1, selectedMetric2],
@ -164,7 +170,7 @@
</InputGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" on:click={() => (isScatterPlotConfigOpen = false)}>
<Button color="primary" onclick={() => (isScatterPlotConfigOpen = false)}>
Close
</Button>
</ModalFooter>

21
web/frontend/src/config/AdminSettings.svelte
View File

@ -12,13 +12,17 @@
import Options from "./admin/Options.svelte";
import NoticeEdit from "./admin/NoticeEdit.svelte";
export let ncontent;
let users = [];
let roles = [];
/* Svelte 5 Props */
let { ncontent } = $props();
/* Const Init*/
const ccconfig = getContext("cc-config");
/* State Init */
let users = $state([]);
let roles = $state([]);
/* Functions */
function getUserList() {
fetch("/config/users/?via-ldap=false&not-just-user=true")
.then((res) => res.json())
@ -40,21 +44,22 @@
getValidRoles();
}
/* on Mount */
onMount(() => initAdmin());
</script>
<Row cols={2} class="p-2 g-2">
<Col class="mb-1">
<AddUser {roles} on:reload={getUserList} />
<AddUser {roles} reloadUser={() => getUserList()} />
</Col>
<Col class="mb-1">
<ShowUsers on:reload={getUserList} bind:users />
<ShowUsers reloadUser={() => getUserList()} bind:users />
</Col>
<Col>
<EditRole {roles} on:reload={getUserList} />
<EditRole {roles} reloadUser={() => getUserList()} />
</Col>
<Col>
<EditProject on:reload={getUserList} />
<EditProject reloadUser={() => getUserList()} />
</Col>
<Options config={ccconfig}/>
<NoticeEdit {ncontent}/>

31
web/frontend/src/config/UserSettings.svelte
View File

@ -12,17 +12,26 @@
import PlotRenderOptions from "./user/PlotRenderOptions.svelte";
import PlotColorScheme from "./user/PlotColorScheme.svelte";
export let username
export let isApi
/* Svelte 5 Props */
let {
username,
isApi
} = $props();
/* Const Init */
const ccconfig = getContext("cc-config");
let message = { msg: "", target: "", color: "#d63384" };
let displayMessage = false;
let cbmode = ccconfig?.plot_general_colorblindMode || false;
/* State Init */
let message = $state({ msg: "", target: "", color: "#d63384" });
let displayMessage = $state(false);
let cbmode = $state(ccconfig?.plot_general_colorblindMode || false);
async function handleSettingSubmit(event) {
const selector = event.detail.selector
const target = event.detail.target
/* Functions */
async function handleSettingSubmit(event, setting) {
event.preventDefault();
const selector = setting.selector
const target = setting.target
let form = document.querySelector(selector);
let formData = new FormData(form);
try {
@ -53,6 +62,6 @@
}
</script>
<UserOptions config={ccconfig} {username} {isApi} bind:message bind:displayMessage on:update-config={(e) => handleSettingSubmit(e)}/>
<PlotRenderOptions config={ccconfig} bind:message bind:displayMessage on:update-config={(e) => handleSettingSubmit(e)}/>
<PlotColorScheme config={ccconfig} bind:cbmode bind:message bind:displayMessage on:update-config={(e) => handleSettingSubmit(e)}/>
<UserOptions config={ccconfig} {username} {isApi} bind:message bind:displayMessage updateSetting={(e, newSetting) => handleSettingSubmit(e, newSetting)}/>
<PlotRenderOptions config={ccconfig} bind:message bind:displayMessage updateSetting={(e, newSetting) => handleSettingSubmit(e, newSetting)}/>
<PlotColorScheme config={ccconfig} bind:cbmode bind:message bind:displayMessage updateSetting={(e, newSetting) => handleSettingSubmit(e, newSetting)}/>

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}

15
web/frontend/src/config/support/SupportOptions.svelte
View File

@ -6,12 +6,17 @@
import { Row, Col, Card, CardTitle, CardBody, Button} from "@sveltestrap/sveltestrap";
import { fade } from "svelte/transition";
export let config;
/* Svelte 5 Props */
let { config } = $props();
let message;
let displayMessage;
/* State Init */
let message = $state("");
let displayMessage = $state(false);
/* Functions */
async function handleSettingSubmit(event, selector, target) {
event.preventDefault()
async function handleSettingSubmit(selector, target) {
let form = document.querySelector(selector);
let formData = new FormData(form);
try {
@ -58,7 +63,7 @@
id="node-paging-form"
method="post"
action="/frontend/configuration/"
on:submit|preventDefault={() => handleSettingSubmit("#node-paging-form", "npag")}>
onsubmit={(e) => handleSettingSubmit(e, "#node-paging-form", "npag")}>
<input type="hidden" name="key" value="node_list_usePaging" />
<div class="mb-3">
<div>

75
web/frontend/src/config/user/PlotColorScheme.svelte
View File

@ -19,21 +19,20 @@
CardTitle,
} from "@sveltestrap/sveltestrap";
import { fade } from "svelte/transition";
import { createEventDispatcher } from 'svelte';
export let config;
export let message;
export let displayMessage;
export let cbmode = false;
/* Svelte 5 Props */
let {
config,
message = $bindable(),
displayMessage = $bindable(),
cbmode = $bindable(false),
updateSetting
} = $props();
const dispatch = createEventDispatcher();
function updateSetting(selector, target) {
dispatch('update-config', {
selector: selector,
target: target
});
}
/* State Init */
let activeRow = $state(JSON.stringify(config?.plot_general_colorscheme));
/* Const Init */
const colorschemes = {
Default: [
"#00bfff",
@ -321,7 +320,6 @@
"rgb(189,189,189)",
]
}
</script>
<Row cols={1} class="p-2 g-2">
@ -350,37 +348,34 @@
<input type="hidden" name="key" value="plot_general_colorscheme" />
<Table hover>
<tbody>
{#each Object.entries(cbmode ? cvdschemes : colorschemes) as [name, rgbrow]}
<tr>
<th scope="col">{name}</th>
<td>
{#if rgbrow.join(",") == config.plot_general_colorscheme}
{#key activeRow}
{#each Object.entries(cbmode ? cvdschemes : colorschemes) as [name, rgbrow]}
<tr>
<th scope="col">{name}</th>
<td>
<input
type="radio"
name="value"
value={JSON.stringify(rgbrow)}
checked
on:click={() =>
updateSetting("#colorscheme-form", "cs")}
checked={activeRow == JSON.stringify(rgbrow)}
onclick={(e) => {
activeRow = JSON.stringify(rgbrow)
updateSetting(e, {
selector: "#colorscheme-form",
target: "cs",
});
}}
/>
{:else}
<input
type="radio"
name="value"
value={JSON.stringify(rgbrow)}
on:click={() =>
updateSetting("#colorscheme-form", "cs")}
/>
{/if}
</td>
<td>
{#each rgbrow as rgb}
<span class="color-dot" style="background-color: {rgb};"
></span>
{/each}
</td>
</tr>
{/each}
</td>
<td>
{#each rgbrow as rgb}
<span class="color-dot" style="background-color: {rgb};"
></span>
{/each}
</td>
</tr>
{/each}
{/key}
</tbody>
</Table>
</form>

44
web/frontend/src/config/user/PlotRenderOptions.svelte
View File

@ -19,33 +19,29 @@
CardTitle,
} from "@sveltestrap/sveltestrap";
import { fade } from "svelte/transition";
import { createEventDispatcher } from 'svelte';
export let config;
export let message;
export let displayMessage;
const dispatch = createEventDispatcher();
function updateSetting(selector, target) {
dispatch('update-config', {
selector: selector,
target: target
});
}
/* Svelte 5 Props */
let {
config,
message = $bindable(),
displayMessage = $bindable(),
updateSetting
} = $props();
</script>
<Row cols={3} class="p-2 g-2">
<!-- LINE WIDTH -->
<Col
><Card class="h-100">
<!-- Important: Function with arguments needs to be event-triggered like on:submit={() => functionName('Some','Args')} OR no arguments and like this: on:submit={functionName} -->
<form
id="line-width-form"
method="post"
action="/frontend/configuration/"
class="card-body"
on:submit|preventDefault={() =>
updateSetting("#line-width-form", "lw")}
onsubmit={(e) => updateSetting(e, {
selector: "#line-width-form",
target: "lw",
})}
>
<!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
<CardTitle
@ -90,8 +86,10 @@
method="post"
action="/frontend/configuration/"
class="card-body"
on:submit|preventDefault={() =>
updateSetting("#plots-per-row-form", "ppr")}
onsubmit={(e) => updateSetting(e, {
selector: "#plots-per-row-form",
target: "ppr",
})}
>
<!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
<CardTitle
@ -136,8 +134,10 @@
method="post"
action="/frontend/configuration/"
class="card-body"
on:submit|preventDefault={() =>
updateSetting("#backgrounds-form", "bg")}
onsubmit={(e) => updateSetting(e, {
selector: "#backgrounds-form",
target: "bg",
})}
>
<!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
<CardTitle
@ -180,8 +180,10 @@
method="post"
action="/frontend/configuration/"
class="card-body"
on:submit|preventDefault={() =>
updateSetting("#colorblindmode-form", "cbm")}
onsubmit={(e) => updateSetting(e, {
selector: "#colorblindmode-form",
target: "cbm",
})}
>
<!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
<CardTitle

40
web/frontend/src/config/user/UserOptions.svelte
View File

@ -22,16 +22,23 @@
CardBody
} from "@sveltestrap/sveltestrap";
import { fade } from "svelte/transition";
import { createEventDispatcher } from 'svelte';
import { fetchJwt } from "../../generic/utils.js";
export let config;
export let message;
export let displayMessage;
export let username;
export let isApi;
/* Svelte 5 Props */
let {
config,
message = $bindable(),
displayMessage = $bindable(),
username,
isApi,
updateSetting
} = $props();
let jwt = "";
/* State Init */
let jwt = $state("");
let displayCheck = $state(false);
/* Functions */
function getUserJwt(username) {
if (username) {
const p = fetchJwt(username);
@ -43,7 +50,6 @@
}
}
let displayCheck = false;
function clipJwt() {
displayCheck = true;
// Navigator clipboard api needs a secure context (https)
@ -71,14 +77,6 @@
displayCheck = false;
}, 1000);
}
const dispatch = createEventDispatcher();
function updateSetting(selector, target) {
dispatch('update-config', {
selector: selector,
target: target
});
}
</script>
<Row cols={isApi ? 3 : 1} class="p-2 g-2">
@ -90,8 +88,10 @@
method="post"
action="/frontend/configuration/"
class="card-body"
on:submit|preventDefault={() =>
updateSetting("#paging-form", "pag")}
onsubmit={(e) => updateSetting(e, {
selector: "#paging-form",
target: "pag",
})}
>
<!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
<CardTitle
@ -137,7 +137,7 @@
<CardBody>
<CardTitle>Generate JWT</CardTitle>
{#if jwt}
<Button color="secondary" on:click={() => clipJwt()}>
<Button color="secondary" onclick={() => clipJwt()}>
Copy JWT to Clipboard
</Button>
<p class="mt-2">
@ -149,7 +149,7 @@
</p>
{/if}
{:else}
<Button color="success" on:click={() => getUserJwt(username)}>
<Button color="success" onclick={() => getUserJwt(username)}>
Generate JWT for '{username}'
</Button>
<p class="mt-2">

1
web/frontend/src/generic/PlotGrid.svelte
View File

@ -19,6 +19,7 @@
* Requirements
* - Parent Components must be already Migrated
* - TODO: Job.root.svelte, Node.root.svelte
* - DONE: Analysis, Status, User
*
* How-To
* - Define "Plot-Slotcode" as SV5 Snippet with argument "item" in parent (!)