possibly final commit to this branch

This commit is contained in:
2023-04-07 16:18:21 +02:00
parent 8728e9b9c5
commit 9e76e0b4b5
22 changed files with 249 additions and 7 deletions

View File

@@ -9,7 +9,7 @@
const path = require( 'path' );
const pwdmanager = require( './pwdmanager.js' );
const fs = require( 'fs' );
module.exports = ( app, settings ) => {
/*
@@ -27,6 +27,12 @@ module.exports = ( app, settings ) => {
response.sendFile( path.join( __dirname + '/ui/js/loginLangPack.js' ) );
} );
app.get( '/admin/js/:file', ( request, response ) => {
if ( request.session.loggedIn ) {
response.sendFile( path.join( __dirname + '/ui/js/' + request.params.file ) );
}
} );
app.get( '/admin/css/:file', ( request, response ) => {
response.sendFile( path.join( __dirname + '/ui/css/' + request.params.file ) );
} );
@@ -72,6 +78,17 @@ module.exports = ( app, settings ) => {
}
} );
/*
Send admin panel modules to UI as UI uses Vue.js Router
*/
app.get( '/admin/panel/modules', ( request, response ) => {
let panelModules = { 'home': fs.readFileSync( path.join( __dirname + '/ui/panel/home.html' ) ).toString() };
if ( request.session.loggedIn ) {
response.send( panelModules );
}
} );
app.get( '/admin/setup', ( request, response ) => {
if ( request.session.loggedIn ) {
response.sendFile( path.join( __dirname + '/ui/setup.html' ) );

View File

@@ -0,0 +1,72 @@
:root, :root.light {
--background-color: rgb(202, 223, 255);
--secondary-background: white;
--primary-color: black;
--primary-inverse: white;
--secondary-color: blue;
--secondary-hover: darkblue;
}
:root.dark {
--background-color: rgb(42, 44, 56);
--secondary-background: rgb(19, 20, 32);
--primary-color: white;
--primary-inverse: black;
--secondary-color: rgb(94, 94, 226);
--secondary-hover: rgb(155, 155, 255);
}
@media ( prefers-color-scheme: dark ) {
:root {
--background-color: rgb(42, 44, 56);
--secondary-background: rgb(19, 20, 32);
--primary-color: white;
--secondary-color: rgb(94, 94, 226);
--secondary-hover: rgb(155, 155, 255);
}
}
body {
background-color: var(--background-color);
font-family: sans-serif;
font-size: calc(12pt + 0.35vw);
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.button {
text-decoration: none;
color: white;
background-color: var(--secondary-color);
padding: 15px;
border-radius: 30px;
transition: 1s;
cursor: pointer;
}
.button:hover {
transition: ease-in-out 0.2s;
color: var(--primary-inverse);
background-color: var(--secondary-hover);
border-radius: 5px;
}
.input {
padding: 1%;
width: 80%;
margin-bottom: 3%;
border-radius: 10px;
}
.selector {
background-color: lightblue;
border-radius: 20px;
padding: 0.5%;
border-style: solid;
border-color: blue;
}

View File

@@ -0,0 +1,35 @@
/* eslint-disable no-undef */
fetch( '/admin/panel/modules' ).then( res => {
res.json().then( data => {
const Home = { template: data[ 'home' ] };
const About = { template: '<div>About</div>' };
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = VueRouter.createRouter( {
history: VueRouter.createWebHashHistory(),
routes,
} );
const app = Vue.createApp( {
data() {
return {
};
},
watch: {
$route ( to, from ) {
console.log( 'changing route' );
}
},
} );
app.use( router );
app.mount( '#app' );
} );
} );

View File

@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/admin/css/style.css">
<title>Admin panel :: myevent</title>
</head>
<body>
<div id="top">
<select name="lang" id="lang" class="selector" onchange="changeLang();">
<option value="en">English</option>
<option value="de">Deutsch</option>
</select>
<select name="theme" id="theme" class="selector" onchange="toggleTheme();">
<option value="system">System theme</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
<div id="content">
<router-view></router-view>
</div>
</div>
<!-- Load vue.js and app -->
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<script src="/admin/js/index.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
let themeSelector = document.getElementById( 'theme' );
if ( sessionStorage.getItem( 'theme' ) ) {
themeSelector.value = sessionStorage.getItem( 'theme' );
}
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || themeSelector.value === 'dark' ) {
document.documentElement.classList.add( 'dark' );
} else {
document.documentElement.classList.add( 'light' );
};
setTimeout( activate, 500 );
function activate () {
$( 'body' ).css( 'transition', '0.5s' );
}
function toggleTheme () {
sessionStorage.setItem( 'theme', themeSelector.value );
if ( themeSelector.value === 'dark' ) {
document.documentElement.classList.remove( 'light' );
document.documentElement.classList.add( 'dark' );
} else if ( themeSelector.value === 'light' ) {
document.documentElement.classList.remove( 'dark' );
document.documentElement.classList.add( 'light' );
} else if ( themeSelector.value === 'system' ) {
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
document.documentElement.classList.remove( 'light' );
document.documentElement.classList.add( 'dark' );
} else {
document.documentElement.classList.remove( 'dark' );
document.documentElement.classList.add( 'light' );
}
}
}
</script>
</body>
</html>

View File

View File

View File

View File

@@ -0,0 +1,3 @@
<div>
Hello World!
</div>

View File

View File

View File

View File

@@ -107,7 +107,6 @@
<button class="button" style="margin-bottom: 1.5%; margin-top: 2%;">Preview</button>
<button class="button" style="margin-bottom: 3%;">Continue</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

View File

@@ -16,12 +16,13 @@ const bodyParser = require( 'body-parser' );
const cookieParser = require( 'cookie-parser' );
const favicon = require( 'serve-favicon' );
const http = require( 'http' );
const serveStatic = require( 'serve-static' );
// const env = process.env.PROD || false;
const root = process.env.ROOT || '/order';
const settings = fs.readFileSync( path.join( __dirname + '/config.json' ) );
const settings = JSON.parse( fs.readFileSync( path.join( __dirname + '/config.json' ) ) );
// initialise express with middlewares
@@ -35,6 +36,7 @@ app.use( bodyParser.urlencoded( { extended: false } ) );
app.use( bodyParser.json() );
app.use( cookieParser() );
app.use( favicon( path.join( __dirname + '/ui/assets/logo.png' ) ) );
app.use( serveStatic( __dirname + '/admin/ui/modules' ) );
require( './admin/routes.js' )( app, settings ); // admin route

View File

@@ -1,3 +1,3 @@
{
"init":false
"init":true
}

View File

@@ -14,7 +14,8 @@
"cookie-parser": "^1.4.6",
"express": "^4.18.2",
"express-session": "^1.17.3",
"serve-favicon": "^2.5.0"
"serve-favicon": "^2.5.0",
"serve-static": "^1.15.0"
},
"devDependencies": {
"acorn": "^8.8.2",

View File

@@ -46,7 +46,8 @@
"cookie-parser": "^1.4.6",
"express": "^4.18.2",
"express-session": "^1.17.3",
"serve-favicon": "^2.5.0"
"serve-favicon": "^2.5.0",
"serve-static": "^1.15.0"
},
"scripts": {
"test": "test.js"