admin home page
Massimo Melina committed
Feb 2, 2022 at 10:45 UTC
4d107943f50c6e2540431d2c7b104ffd61f6a961
5 files changed
+74
-4
admin/src/App.ts
+7
-1
@@ -3,6 +3,7 @@ import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
3
import MainMenu, { getMenuLabel, mainMenu } from './MainMenu';
4
import { Box, Typography } from '@mui/material'
5
import { Dialogs } from './dialog'
6
+import logo from './logo.svg'
7
8
function App() {
9
return h(BrowserRouter, {}, h(Routed))
@@ -11,7 +12,7 @@ function App() {
12
function Routed() {
13
const loc = useLocation().pathname.slice(1)
14
const current = mainMenu.find(x => x.path === loc)
14
- const title = current && getMenuLabel(current)
15
+ const title = current && (current.title || getMenuLabel(current))
16
return h(Box, { display: 'flex' },
17
h(MainMenu, { current }),
18
h(Box, {
@@ -22,6 +23,11 @@ function Routed() {
23
overflow: 'auto',
24
px: 3,
25
pb: '1em',
26
+ position: 'relative',
27
+ display: 'flex',
28
+ flexDirection: 'column',
29
+ background: 'url('+logo+') no-repeat center',
30
+ backgroundSize: 'contain',
31
}
32
},
33
title && h(Typography, { variant:'h1', mb:2 }, title),
admin/src/HomePage.ts
new
+19
@@ -0,0 +1,19 @@
1
+import { createElement as h } from 'react'
2
+import { Box, Link, Typography } from '@mui/material'
3
+import { useApi } from './api'
4
+import { spinner } from './misc'
5
+
6
+export default function HomePage() {
7
+ const [res] = useApi('get_status')
8
+ const { http, https } = res || {}
9
+ const secure = !http?.active && https?.active ? 's' : ''
10
+ const srv = secure ? https : (http?.active && http)
11
+ const href = srv && `http${secure}://localhost`+ (srv.port === (secure ? 443 : 80) ? '' : ':'+srv.port)
12
+ return h(Box, { flex: 1 },
13
+ h(Typography, { variant: 'h4' },
14
+ !res ? spinner()
15
+ : href ? h(Link, { target:'frontend', href }, "Open frontend interface")
16
+ : "Frontend switched off",
17
+ )
18
+ )
19
+}
admin/src/MainMenu.ts
+11
-2
@@ -1,15 +1,24 @@
1
import { createElement as h, FunctionComponent } from 'react';
2
import { List, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material'
3
-import { AccountTree, ManageAccounts, Monitor, Settings, SvgIconComponent } from '@mui/icons-material'
3
+import { AccountTree, ManageAccounts, Monitor, Public, Settings, SvgIconComponent } from '@mui/icons-material'
4
import _ from 'lodash'
5
import { Link } from 'react-router-dom'
6
import MonitorPage from './MonitorPage'
7
import ConfigPage from './ConfigPage';
8
import VfsPage from './VfsPage';
9
import AccountsPage from './AccountsPage';
10
+import HomePage from './HomePage'
11
+
12
+interface MenuEntry {
13
+ path: string
14
+ icon: SvgIconComponent
15
+ label?: string
16
+ title?: string
17
+ comp?: FunctionComponent
18
+}
19
11
-interface MenuEntry { path:string, icon:SvgIconComponent, label?: string, comp?: FunctionComponent }
20
export const mainMenu: MenuEntry[] = [
21
+ { path: '', icon: Public, label: 'Home', title: 'Admin interface', comp: HomePage },
22
{ path: 'monitor', icon: Monitor, comp: MonitorPage },
23
{ path: 'configuration', icon: Settings, comp: ConfigPage },
24
{ path: 'vfs', icon: AccountTree, label: 'File System', comp: VfsPage },
admin/src/VfsMenuBar.ts
+1
@@ -18,6 +18,7 @@ export default function VfsMenuBar() {
18
top: 0,
19
zIndex: 2,
20
backgroundColor: 'background.paper',
21
+ width: 'fit-content',
22
},
23
},
24
h(Button, { variant:'contained', onClick: addFiles, startIcon: h(Add) }, 'Add'),
admin/src/logo.svg
+36
-1
@@ -1 +1,36 @@
1
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
1
+<?xml version="1.0" encoding="utf-8"?>
2
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
3
+ viewBox="600.1128 -63.9298 1359.7744 1727.8596"
4
+ xml:space="preserve">
5
+<path fill="#eee" d="M1478.6342,1600H794.2668c-31.2681,0-61.2729-12.3401-83.4937-34.3386l-55.3409-54.7876
6
+ c-10.6535-10.547-3.1848-28.7069,11.8064-28.7069h938.4237c14.9912,0,22.46,18.1599,11.8064,28.7069l-55.3408,54.7876
7
+ C1539.9071,1587.6599,1509.9023,1600,1478.6342,1600z M1909.5763,971.6779c0,118.3168-95.9146,214.2313-214.2313,214.2313
8
+ c-42.2141,0-81.5713-12.2167-114.7429-33.2972c-22.2216,172.3451-170.5161,306.636-348.6561,306.636h-190.991
9
+ c-193.3439,0-351.5342-158.1904-351.5342-351.5342V734.6169c0-30.7676,25.1735-55.941,55.941-55.941
10
+ c260.7259,16.6079,521.4516,16.6079,782.1773,0c30.7676,0,55.9412,25.1734,55.9412,55.941v54.3303
11
+ c32.5607-19.9758,70.8651-31.5007,111.8647-31.5007C1813.6617,757.4466,1909.5763,853.3611,1909.5763,971.6779z M1841.4347,971.6779
12
+ c0-80.6831-65.4066-146.0897-146.0897-146.0897c-44.9027,0-85.0663,20.2646-111.8647,52.1398v187.8998
13
+ c26.7986,31.8752,66.9622,52.1399,111.8647,52.1399C1776.0281,1117.7677,1841.4347,1052.3611,1841.4347,971.6779z
14
+ M896.8262,681.0842c32.7824-36.9583,42.0452-88.8073,19.7373-133.4557c-13.4251-26.8699-43.4124-49.7689-62.5385-74.61
15
+ c-10.3291-13.4155-18.4751-27.9045-24.7048-43.6329c-15.1426-38.2313-14.8063-82.139-0.4262-120.4912
16
+ c14.9069-39.757,43.4283-71.7075,63.3171-108.7501c12.0867-23.8027,22.5521-50.0381,16.7109-77.1649
17
+ c-5.1778-24.0457-21.6179-45.691-45.924-52.3259c28.0634-2.4903,52.3093,17.7818,64.4479,41.63
18
+ c12.0606,23.6952,12.4075,50.8622,6.5517,76.391c-12.0149,52.3805-49.1666,93.8452-64.015,145.0319
19
+ c-9.4456,31.3654-3.6801,74.0537,13.4658,102.1909c21.171,34.99,53.7802,63.2926,66.8647,102.9183
20
+ C967.4988,590.8616,946.4291,655.0079,896.8262,681.0842z M1143.2327,698.5505c-37.4718-73.8414-70.7328-165.035-27.7147-244.1016
21
+ c42.5109-78.1343,133.6445-99.1075,206.1799-138.0924c5.5579-2.9871,13.2964-7.4093,17.7241-10.2784
22
+ c26.1951-17.2511,50.7698-38.9841,62.8621-68.6866c14.1571-34.7745,4.2865-72.5909-15.9369-102.7918
23
+ c-38.7089-57.8065-108.1501-81.7343-169.3666-107.6163c84.33,11.9394,177.5924,37.1522,218.8845,119.757
24
+ c19.1034,38.2165,20.6382,82.0616,2.0444,120.6586c-21.5038,44.6379-62.2134,75.4657-105.6632,97.0693
25
+ c-62.1791,30.9159-143.725,48.166-184.6294,109.6153C1103.8401,539.8483,1127.8052,626.6727,1143.2327,698.5505z
26
+ M1410.5446,686.5724c-77.7285-15.9285-141.0281-70.6832-170.9728-143.7089c-17.8607-43.5565-23.2424-94.1666-13.9791-140.4038
27
+ c2.1704-10.8336,4.8333-21.4559,7.8079-32.1025c2.9481-10.5518,5.9951-21.1213,7.7559-31.9518
28
+ c0.6917-4.2544,1.1133-8.5169,1.256-12.8226c0.0178-0.5356,0.0425-3.0043,0.0786-0.6495
29
+ c-2.1901-62.2747-58.6361-100.388-105.3842-131.8593c-35.6764-24.0178-72.4011-49.234-95.6129-86.377
30
+ C1021.942,74.8945,1011.6467,35.4493,1027.4336,0c-6.6786,50.7347,26.5356,94.6975,66.1123,122.4763
31
+ c35.7867,25.1187,76.5862,42.0187,112.6448,66.7405c35.2303,27.2483,65.7295,56.7561,79.126,100.6408
32
+ c8.9813,29.4209,3.449,59.5687-5.149,88.3732c-9.6432,32.306-16.4109,64.2976-14.2983,98.332
33
+ c1.8408,29.6565,8.7494,63.0021,22.7195,88.9159C1315.7206,619.0093,1357.5674,658.824,1410.5446,686.5724z"/>
34
+</svg>
35
+
36
+<!-- Public domain. Taken from https://freesvg.org/coffee-cup-1628803604 -->