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 >
< script type = "text/javascript" src = "js/ln.vue.application.js" > < / script >
< script type = "text/javascript" src = "js/ln.vue.components.js" > < / script >
< script type = "text/javascript" src = "js/ln.vue.table.js" > < / script >
< style >
table#controls > tbody > tr > td:nth-child(3) {
padding-left: 24px;
}
< / style >
< / head >
< body >
< div id = "frame" >
< h1 > ln.vue Demo Application< / h1 >
< ln-navbar
:navitems="[
{ href: '/', label: 'HOME' },
{ href: '/controls', label: 'Simple Form Controls' },
{ href: '/table', label: 'Table View Control' },
{ href: '/state', label: 'Current State' },
]">< / ln-navbar >
< router-view > < / router-view >
< / div >
< script type = "text/javascript" >
LNVue.addRouteTemplate(
"/",
2019-10-16 12:18:39 +02:00
`< 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 > `
2019-10-15 23:46:02 +02:00
);
LNVue.addRouteTemplate(
"/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 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
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 >