2019-10-15 23:46:02 +02:00
<!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 >
2019-10-16 22:00:03 +02:00
< script type = "text/javascript" src = "js/ln.vue.js" > < / script >
2019-10-15 23:46:02 +02:00
< script type = "text/javascript" src = "js/ln.vue.components.js" > < / script >
< script type = "text/javascript" src = "js/ln.vue.table.js" > < / script >
2019-11-04 09:57:00 +01:00
< script type = "text/javascript" src = "js/ln.vue.webauthn.js" > < / script >
2019-10-15 23:46:02 +02:00
< style >
table#controls > tbody > tr > td:nth-child(3) {
padding-left: 24px;
}
2019-11-15 13:44:44 +01:00
div#frame {
display: flex;
flex-direction: column;
}
2019-10-15 23:46:02 +02:00
< / style >
< / head >
< body >
2019-11-15 13:44:44 +01:00
< div id = "frame" class = "ln-view" >
< section id = "header" >
< h1 > ln.vue Demo Application< / h1 >
< 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 >
2019-10-15 23:46:02 +02:00
< / div >
< script type = "text/javascript" >
2019-10-16 22:00:03 +02:00
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',
},
}
};
2019-10-16 12:15:31 +02:00
let message = { value: "" };
2019-10-15 23:46:02 +02:00
app = new LNVue("#frame",{
data: {
2019-10-16 12:15:31 +02:00
message: message,
2019-10-15 23:46:02 +02:00
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,
}
}
});
2019-10-16 12:15:31 +02:00
2019-10-16 22:00:03 +02:00
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 > `,
}
});
2019-11-04 09:57:00 +01:00
app.addModule({
navigation: {
protocols: {
label: 'Protocols',
navigation: {
webauthn: {
label: 'webauthn',
path: '/protocols/webauthn',
}
}
}
},
routes: {
'/protocols/webauthn': {
url: '/webauthn.html',
}
},
});
2019-11-15 13:44:44 +01:00
app.addModule({
navigation: {
login: {
label: "Login Pane",
path: "/login",
}
},
routes: {
'/login': `< div > Login Pane< br > < ln-login-pane > < / ln-login-pane > < / div > `,
}
});
2019-10-16 22:00:03 +02:00
app.Start();
2019-10-16 12:15:31 +02:00
LNVue.onidle(()=>{
message.value = "idle time reached. Message written.";
setTimeout(()=>{
message.value = "fired from the idle job: new message after 1000ms.";
},1000);
});
2019-11-15 13:44:44 +01:00
for (let n=5;n< 15 ; n + + ) {
LNVue.LNPromise(n + " sec promise test",(resolve,reject)=>{
setTimeout(()=>{
resolve();
},n * 1000);
});
}
2019-10-15 23:46:02 +02:00
< / script >
< / body >
< / html >