mirror of
https://github.com/notherealmarco/WASAPhoto.git
synced 2025-05-06 12:49:37 +02:00
Add decaf webui
This commit is contained in:
parent
6b4c9bb531
commit
69c0388954
742 changed files with 608981 additions and 6 deletions
67
webui/src/App.vue
Normal file
67
webui/src/App.vue
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<script setup>
|
||||
import { RouterLink, RouterView } from 'vue-router'
|
||||
</script>
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
|
||||
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#/">Example App</a>
|
||||
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
|
||||
<div class="position-sticky pt-3 sidebar-sticky">
|
||||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
|
||||
<span>General</span>
|
||||
</h6>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<RouterLink to="/" class="nav-link">
|
||||
<svg class="feather"><use href="/feather-sprite-v4.29.0.svg#home"/></svg>
|
||||
Home
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<RouterLink to="/link1" class="nav-link">
|
||||
<svg class="feather"><use href="/feather-sprite-v4.29.0.svg#layout"/></svg>
|
||||
Menu item 1
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<RouterLink to="/link2" class="nav-link">
|
||||
<svg class="feather"><use href="/feather-sprite-v4.29.0.svg#key"/></svg>
|
||||
Menu item 2
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
|
||||
<span>Secondary menu</span>
|
||||
</h6>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<RouterLink :to="'/some/' + 'variable_here' + '/path'" class="nav-link">
|
||||
<svg class="feather"><use href="/feather-sprite-v4.29.0.svg#file-text"/></svg>
|
||||
Item 1
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
|
||||
<RouterView />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
95
webui/src/assets/dashboard.css
Normal file
95
webui/src/assets/dashboard.css
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
body {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.feather {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
*/
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
/* rtl:raw:
|
||||
right: 0;
|
||||
*/
|
||||
bottom: 0;
|
||||
|
||||
/* rtl:remove */
|
||||
|
||||
left: 0;
|
||||
z-index: 100; /* Behind the navbar */
|
||||
padding: 48px 0 0; /* Height of navbar */
|
||||
box-shadow: inset -1px 0 0 rgba(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.sidebar {
|
||||
top: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-sticky {
|
||||
height: calc(100vh - 48px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||
}
|
||||
|
||||
.sidebar .nav-link {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.sidebar .nav-link .feather {
|
||||
margin-right: 4px;
|
||||
color: #727272;
|
||||
}
|
||||
|
||||
.sidebar .nav-link.active, .sidebar .router-link-active {
|
||||
color: #2470dc;
|
||||
}
|
||||
|
||||
.sidebar .nav-link:hover .feather,
|
||||
.sidebar .nav-link.active .feather {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Navbar
|
||||
*/
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
background-color: rgba(0 0 0 / 25%);
|
||||
box-shadow: inset -1px 0 0 rgba(0 0 0 / 25%);
|
||||
}
|
||||
|
||||
.navbar .navbar-toggler {
|
||||
top: 0.25rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.navbar .form-control {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.form-control-dark {
|
||||
color: #fff;
|
||||
background-color: rgba(255 255 255 / 10%);
|
||||
border-color: rgba(255 255 255 / 10%);
|
||||
}
|
||||
|
||||
.form-control-dark:focus {
|
||||
border-color: transparent;
|
||||
box-shadow: 0 0 0 3px rgba(255 255 255 / 25%);
|
||||
}
|
||||
60
webui/src/assets/main.css
Normal file
60
webui/src/assets/main.css
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.b-example-divider {
|
||||
height: 3rem;
|
||||
background-color: rgba(0 0 0 / 10%);
|
||||
border: solid rgba(0 0 0 / 15%);
|
||||
border-width: 1px 0;
|
||||
box-shadow: inset 0 0.5em 1.5em rgba(0 0 0 / 10%), inset 0 0.125em 0.5em rgba(0 0 0 / 15%);
|
||||
}
|
||||
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.feather {
|
||||
/* width: 24px;
|
||||
height: 24px;*/
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
14
webui/src/components/ErrorMsg.vue
Normal file
14
webui/src/components/ErrorMsg.vue
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<script>
|
||||
export default {
|
||||
props: ['msg']
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
{{ msg }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
18
webui/src/components/LoadingSpinner.vue
Normal file
18
webui/src/components/LoadingSpinner.vue
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<script>
|
||||
export default {
|
||||
props: ["loading"]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="loading">
|
||||
<div style="text-align: center">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!loading"><slot /></div>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
16
webui/src/main.js
Normal file
16
webui/src/main.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import {createApp, reactive} from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import axios from './services/axios.js';
|
||||
import ErrorMsg from './components/ErrorMsg.vue'
|
||||
import LoadingSpinner from './components/LoadingSpinner.vue'
|
||||
|
||||
import './assets/dashboard.css'
|
||||
import './assets/main.css'
|
||||
|
||||
const app = createApp(App)
|
||||
app.config.globalProperties.$axios = axios;
|
||||
app.component("ErrorMsg", ErrorMsg);
|
||||
app.component("LoadingSpinner", LoadingSpinner);
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
14
webui/src/router/index.js
Normal file
14
webui/src/router/index.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import {createRouter, createWebHashHistory} from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{path: '/', component: HomeView},
|
||||
{path: '/link1', component: HomeView},
|
||||
{path: '/link2', component: HomeView},
|
||||
{path: '/some/:id/link', component: HomeView},
|
||||
]
|
||||
})
|
||||
|
||||
export default router
|
||||
8
webui/src/services/axios.js
Normal file
8
webui/src/services/axios.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import axios from "axios";
|
||||
|
||||
const instance = axios.create({
|
||||
baseURL: __API_URL__,
|
||||
timeout: 1000 * 5
|
||||
});
|
||||
|
||||
export default instance;
|
||||
56
webui/src/views/HomeView.vue
Normal file
56
webui/src/views/HomeView.vue
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<script>
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
errormsg: null,
|
||||
loading: false,
|
||||
some_data: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async refresh() {
|
||||
this.loading = true;
|
||||
this.errormsg = null;
|
||||
try {
|
||||
let response = await this.$axios.get("/");
|
||||
this.some_data = response.data;
|
||||
} catch (e) {
|
||||
this.errormsg = e.toString();
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.refresh()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
||||
<h1 class="h2">Home page</h1>
|
||||
<div class="btn-toolbar mb-2 mb-md-0">
|
||||
<div class="btn-group me-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" @click="refresh">
|
||||
Refresh
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" @click="exportList">
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group me-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-primary" @click="newItem">
|
||||
New
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ErrorMsg v-if="errormsg" :msg="errormsg"></ErrorMsg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue