feat: public system page!
This commit is contained in:
Spectralitree
parent
dc9a7a67b6
commit
ddda4ac58b
@ -1,10 +1,12 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Router, Link, Route } from "svelte-navigator";
|
import { Router, Route } from "svelte-navigator";
|
||||||
import Navigation from "./lib/Navigation.svelte";
|
import Navigation from "./lib/Navigation.svelte";
|
||||||
import Dash from "./pages/Dash.svelte";
|
import Dash from "./pages/Dash.svelte";
|
||||||
import Home from "./pages/Home.svelte";
|
import Home from "./pages/Home.svelte";
|
||||||
import Settings from './pages/Settings.svelte';
|
import Settings from './pages/Settings.svelte';
|
||||||
import Footer from './lib/Footer.svelte';
|
import Footer from './lib/Footer.svelte';
|
||||||
|
import Public from "./pages/Public.svelte";
|
||||||
|
import System from "./pages/profiles/System.svelte";
|
||||||
|
|
||||||
// theme cdns (I might make some myself too)
|
// theme cdns (I might make some myself too)
|
||||||
let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
|
let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
|
||||||
@ -31,6 +33,7 @@
|
|||||||
localStorage.setItem("pk-style", "dark");
|
localStorage.setItem("pk-style", "dark");
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
@ -39,14 +42,35 @@
|
|||||||
|
|
||||||
<Router>
|
<Router>
|
||||||
<Navigation bind:style={style}/>
|
<Navigation bind:style={style}/>
|
||||||
<Route path="/">
|
<Route path="/"><Home /></Route>
|
||||||
<Home />
|
<Route path="/dash"><Dash /></Route>
|
||||||
</Route>
|
<Route path="/settings"><Settings /></Route>
|
||||||
<Route path="/dash">
|
<Route path="/public/*">
|
||||||
<Dash />
|
<Route path="/"><Public /></Route>
|
||||||
</Route>
|
<Route path="/s/*">
|
||||||
<Route path="/settings">
|
<Route path = "/:id">
|
||||||
<Settings />
|
<System />
|
||||||
|
</Route>
|
||||||
|
<Route path = "/">
|
||||||
|
hey please provide a system
|
||||||
|
</Route>
|
||||||
|
</Route>
|
||||||
|
<Route path="/m/*">
|
||||||
|
<Route path = "/:id">
|
||||||
|
member
|
||||||
|
</Route>
|
||||||
|
<Route path = "/">
|
||||||
|
hey please provide a member
|
||||||
|
</Route>
|
||||||
|
</Route>
|
||||||
|
<Route path="/g/*">
|
||||||
|
<Route path = "/:id">
|
||||||
|
group
|
||||||
|
</Route>
|
||||||
|
<Route path = "/">
|
||||||
|
hey please provide a group
|
||||||
|
</Route>
|
||||||
|
</Route>
|
||||||
</Route>
|
</Route>
|
||||||
<Footer />
|
<Footer />
|
||||||
</Router>
|
</Router>
|
||||||
@ -6,6 +6,7 @@
|
|||||||
|
|
||||||
export let user: Sys;
|
export let user: Sys;
|
||||||
export let editMode: boolean;
|
export let editMode: boolean;
|
||||||
|
export let isPublic: boolean;
|
||||||
|
|
||||||
let htmlDescription: string;
|
let htmlDescription: string;
|
||||||
if (user.description) {
|
if (user.description) {
|
||||||
@ -23,23 +24,31 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Row>
|
<Row>
|
||||||
|
{#if user.id}
|
||||||
<Col xs={12} lg={4} class="mb-2">
|
<Col xs={12} lg={4} class="mb-2">
|
||||||
<b>ID:</b> {user.id}
|
<b>ID:</b> {user.id}
|
||||||
</Col>
|
</Col>
|
||||||
|
{/if}
|
||||||
|
{#if user.name}
|
||||||
<Col xs={12} lg={4} class="mb-2">
|
<Col xs={12} lg={4} class="mb-2">
|
||||||
<b>Name:</b> {user.name}
|
<b>Name:</b> {user.name}
|
||||||
</Col>
|
</Col>
|
||||||
|
{/if}
|
||||||
{#if user.tag}
|
{#if user.tag}
|
||||||
<Col xs={12} lg={4} class="mb-2">
|
<Col xs={12} lg={4} class="mb-2">
|
||||||
<b>Tag:</b> {user.tag}
|
<b>Tag:</b> {user.tag}
|
||||||
</Col>
|
</Col>
|
||||||
|
{/if}
|
||||||
|
{#if user.created}
|
||||||
<Col xs={12} lg={4} class="mb-2">
|
<Col xs={12} lg={4} class="mb-2">
|
||||||
<b>Created:</b> {created}
|
<b>Created:</b> {created}
|
||||||
</Col>
|
</Col>
|
||||||
{/if}
|
{/if}
|
||||||
|
{#if user.timezone}
|
||||||
<Col xs={12} lg={4} class="mb-2">
|
<Col xs={12} lg={4} class="mb-2">
|
||||||
<b>Timezone:</b> {user.timezone}
|
<b>Timezone:</b> {user.timezone}
|
||||||
</Col>
|
</Col>
|
||||||
|
{/if}
|
||||||
{#if user.color}
|
{#if user.color}
|
||||||
<Col xs={12} lg={4} class="mb-2">
|
<Col xs={12} lg={4} class="mb-2">
|
||||||
<b>Color:</b> {user.color}
|
<b>Color:</b> {user.color}
|
||||||
@ -63,4 +72,6 @@
|
|||||||
{#if user.banner && settings && settings.appearance.banner_bottom}
|
{#if user.banner && settings && settings.appearance.banner_bottom}
|
||||||
<img src={user.banner} alt="your system banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
|
<img src={user.banner} alt="your system banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
|
||||||
{/if}
|
{/if}
|
||||||
<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
|
{#if !isPublic}
|
||||||
|
<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
|
||||||
|
{/if}
|
||||||
@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
export let user: Sys;
|
export let user: Sys;
|
||||||
export let isPublic = true;
|
export let isPublic = true;
|
||||||
let loading: boolean;
|
let loading = false;
|
||||||
|
|
||||||
let editMode = false;
|
let editMode = false;
|
||||||
</script>
|
</script>
|
||||||
@ -17,7 +17,7 @@
|
|||||||
<CardsHeader bind:item={user} bind:loading/>
|
<CardsHeader bind:item={user} bind:loading/>
|
||||||
<CardBody style="border-left: 4px solid #{user.color}">
|
<CardBody style="border-left: 4px solid #{user.color}">
|
||||||
{#if !editMode}
|
{#if !editMode}
|
||||||
<Body bind:user bind:editMode/>
|
<Body bind:user bind:editMode bind:isPublic/>
|
||||||
{:else}
|
{:else}
|
||||||
<Edit bind:user bind:editMode bind:loading />
|
<Edit bind:user bind:editMode bind:loading />
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
38
src/pages/Public.svelte
Normal file
38
src/pages/Public.svelte
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Container, Row, Col, Card, CardHeader, CardTitle, CardBody, Input, Button } from 'sveltestrap';
|
||||||
|
import { Link } from 'svelte-navigator';
|
||||||
|
import FaRocket from 'svelte-icons/fa/FaRocket.svelte';
|
||||||
|
|
||||||
|
let sysInput: string = "";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Container>
|
||||||
|
<Row>
|
||||||
|
<Col class="mx-auto" xs={12} lg={10}>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle style="margin-top: 8px; outline: none;">
|
||||||
|
<div class="icon d-inline-block">
|
||||||
|
<FaRocket />
|
||||||
|
</div>Profile
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
Submit a <b>system ID</b> to view that system's profile.
|
||||||
|
<Row>
|
||||||
|
<Col xs={12} lg={9} class="my-2">
|
||||||
|
<Input bind:value={sysInput} />
|
||||||
|
</Col>
|
||||||
|
<Col xs={12} lg={3} class="my-2 d-flex">
|
||||||
|
{#if sysInput !== ""}
|
||||||
|
<Link style="text-decoration: none; flex: 1 0 auto" to="/public/s/{sysInput.trim()}"><Button class="w-100" color="primary">View</Button></Link>
|
||||||
|
{:else}
|
||||||
|
<Button class="w-100" disabled color="primary">View</Button>
|
||||||
|
{/if}
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
71
src/pages/profiles/System.svelte
Normal file
71
src/pages/profiles/System.svelte
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Container, Col, Row, TabContent, TabPane, Alert, Spinner } from 'sveltestrap';
|
||||||
|
import { useParams } from "svelte-navigator";
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
|
import System from '../../lib/system/Main.svelte';
|
||||||
|
import PKAPI from '../../api';
|
||||||
|
import Sys from '../../api/system';
|
||||||
|
|
||||||
|
let isPublic = true;
|
||||||
|
|
||||||
|
let user = new Sys({});
|
||||||
|
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||||
|
|
||||||
|
let params = useParams();
|
||||||
|
$: id = $params.id;
|
||||||
|
|
||||||
|
let err: string;
|
||||||
|
|
||||||
|
const api = new PKAPI();
|
||||||
|
|
||||||
|
let title = "system"
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
getSystem();
|
||||||
|
})
|
||||||
|
|
||||||
|
async function getSystem() {
|
||||||
|
try {
|
||||||
|
let res: Sys = await api.getSystem({id: id})
|
||||||
|
user = res;
|
||||||
|
title = user.name;
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
err = error.message;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- display the banner if there's a banner set, and if the current settings allow for it-->
|
||||||
|
{#if user && user.banner && settings && settings.appearance.banner_top}
|
||||||
|
<div class="banner" style="background-image: url({user.banner})" />
|
||||||
|
{/if}
|
||||||
|
<Container>
|
||||||
|
<Row>
|
||||||
|
<Col class="mx-auto" xs={12} lg={10}>
|
||||||
|
{#if !user.id && !err}
|
||||||
|
<div class="mx-auto text-center">
|
||||||
|
<Spinner class="d-inline-block" />
|
||||||
|
</div>
|
||||||
|
{:else if err}
|
||||||
|
<Alert color="danger">{err}</Alert>
|
||||||
|
{:else}
|
||||||
|
<Alert color="info">You are currently <b>viewing</b> a system.</Alert>
|
||||||
|
<TabContent class="mt-3">
|
||||||
|
<TabPane tabId="system" tab="System" active>
|
||||||
|
<System bind:user={user} bind:isPublic={isPublic} />
|
||||||
|
</TabPane>
|
||||||
|
<TabPane tabId="members" tab="Members">
|
||||||
|
alo
|
||||||
|
</TabPane>
|
||||||
|
</TabContent>
|
||||||
|
{/if}
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>pk-webs | {title}</title>
|
||||||
|
</svelte:head>
|
||||||
Loading…
Reference in New Issue
Block a user