mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2025-07-27 06:36:07 +02:00
Restructure frontend svelte file src folder
- Goal: Dependency structure mirrored in file structure
This commit is contained in:
Christoph Kluge
46
web/frontend/src/header/NavbarLinks.svelte
Normal file
46
web/frontend/src/header/NavbarLinks.svelte
Normal file
@@ -0,0 +1,46 @@
|
||||
<!--
|
||||
@component Navbar component; renders in app navigation links as received from upstream
|
||||
|
||||
Properties:
|
||||
- `clusters [String]`: List of cluster names
|
||||
- `links [Object]`: Pre-filtered link objects based on user auth
|
||||
-->
|
||||
|
||||
<script>
|
||||
import {
|
||||
Icon,
|
||||
NavLink,
|
||||
Dropdown,
|
||||
DropdownToggle,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
} from "@sveltestrap/sveltestrap";
|
||||
|
||||
export let clusters;
|
||||
export let links;
|
||||
</script>
|
||||
|
||||
{#each links as item}
|
||||
{#if !item.perCluster}
|
||||
<NavLink href={item.href} active={window.location.pathname == item.href}
|
||||
><Icon name={item.icon} /> {item.title}</NavLink
|
||||
>
|
||||
{:else}
|
||||
<Dropdown nav inNavbar>
|
||||
<DropdownToggle nav caret>
|
||||
<Icon name={item.icon} />
|
||||
{item.title}
|
||||
</DropdownToggle>
|
||||
<DropdownMenu class="dropdown-menu-lg-end">
|
||||
{#each clusters as cluster}
|
||||
<DropdownItem
|
||||
href={item.href + cluster.name}
|
||||
active={window.location.pathname == item.href + cluster.name}
|
||||
>
|
||||
{cluster.name}
|
||||
</DropdownItem>
|
||||
{/each}
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
{/if}
|
||||
{/each}
|
||||
163
web/frontend/src/header/NavbarTools.svelte
Normal file
163
web/frontend/src/header/NavbarTools.svelte
Normal file
@@ -0,0 +1,163 @@
|
||||
<!--
|
||||
@component Navbar component; renders in app resource links and user dropdown
|
||||
|
||||
Properties:
|
||||
- `username String!`: Empty string if auth. is disabled, otherwise the username as string
|
||||
- `authlevel Number`: The current users authentication level
|
||||
- `roles [Number]`: Enum containing available roles
|
||||
- `screenSize Number`: The current window size, will trigger different render variants
|
||||
-->
|
||||
|
||||
<script>
|
||||
import {
|
||||
Icon,
|
||||
Nav,
|
||||
NavItem,
|
||||
InputGroup,
|
||||
Input,
|
||||
Button,
|
||||
InputGroupText,
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
} from "@sveltestrap/sveltestrap";
|
||||
|
||||
export let username;
|
||||
export let authlevel;
|
||||
export let roles;
|
||||
export let screenSize;
|
||||
</script>
|
||||
|
||||
<Nav navbar>
|
||||
{#if screenSize >= 768}
|
||||
<NavItem>
|
||||
<form method="GET" action="/search">
|
||||
<InputGroup>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search 'type:<query>' ..."
|
||||
name="searchId"
|
||||
style="margin-left: 10px;"
|
||||
/>
|
||||
<!-- bootstrap classes w/o effect -->
|
||||
<Button outline type="submit" title="Search"
|
||||
><Icon name="search" /></Button
|
||||
>
|
||||
<InputGroupText
|
||||
style="cursor:help;"
|
||||
title={authlevel >= roles.support
|
||||
? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name"
|
||||
: "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}
|
||||
><Icon name="info-circle" /></InputGroupText
|
||||
>
|
||||
</InputGroup>
|
||||
</form>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<a
|
||||
href="https://www.clustercockpit.org/docs/webinterface/"
|
||||
title="Documentation"
|
||||
rel="nofollow"
|
||||
target="_blank"
|
||||
>
|
||||
<Button outline style="margin-left: 10px;">
|
||||
<Icon name="book" />
|
||||
</Button>
|
||||
</a>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<Button
|
||||
outline
|
||||
on:click={() => (window.location.href = "/config")}
|
||||
style="margin-left: 10px;"
|
||||
title="Settings"
|
||||
>
|
||||
<Icon name="gear" />
|
||||
</Button>
|
||||
</NavItem>
|
||||
{#if username}
|
||||
<NavItem>
|
||||
<form method="POST" action="/logout">
|
||||
<Button
|
||||
outline
|
||||
color="success"
|
||||
type="submit"
|
||||
style="margin-left: 10px;"
|
||||
title="Logout {username}"
|
||||
>
|
||||
{#if screenSize > 1630}
|
||||
<Icon name="box-arrow-right" /> Logout {username}
|
||||
{:else}
|
||||
<Icon name="box-arrow-right" />
|
||||
{/if}
|
||||
</Button>
|
||||
</form>
|
||||
</NavItem>
|
||||
{/if}
|
||||
{:else}
|
||||
<NavItem>
|
||||
<Container>
|
||||
<Row cols={3}>
|
||||
<Col xs="4">
|
||||
<a
|
||||
href="https://www.clustercockpit.org/docs/webinterface/"
|
||||
title="Documentation"
|
||||
rel="nofollow"
|
||||
target="_blank"
|
||||
>
|
||||
<Button outline size="sm" class="my-2 w-100">
|
||||
<Icon name="box-arrow-up-right" /> Documentation
|
||||
</Button>
|
||||
</a>
|
||||
</Col>
|
||||
<Col xs="4">
|
||||
<Button
|
||||
outline
|
||||
on:click={() => (window.location.href = "/config")}
|
||||
size="sm"
|
||||
class="my-2 w-100"
|
||||
>
|
||||
{#if authlevel >= roles.admin}
|
||||
<Icon name="gear" /> Admin Settings
|
||||
{:else}
|
||||
<Icon name="gear" /> Plotting Options
|
||||
{/if}
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xs="4">
|
||||
<form method="POST" action="/logout">
|
||||
<Button
|
||||
outline
|
||||
color="success"
|
||||
type="submit"
|
||||
size="sm"
|
||||
class="my-2 w-100"
|
||||
>
|
||||
<Icon name="box-arrow-right" /> Logout {username}
|
||||
</Button>
|
||||
</form>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</NavItem>
|
||||
<NavItem style="margin-left: 10px; margin-right:10px;">
|
||||
<form method="GET" action="/search">
|
||||
<InputGroup>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search 'type:<query>' ..."
|
||||
name="searchId"
|
||||
/>
|
||||
<Button outline type="submit"><Icon name="search" /></Button>
|
||||
<InputGroupText
|
||||
style="cursor:help;"
|
||||
title={authlevel >= roles.support
|
||||
? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name"
|
||||
: "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}
|
||||
><Icon name="info-circle" /></InputGroupText
|
||||
>
|
||||
</InputGroup>
|
||||
</form>
|
||||
</NavItem>
|
||||
{/if}
|
||||
</Nav>
|
||||
Reference in New Issue
Block a user