ln.vue/demo.html

239 lines
8.0 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>ln.vue Demo Application</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/ln.vue.css"/>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
<script type="text/javascript" src="js/ln.vue.js"></script>
<script type="text/javascript" src="js/ln.vue.components.js"></script>
<script type="text/javascript" src="js/ln.vue.table.js"></script>
<script type="text/javascript" src="js/ln.vue.webauthn.js"></script>
<script type="text/javascript" src="js/ln.identities.js"></script>
<style>
table#controls > tbody > tr > td:nth-child(3) {
padding-left: 24px;
}
div#frame {
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<div id="frame" class="ln-view">
<section id="header">
<div class="flex">
<div class="h1">ln.vue Demo Application</div>
<ln-identity></ln-identity>
</div>
<ln-navbar></ln-navbar>
</section>
<section id="body">
<div v-if="false">
<h2>Please wait for application to be loaded...</h2>
</div>
<div id="viewPane" class="ln-viewpane">
<router-view></router-view>
</div>
</section>
<section id="footer">
<ln-statusbar></ln-statusbar>
</section>
</div>
<script type="text/javascript">
let core = {
navigation: {
core: {
label: "HOME",
path: '/',
},
},
routes: {
'/': {
template: `<div>This is the ln.vue demo application. Feel free to test all the features, you can find.<br>Here should be a message:<br><i>{{ message.value }}</i></div>`,
},
}
};
let controls = {
navigation: {
controls: {
label: "Controls",
navigation: {
simple: {
label: "Simple Form Controls",
path: '/controls',
},
table: {
label: "Table Contol",
path: '/table',
}
},
},
},
routes: {
'/controls': {
url: '/controls.html',
},
'/table': {
url: '/table.html',
},
}
};
let message = { value: "" };
app = new LNVue("#frame",{
data: {
message: message,
columns: {
FirstName: {
label: 'Vorname',
editor: 'ln-textfield',
},
MiddleNames: {
label: 'weitere Vornamen',
editor: 'ln-textfield',
},
LastName: {
label: 'Nachname',
editor: 'ln-textfield',
},
},
slideItems: [
'Enkelkinder',
'Kinder',
'Ich',
'Eltern',
'Grosseltern',
],
controls: {
textfield: "Textfeld",
textarea: "Even multi-\nline text is possible!",
files: [],
slide1000: 50,
items: {
hwo: "Harald Wolff-Thobaben",
uth: "Ute Thobaben",
jwo: "Justus Jan Nico Wolff",
nth: "Niclas Thobaben",
pbr: "Peter Brommer",
hbr: "Hilde Brommer",
},
itemsArray: [
"Harald Wolff-Thobaben",
"Ute Thobaben",
"Niclas Thobaben",
],
selectedItem: 'hwo',
selectedNumericalItem: 1,
integer: 1234,
float: 1234.5678,
rows: [
{
FirstName: 'Harald',
MiddleNames: 'Christian Joachim',
LastName: 'Wolff-Thobaben',
},
{
FirstName: 'Ute',
MiddleNames: '',
LastName: 'Thobaben',
},
{
FirstName: 'Pascal',
MiddleNames: 'Gerome',
LastName: 'Thobaben',
},
{
FirstName: 'Niclas',
MiddleNames: '',
LastName: 'Thobaben',
},
],
},
table: {
currentrow: null,
}
}
});
app.addModule(core);
app.addModule(controls);
app.addModule({
navigation: {
state: {
label: "State",
path: '/state',
},
},
routes: {
'/state': `<div>Current User Input object:<br><br>
<span class="json">{{ JSON.stringify(controls,null,4) }}</span>
</div>`,
}
});
app.addModule({
navigation: {
protocols: {
label: 'Protocols',
navigation: {
webauthn: {
label: 'webauthn',
path: '/protocols/webauthn',
}
}
}
},
routes: {
'/protocols/webauthn': {
url: '/webauthn.html',
}
},
});
app.addModule({
navigation: {
login: {
label: "Login Pane",
path: "/login",
}
},
routes: {
'/login': `<div>Login Pane<br><ln-login-pane style="border: 1px solid black;"></ln-login-pane></div>`,
}
});
app.Start();
LN.$idle(()=>{
message.value = "idle time reached. Message written.";
setTimeout(()=>{
message.value = "fired from the idle job: new message after 1000ms.";
},1000);
});
for (let n=5;n<15;n++){
new LN.Promise((resolve,reject)=>{
setTimeout(()=>{
resolve();
},n * 1000);
},n + " sec promise test");
}
</script>
</body>
</html>