cc-backend/web/frontend/src/header/NavbarTools.svelte

<!--
  @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,
    Dropdown,
    DropdownToggle,
    DropdownMenu,
    Row,
    Col,
  } from "@sveltestrap/sveltestrap";

  /* Svelte 5 Props */
  let {
    username,
    authlevel,
    roles,
    screenSize
  } = $props();
</script>

<Nav navbar>
  {#if screenSize >= 768}
    {#if screenSize <= 992}
      <NavItem>
        <form method="GET" action="/search">
          <Dropdown >
            <DropdownToggle outline color="secondary"><Icon name="search" /> Search</DropdownToggle>
            <DropdownMenu style="width:200px;">
              <InputGroup>
                <Input
                  type="search"
                  placeholder="type:<query> ..."
                  name="searchId"
                  class="mx-2"
                />
              </InputGroup>
            </DropdownMenu>
          </Dropdown>
        </form>
      </NavItem>
    {:else}
      <NavItem>
        <form method="GET" action="/search">
          <InputGroup>
            <Input
              type="search"
              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>
    {/if}
    <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
        onclick={() => (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
              onclick={() => (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>