janishutz/libreevent
1
0
Fork 0
mirror of https://github.com/janishutz/libreevent.git synced 2025-11-25 13:24:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

move to vue spa

Browse Source
This commit is contained in:
Janis Hutz
2023-04-07 16:22:36 +02:00
parent 9e76e0b4b5
commit 5eccbb336a
50 changed files with 18303 additions and 805 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/server/admin/ui/2fa.html
View File

0
src/server/admin/ui/auth.html
View File

101
src/server/admin/ui/css/loginstyle.css
View File

@@ -1,101 +0,0 @@
: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;
}
.login-app {
border-radius: 50px;
margin-top: 2%;
background-color: var(--secondary-background);
color: var(--primary-color);
width: 60%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.form {
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 4%;
margin-bottom: 4%;
}
.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;
}
.top-bar {
width: 100%;
display: flex;
align-items: end;
justify-content: end;
}
.selector {
background-color: lightblue;
border-radius: 20px;
padding: 0.5%;
border-style: solid;
border-color: blue;
}

24
src/server/admin/ui/css/setupstyle.css
View File

@@ -1,24 +0,0 @@
.setup-app {
border-radius: 50px;
margin-top: 2%;
background-color: var(--secondary-background);
color: var(--primary-color);
height: 85vh;
width: 90%;
}
.setup-page {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.explanation {
padding-left: 5%;
padding-right: 5%;
text-align: center;
font-style: italic;
}

72
src/server/admin/ui/css/style.css
View File

@@ -1,72 +0,0 @@
: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;
}

35
src/server/admin/ui/js/index.js
View File

@@ -1,35 +0,0 @@
/* 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' );
} );
} );

32
src/server/admin/ui/js/loginLangPack.js
View File

@@ -1,32 +0,0 @@
let themeSelector2 = document.getElementById( 'theme' );
let languageSelector = document.getElementById( 'lang' );
let mailLabel = document.getElementById( 'mailLabel' );
let pwdLabel = document.getElementById( 'pwdLabel' );
let login = document.getElementById( 'login' );
languageSelector.value = sessionStorage.getItem( 'lang' );
function langUpdate () {
if ( sessionStorage.getItem( 'lang' ) === 'de' ) {
themeSelector2.options[0].innerHTML = 'Automatisch';
themeSelector2.options[1].innerHTML = 'Hellmodus';
themeSelector2.options[2].innerHTML = 'Dunkelmodus';
mailLabel.innerHTML = 'Email - Adresse';
pwdLabel.innerHTML = 'Passwort';
login.value = 'Anmelden';
} else {
themeSelector2.options[0].innerHTML = 'System theme';
themeSelector2.options[1].innerHTML = 'Light';
themeSelector2.options[2].innerHTML = 'Dark';
mailLabel.innerHTML = 'Email address';
pwdLabel.innerHTML = 'Password';
login.value = 'Log in';
}
}
function changeLang () {
sessionStorage.setItem( 'lang', languageSelector.value );
langUpdate();
}
langUpdate();

77
src/server/admin/ui/login.html
View File

@@ -1,77 +0,0 @@
<!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">
<title>Login :: myevent - admin panel</title>
<link rel="stylesheet" href="/admin/css/loginstyle.css">
<script defer src="/admin/loginLangPack"></script>
</head>
<body>
<div class="content">
<div class="top-bar">
<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>
<a href="https://myevent.janishutz.com"><img src="/assets/logo.png" alt="myevent-logo" style="height: 35vh;"></a>
<div class="login-app">
<h1>Login</h1>
<footer>myevent - admin panel</footer>
<form action="/admin/auth" method="post" class="form">
<label for="mail" id="mailLabel">Email address</label><br>
<input type="email" id="mail" name="mail" required class="input"><br>
<label for="pwd" id="pwdLabel">Password</label><br>
<input type="password" id="pwd" name="pwd" required class="input"><br>
<input type="submit" value="Log in" class="button" id="login">
</form>
</div>
</div>
<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>

77
src/server/admin/ui/panel.html
View File

@@ -1,77 +0,0 @@
<!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>

0
src/server/admin/ui/panel/accounts.html
View File

0
src/server/admin/ui/panel/entrycontrol.html
View File

0
src/server/admin/ui/panel/events.html
View File

0
src/server/admin/ui/panel/financial.html
View File

3
src/server/admin/ui/panel/home.html
View File

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

0
src/server/admin/ui/panel/landingpage.html
View File

0
src/server/admin/ui/panel/otherpages.html
View File

0
src/server/admin/ui/panel/pages.html
View File

0
src/server/admin/ui/panel/printtickets.html
View File

0
src/server/admin/ui/panel/settings.html
View File

0
src/server/admin/ui/panel/tos.html
View File

152
src/server/admin/ui/setup.html
View File

@@ -1,152 +0,0 @@
<!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">
<title>Setup :: myevent - admin panel</title>
<link rel="stylesheet" href="/admin/css/loginstyle.css">
<link rel="stylesheet" href="/admin/css/setupstyle.css">
</head>
<body>
<div class="content">
<div class="top-bar">
<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 class="setup-app">
<!-- TODO: In docs note that user has to set up the mail account via config file. -->
<!-- Root account setup -->
<div class="setup-page" id="1">
<h1>Setup</h1>
<p class="explanation">Now, let's create an admin account! Please choose a secure password, as this user has the highest amounts of privileges.</p>
<form class="form" style="margin-bottom: 0;">
<label for="mail">Email address *</label><br>
<input type="email" id="mail" name="mail" required class="input"><br>
<label for="pwd1">Password *</label><br>
<input type="password" id="pwd1" name="pwd1" required class="input"><br>
<label for="pwd2">Repeat password *</label><br>
<input type="password" id="pwd2" name="pwd2" required class="input"><br>
</form>
<button class="button" style="margin-bottom: 3%;">Continue</button>
</div>
<!-- Company name & offered language(s) & choice if homepage or not -->
<div class="setup-page" id="2">
<h1>Setup</h1>
<p class="explanation">Next off, we need to know your organisation's name, the language(s) you want to offer and you need to select if a simple homepage should be generated from templates for you. You may choose the template in the next step.</p>
<form class="form" style="margin-bottom: 0;">
<label for="name">Organisation name *</label><br>
<input type="text" id="name" name="name" required class="input"><br>
<p>Languages * (one required, if none selected, uses English only)</p>
<div style="margin-bottom: 1%;">
<label for="lang-en">English</label>
<input type="checkbox" id="lang-en" name="lang-en">
</div>
<div style="margin-bottom: 3%;">
<label for="lang-de">German</label>
<input type="checkbox" id="lang-de" name="lang-de">
</div>
<div style="margin-bottom: 3%;">
<label for="homepage">Homepage?</label>
<input type="checkbox" id="homepage" name="homepage">
</div>
</form>
<button class="button" style="margin-bottom: 3%;">Continue</button>
</div>
<!-- Setup of homepage (if activated previously) -->
<div class="setup-page" id="3">
<h1>Setup</h1>
<p class="explanation">Since you have activated the homepage on the previous step, let's set it up now. Please choose from a template which you can find <a href="https://myevent.janishutz.com/docs/homepage/templates">here</a></p>
<form class="form" style="margin-bottom: 0;">
<label for="template">Choose homepage template</label><br>
<select name="template" id="template" style="margin-bottom: 3%;">
<option value="1">Template 1</option>
<option value="2">Template 2</option>
<option value="3">Template 3</option>
<option value="4">Template 4</option>
</select>
<label for="pwd1">Promotional text *</label><br>
<textarea name="" id="" rows="10" class="input" minlength="100" placeholder="Your promotional text"></textarea>
</form>
<button class="button" style="margin-bottom: 1.5%; margin-top: 2%;">Preview</button>
<button class="button" style="margin-bottom: 3%;">Continue</button>
</div>
<!-- Payment options (one required) -->
<div class="setup-page" id="3">
<h1>Setup</h1>
<p class="explanation">Now, please choose a payment option. When entering the admin panel for the first time after completing the setup, you'll be prompted to enter tokens which you can find in the payment provider's dashboard. You there may also add more payment options that are provided by plugins. Please refer to the <a href="https://myevent.janishutz.com/docs/payments">docs</a> to see advantages and disadvantages of each payment provider.</p>
<form class="form" style="margin-bottom: 0;">
<label for="name">Organisation name *</label><br>
<input type="text" id="name" name="name" required class="input"><br>
<p>Languages * (one required, if none selected, uses English only)</p>
<div style="margin-bottom: 1%;">
<label for="lang-en">English</label>
<input type="checkbox" id="lang-en" name="lang-en">
</div>
<div style="margin-bottom: 3%;">
<label for="lang-de">German</label>
<input type="checkbox" id="lang-de" name="lang-de">
</div>
<div style="margin-bottom: 3%;">
<label for="homepage">Homepage?</label>
<input type="checkbox" id="homepage" name="homepage">
</div>
</form>
<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>
<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>

36
src/server/admin/ui/welcome.html
View File

@@ -1,36 +0,0 @@
<!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">
<title>Welcome :: myevent - admin panel</title>
<link rel="stylesheet" href="/admin/css/loginstyle.css">
<style>
.myevent-logo-welcome {
height: 50vh;
}
</style>
</head>
<body>
<div class="content">
<h1>Welcome to myevent!</h1>
<a href="https://myevent.janishutz.com"><img src="/assets/logo.png" alt="myevent-logo" class="myevent-logo-welcome"></a>
<p>myevent, the new way to sell your tickets online!</p>
<p>Let's get started setting up your event!</p>
<p id="warranty">Note: As a project licensed under the GNU General Public License Version 3.0-or-later (GPL 3.0+), this software comes with ABSOLUTELY NO WARRANTY TO THE EXTENT PERMITTED BY APPLICABLE LAW</p>
<p>It is strongly advised to read through our <a href="https://myevent.janishutz.com/docs/setup/">setup guide</a> whilst doing the setup, as it contains vital information and shows you additional options which you can configure in the configuration file.</p>
<a href="/admin/setup">Getting Started!</a>
</div>
<!--Script for dark mode-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || sessionStorage.getItem( 'theme' ) === 'dark' ) {
document.documentElement.classList.add( 'dark' );
} else {
document.documentElement.classList.add( 'light' );
};
</script>
</body>
</html>

BIN
src/server/ui/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 33 KiB

54
src/server/ui/css/errorstyle.css
View File

@@ -1,54 +0,0 @@
/*
* myevent - errorstyle.css
*
* Created by Janis Hutz 03/11/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
*/
html {
height: 98%;
}
body {
background-color: lightgray;
font-family: monospace;
height: 100%;
}
.content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
width: 100%;
}
.code {
font-size: 20vw;
margin: 0;
padding: 0;
}
.message {
font-size: 1.5vw;
}
.button {
text-decoration: none;
background-color: gray;
font-style: italic;
font-size: 1vw;
color: white;
padding: 20px;
border-radius: 30px;
transition: 1s;
}
.button:hover {
transition: ease-in-out 0.2s;
background-color: black;
border-radius: 5px;
}

0
src/server/ui/css/style.css
View File

0
src/server/ui/html/de/index.html
View File

17
src/server/ui/html/en/errorResponses/403.html
View File

@@ -1,17 +0,0 @@
<!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">
<title>403 - Forbidden</title>
<link rel="stylesheet" href="/css/errorstyle.css">
</head>
<body>
<div class="content">
<h1 class="code">403</h1>
<h2 class="message">You are currently not allowed to visit this page!</h2>
<a href="/" class="button">Back to the homepage</a>
</div>
</body>
</html>

17
src/server/ui/html/en/errorResponses/404.html
View File

@@ -1,17 +0,0 @@
<!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">
<title>404 - Not found</title>
<link rel="stylesheet" href="/css/errorstyle.css">
</head>
<body>
<div class="content">
<h1 class="code">404</h1>
<h2 class="message">The page you are looking for was not found on the server!</h2>
<a href="/" class="button">Back to the homepage</a>
</div>
</body>
</html>

17
src/server/ui/html/en/errorResponses/500.html
View File

@@ -1,17 +0,0 @@
<!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">
<title>500 - Internal Server Error</title>
<link rel="stylesheet" href="/css/errorstyle.css">
</head>
<body>
<div class="content">
<h1 class="code">500</h1>
<h2 class="message">The server encountered a problem whilst processing your request!</h2>
<a href="/" class="button">Back to the homepage</a>
</div>
</body>
</html>

0
src/server/ui/html/en/index.html
View File

91
src/server/ui/html/index.html
View File

@@ -1,91 +0,0 @@
<!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">
<title>myevent</title>
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- We are using inline styling to simplify the removal of this page -->
<style>
body {
background-color: rgb(202, 223, 255);
font-family: sans-serif;
}
.content, .lang {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.logo {
margin: 2%;
height: 50vh;
}
.lang {
display: none;
background-color: white;
padding: 2%;
margin: 3%;
margin-bottom: 0;
border-radius: 50px;
width: 40%;
}
.button {
cursor: pointer;
text-decoration: none;
color: white;
background-color: blue;
padding: 30px;
border-radius: 30px;
transition: 1s;
}
.button:hover {
transition: ease-in-out 0.2s;
background-color: darkblue;
border-radius: 5px;
}
.presented {
display: flex;
}
</style>
</head>
<body>
<div class="content">
<img src="/assets/logo.png" alt="myevent-logo" class="logo">
<div class="lang presented" id="en">
<h1>Welcome to myevent!</h1>
<!-- <p>Thank you for installing and using myevent! Let's get started by setting it up! First plan of action is to log in to the admin panel where you can replace this page here with your own landing page!</p> -->
<a href="/admin/login" class="button" onclick="sessionStorage.setItem( 'lang', 'en' )">To the admin panel</a>
</div>
<div class="lang" id="de">
<h1>Willkommen zu myevent!</h1>
<!-- <p>Vielen Dank für die Installation und Nutzung von myevent! Beginnen wir mit dem Aufsetzen! Der erste Schritt ist, sich ins Admin-Panel einzuloggen um die Seite hier mit deiner eigenen Seite zu ersetzen!</p> -->
<a href="/admin/login" class="button" onclick="sessionStorage.setItem( 'lang', 'de' )">Zum Admin-Panel</a>
</div>
</div>
<script>
let lang = [ 'en', 'de' ];
let pos = 0;
function switchPresented () {
console.log( 'updating' );
$( `#${ lang[ pos ] }` ).removeClass( 'presented' );
if ( pos + 2 > lang.length ) {
pos = 0;
} else {
pos += 1;
}
$( `#${ lang[ pos ] }` ).addClass( 'presented' );
}
setInterval( switchPresented, 5000 );
</script>
</body>
</html>

0
src/server/ui/js/index.js
View File

4
src/webapp/myevent/.browserslistrc Normal file
View File

@@ -0,0 +1,4 @@
> 1%
last 2 versions
not dead
not ie 11

23
src/webapp/myevent/.gitignore vendored Normal file
View File

@@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

19
src/webapp/myevent/README.md Normal file
View File

@@ -0,0 +1,19 @@
# myevent
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

5
src/webapp/myevent/babel.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

18020
src/webapp/myevent/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

21
src/webapp/myevent/package.json Normal file
View File

@@ -0,0 +1,21 @@
{
"name": "myevent",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.0.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-typescript": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"typescript": "~4.5.5"
}
}

BIN
src/webapp/myevent/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
src/webapp/myevent/public/index.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<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="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

30
src/webapp/myevent/src/App.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>

BIN
src/webapp/myevent/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

61
src/webapp/myevent/src/components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'HelloWorld',
props: {
msg: String,
},
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

5
src/webapp/myevent/src/main.ts Normal file
View File

@@ -0,0 +1,5 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

25
src/webapp/myevent/src/router/index.ts Normal file
View File

@@ -0,0 +1,25 @@
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router

6
src/webapp/myevent/src/shims-vue.d.ts vendored Normal file
View File

@@ -0,0 +1,6 @@
/* eslint-disable */
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}

5
src/webapp/myevent/src/views/AboutView.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

18
src/webapp/myevent/src/views/HomeView.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
export default defineComponent({
name: 'HomeView',
components: {
HelloWorld,
},
});
</script>

40
src/webapp/myevent/tsconfig.json Normal file
View File

@@ -0,0 +1,40 @@
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"useDefineForClassFields": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}

4
src/webapp/myevent/vue.config.js Normal file
View File

@@ -0,0 +1,4 @@
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})