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;
}
< / style >
< / head >
< body >
< div id = "frame" >
< h1 > ln.vue Demo Application< / h1 >
2019-10-16 22:00:03 +02:00
< div v-if = "false" >
< h2 > Please wait for application to be loaded...< / h2 >
< / div >
< ln-navbar > < / ln-navbar >
2019-10-15 23:46:02 +02:00
< router-view > < / router-view >
< / 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',
},
}
};
/* LNVue.addRouteTemplate(
2019-10-15 23:46:02 +02:00
"/state",
`< div > Current User Input object:< br > < br >
< span class = "json" > {{ JSON.stringify(controls,null,4) }}< / span >
< / div > `
);
LNVue.addRoute("/controls","/controls.html");
LNVue.addRoute("/table","/table.html");
2019-10-16 22:00:03 +02:00
*/
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-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-10-15 23:46:02 +02:00
< / script >
< / body >
< / html >