238 lines
8.0 KiB
HTML
238 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>
|
|
|
|
<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();
|
|
|
|
LNVue.onidle(()=>{
|
|
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++){
|
|
LNVue.LNPromise(n + " sec promise test",(resolve,reject)=>{
|
|
setTimeout(()=>{
|
|
resolve();
|
|
},n * 1000);
|
|
});
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |