-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
1,310 additions
and
1,309 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,11 @@ | ||
{ | ||
"python.formatting.autopep8Args": [ | ||
"--max-line-length=179" | ||
] | ||
], | ||
"svelte.plugin.svelte.format.config.printWidth": 180, | ||
"javascript.format.semicolons": "remove", | ||
"typescript.format.semicolons": "remove", | ||
"svelte.enable-ts-plugin": true, | ||
"svelte.plugin.svelte.format.config.svelteStrictMode": true, | ||
"prettier.semi": false | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,114 +1,112 @@ | ||
<script lang="ts"> | ||
import MessageQueue from "./messages/MessageQueue.svelte" | ||
import ThemeSwitcher from "./ThemeSwitcher.svelte" | ||
import Login from "./auth/Login.svelte" | ||
import {onMount} from "svelte" | ||
import api from "./api" | ||
import {messageBus} from "./messages/message-store" | ||
import Index from "./containers/Index.svelte" | ||
import Fa from "svelte-fa" | ||
import {faHouseUser, faSignOutAlt, faBars} from "@fortawesome/free-solid-svg-icons" | ||
import MessageQueue from './messages/MessageQueue.svelte' | ||
import ThemeSwitcher from './ThemeSwitcher.svelte' | ||
import Login from './auth/Login.svelte' | ||
import { onMount } from 'svelte' | ||
import api from './api' | ||
import { messageBus } from './messages/message-store' | ||
import Index from './containers/Index.svelte' | ||
import Fa from 'svelte-fa' | ||
import { faHouseUser, faSignOutAlt, faBars } from '@fortawesome/free-solid-svg-icons' | ||
let loggedInUsername: string | null = null | ||
let userCanLogout: boolean = true | ||
let showHostInfo: boolean = true | ||
let showContainerListOverlay: boolean = false | ||
let loggedInUsername: string | null = null | ||
let userCanLogout: boolean = true | ||
let showHostInfo: boolean = true | ||
let showContainerListOverlay: boolean = false | ||
onMount(async () => { | ||
api.register('ws-error', null, (err) => messageBus.add({text: err, type: 'error'})) | ||
api.register('ws-close', null, (err) => { | ||
messageBus.add({text: err, type: 'error'}) | ||
loggedInUsername = null | ||
alert('Lost connection. Reconnect?') | ||
window.location.reload() | ||
}) | ||
api.register<{ username: string }>('webproxy_auth', ({username}) => { | ||
loggedInUsername = username | ||
userCanLogout = false | ||
}, err => { | ||
messageBus.add({text: err, type: 'error'}) | ||
}) | ||
await api.init() | ||
onMount(async () => { | ||
api.register('ws-error', null, (err) => messageBus.add({ text: err, type: 'error' })) | ||
api.register('ws-close', null, (err) => { | ||
messageBus.add({ text: err, type: 'error' }) | ||
loggedInUsername = null | ||
alert('Lost connection. Reconnect?') | ||
window.location.reload() | ||
}) | ||
api.register<{ username: string }>( | ||
'webproxy_auth', | ||
({ username }) => { | ||
loggedInUsername = username | ||
userCanLogout = false | ||
}, | ||
(err) => { | ||
messageBus.add({ text: err, type: 'error' }) | ||
} | ||
) | ||
await api.init() | ||
}) | ||
function logout() { | ||
api.close() | ||
loggedInUsername = null | ||
messageBus.add({text: 'Logged out', type: 'info'}) | ||
window.location.reload() | ||
} | ||
function handleAppError() { | ||
alert('An error occurred!') | ||
} | ||
function logout() { | ||
api.close() | ||
loggedInUsername = null | ||
messageBus.add({ text: 'Logged out', type: 'info' }) | ||
window.location.reload() | ||
} | ||
function handleAppError() { | ||
alert('An error occurred!') | ||
} | ||
</script> | ||
|
||
<svelte:window on:error={handleAppError}/> | ||
<svelte:window on:error="{handleAppError}" /> | ||
|
||
<MessageQueue/> | ||
<MessageQueue /> | ||
|
||
<main> | ||
<header> | ||
{#if loggedInUsername} | ||
<a href="/#/" class="d-md-none d-flex justify-content-center align-items-center" | ||
on:click|preventDefault={()=>showContainerListOverlay = !showContainerListOverlay}> | ||
<Fa icon={faBars} color="#123" size="2x" style="width: 3rem;height: 3rem;"/> | ||
</a> | ||
{/if} | ||
<a href="/#/" class="d-flex justify-content-center align-items-center" | ||
on:click|preventDefault={()=>showHostInfo=true}> | ||
<span class:d-none={loggedInUsername} class:d-md-block={loggedInUsername}> | ||
<Fa icon={faHouseUser} color="#123" size="2x" style="width: 3rem;height: 3rem;"/> | ||
</span> | ||
<span class="text-black ps-2 fs-2 fw-light"> | ||
Container as a Service admin | ||
</span> | ||
</a> | ||
<div class="items-right"> | ||
<ThemeSwitcher/> | ||
{#if loggedInUsername && userCanLogout} | ||
<button type="button" class="btn mx-2" on:click={logout} title="Logout {loggedInUsername}"> | ||
<Fa icon={faSignOutAlt} color="#333" size="2x"/> | ||
</button> | ||
{/if} | ||
</div> | ||
</header> | ||
<header> | ||
{#if loggedInUsername} | ||
<Index bind:showHostInfo={showHostInfo} bind:showContainerListOverlay={showContainerListOverlay}/> | ||
{:else} | ||
<Login on:login={ev => loggedInUsername = ev.detail.username}/> | ||
<a href="/#/" class="d-md-none d-flex justify-content-center align-items-center" on:click|preventDefault="{() => (showContainerListOverlay = !showContainerListOverlay)}"> | ||
<Fa icon="{faBars}" color="#123" size="2x" style="width: 3rem;height: 3rem;" /> | ||
</a> | ||
{/if} | ||
<a href="/#/" class="d-flex justify-content-center align-items-center" on:click|preventDefault="{() => (showHostInfo = true)}"> | ||
<span class:d-none="{loggedInUsername}" class:d-md-block="{loggedInUsername}"> | ||
<Fa icon="{faHouseUser}" color="#123" size="2x" style="width: 3rem;height: 3rem;" /> | ||
</span> | ||
<span class="text-black ps-2 fs-2 fw-light"> Container as a Service admin </span> | ||
</a> | ||
<div class="items-right"> | ||
<ThemeSwitcher /> | ||
{#if loggedInUsername && userCanLogout} | ||
<button type="button" class="btn mx-2" on:click="{logout}" title="Logout {loggedInUsername}"> | ||
<Fa icon="{faSignOutAlt}" color="#333" size="2x" /> | ||
</button> | ||
{/if} | ||
</div> | ||
</header> | ||
{#if loggedInUsername} | ||
<Index bind:showHostInfo="{showHostInfo}" bind:showContainerListOverlay="{showContainerListOverlay}" /> | ||
{:else} | ||
<Login on:login="{(ev) => (loggedInUsername = ev.detail.username)}" /> | ||
{/if} | ||
</main> | ||
|
||
<style> | ||
header { | ||
box-shadow: 5px -5px 8px 10px rgba(0, 0, 0, 0.25); | ||
background: linear-gradient(to right, rgb(14, 101, 173), rgb(109, 152, 74)); | ||
display: flex; | ||
align-items: center; | ||
justify-content: space-between; | ||
padding: 1rem 1rem 1rem 1.5rem; | ||
margin-bottom: 1rem; | ||
} | ||
header { | ||
box-shadow: 5px -5px 8px 10px rgba(0, 0, 0, .25); | ||
background: linear-gradient(to right, rgb(14, 101, 173), rgb(109, 152, 74)); | ||
display: flex; | ||
align-items: center; | ||
justify-content: space-between; | ||
padding: 1rem 1rem 1rem 1.5rem; | ||
margin-bottom: 1rem; | ||
} | ||
header a { | ||
text-decoration: none; | ||
} | ||
header a { | ||
text-decoration: none; | ||
} | ||
header .items-right { | ||
display: flex; | ||
align-items: center; | ||
flex-wrap: wrap; | ||
justify-content: end; | ||
} | ||
header .items-right { | ||
display: flex; | ||
align-items: center; | ||
flex-wrap: wrap; | ||
justify-content: end; | ||
} | ||
main { | ||
min-height: 100vh; | ||
} | ||
main { | ||
min-height: 100vh; | ||
} | ||
:global(html:not(.dark)) main { | ||
background-color: #eee; | ||
} | ||
:global(html:not(.dark)) main { | ||
background-color: #eee; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,41 +1,39 @@ | ||
<script lang="ts"> | ||
import {blur} from 'svelte/transition' | ||
import {onMount} from "svelte" | ||
import { blur } from 'svelte/transition' | ||
import { onMount } from 'svelte' | ||
export let text: string = '' | ||
let visible: boolean = false | ||
onMount(() => { | ||
setTimeout(() => visible = true, 250) | ||
setTimeout(() => (visible = true), 250) | ||
}) | ||
</script> | ||
|
||
{#if visible} | ||
<div class="bg-outer position-fixed d-flex justify-content-center align-items-center top-0 start-0 end-0 bottom-0" | ||
in:blur> | ||
<div class="bg-inner d-flex flex-column rounded p-3"> | ||
<div class="d-flex justify-content-center align-items-center"> | ||
{#each [1, 2, 3] as n} | ||
<div class="spinner-grow mx-2 text-light" role="status"> | ||
<span class="visually-hidden">Loading...</span> | ||
</div> | ||
{/each} | ||
</div> | ||
{#if text} | ||
<div class="mt-4 text-light">{text}</div> | ||
{/if} | ||
</div> | ||
<div class="bg-outer position-fixed d-flex justify-content-center align-items-center top-0 start-0 end-0 bottom-0" in:blur> | ||
<div class="bg-inner d-flex flex-column rounded p-3"> | ||
<div class="d-flex justify-content-center align-items-center"> | ||
{#each [1, 2, 3] as n} | ||
<div class="spinner-grow mx-2 text-light" role="status"> | ||
<span class="visually-hidden">Loading...</span> | ||
</div> | ||
{/each} | ||
</div> | ||
{#if text} | ||
<div class="mt-4 text-light">{text}</div> | ||
{/if} | ||
</div> | ||
</div> | ||
{/if} | ||
|
||
<style> | ||
.bg-outer { | ||
background: rgba(0, 0, 0, .55); | ||
z-index: 600; | ||
} | ||
.bg-inner { | ||
font-size: 14pt; | ||
} | ||
.bg-outer { | ||
background: rgba(0, 0, 0, 0.55); | ||
z-index: 600; | ||
} | ||
.bg-inner { | ||
font-size: 14pt; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,39 +1,37 @@ | ||
<script lang="ts"> | ||
import {onMount} from "svelte" | ||
import {messageBus} from "./messages/message-store" | ||
import Fa from "svelte-fa" | ||
import {faMoon, faSun} from "@fortawesome/free-solid-svg-icons" | ||
import { onMount } from 'svelte' | ||
import { messageBus } from './messages/message-store' | ||
import Fa from 'svelte-fa' | ||
import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons' | ||
let theme: 'light' | 'dark' | ||
let theme: 'light' | 'dark' | ||
function toggle() { | ||
if (theme === 'light') { | ||
theme = 'dark' | ||
document.querySelector('html').classList.add('dark') | ||
// messageBus.add({text: 'Switching to dark theme', type: 'info'}) | ||
} else { | ||
theme = 'light' | ||
document.querySelector('html').classList.remove('dark') | ||
// messageBus.add({text: 'Switching to light theme', type: 'info'}) | ||
} | ||
function toggle() { | ||
if (theme === 'light') { | ||
theme = 'dark' | ||
document.querySelector('html').classList.add('dark') | ||
// messageBus.add({text: 'Switching to dark theme', type: 'info'}) | ||
} else { | ||
theme = 'light' | ||
document.querySelector('html').classList.remove('dark') | ||
// messageBus.add({text: 'Switching to light theme', type: 'info'}) | ||
} | ||
} | ||
onMount(() => { | ||
// theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light' | ||
theme = 'dark' // todo: should dark theme always be the default? perhaps yes | ||
if (theme === 'dark') document.querySelector('html').classList.add('dark') | ||
}) | ||
onMount(() => { | ||
// theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light' | ||
theme = 'dark' // todo: should dark theme always be the default? perhaps yes | ||
if (theme === 'dark') document.querySelector('html').classList.add('dark') | ||
}) | ||
</script> | ||
|
||
<button type="button" class="btn mx-2" on:click={toggle} title="Switch Theme"> | ||
{#if theme === 'dark'} | ||
<Fa icon={faMoon} color="#333" size="2x"/> | ||
{:else} | ||
<Fa icon={faSun} color="#333" size="2x"/> | ||
{/if} | ||
<button type="button" class="btn mx-2" on:click="{toggle}" title="Switch Theme"> | ||
{#if theme === 'dark'} | ||
<Fa icon="{faMoon}" color="#333" size="2x" /> | ||
{:else} | ||
<Fa icon="{faSun}" color="#333" size="2x" /> | ||
{/if} | ||
</button> | ||
|
||
<style> | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.