Skip to content

Commit

Permalink
style: unify linting
Browse files Browse the repository at this point in the history
  • Loading branch information
knrdl committed Jul 17, 2023
1 parent 37903ae commit 4566ab0
Show file tree
Hide file tree
Showing 17 changed files with 1,310 additions and 1,309 deletions.
8 changes: 7 additions & 1 deletion .vscode/settings.json
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
}
184 changes: 91 additions & 93 deletions client/src/App.svelte
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>
48 changes: 23 additions & 25 deletions client/src/LoadingScreen.svelte
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>
54 changes: 26 additions & 28 deletions client/src/ThemeSwitcher.svelte
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>
2 changes: 1 addition & 1 deletion client/src/api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export default {
* @param payload any json serializable object
*/
send(request: ApiRequest, payload?: any) {
ws.send(JSON.stringify({request, payload}))
ws.send(JSON.stringify({ request, payload }))
},

close() {
Expand Down
Loading

0 comments on commit 4566ab0

Please sign in to comment.