Select Git revision
index.html 7.90 KiB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pagination Playground</title>
<script src="./main.js" type="module"></script>
</head>
<body class="monster-color-primary-1">
<a href="../">Back</a>
<main>
<h1>Dom Data Source</h1>
<monster-datasource-dom id="data1">
<script id="data" type="application/json">
{
"dataset": [
{
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "2020-01-16T10:27:18",
"erpCreation": "2020-01-16T10:27:18",
"archived": false,
"oid": 1000,
"orderDate": "2019-01-16T10:27:18",
"orderState": 57,
"orderLastStatusChange": "2019-01-16T10:38:53",
"customerUID": 30,
"customerNotice": "",
"billingAddressAID": 16,
"deliveryAddressAID": 16,
"deliveryNotice": "",
"paymentPID": 101,
"assigndTickets": "",
"resubmissionDate": "1970-01-01T12:00:00",
"resubmissionInfo": "",
"acquisitionPartnerID": 0,
"acquisitionInfo": "",
"acquisitionRedirect": null,
"acquisitionDate": "1970-01-01T12:00:00",
"shippingNotice": "",
"shippingDCID": 2,
"retoureRID": 0,
"companySHID": 1,
"salesmanUID": 0,
"channelOrderID": "",
"channelOrderState": "0",
"channelOrderDate": null,
"channelOrderData": {}
},
{
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "2020-01-16T10:27:18",
"erpCreation": "2020-01-16T10:27:18",
"archived": false,
"oid": 1000,
"orderDate": "2019-01-16T10:27:18",
"orderState": 57,
"orderLastStatusChange": "2019-01-16T10:38:53",
"customerUID": 30,
"customerNotice": "",
"billingAddressAID": 16,
"deliveryAddressAID": 16,
"deliveryNotice": "",
"paymentPID": 101, "assigndTickets": "",
"resubmissionDate": "1970-01-01T12:00:00",
"resubmissionInfo": "",
"acquisitionPartnerID": 0,
"acquisitionInfo": "",
"acquisitionRedirect": null,
"acquisitionDate": "1970-01-01T12:00:00",
"shippingNotice": "",
"shippingDCID": 2,
"retoureRID": 0,
"companySHID": 1,
"salesmanUID": 0,
"channelOrderID": "",
"channelOrderState": "0",
"channelOrderDate": null,
"channelOrderData": {}
},
{
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "2020-01-16T10:27:18",
"erpCreation": "2020-01-16T10:27:18",
"archived": false,
"oid": 1000,
"orderDate": "2019-01-16T10:27:18",
"orderState": 57,
"orderLastStatusChange": "2019-01-16T10:38:53",
"customerUID": 30,
"customerNotice": "",
"billingAddressAID": 16,
"deliveryAddressAID": 16,
"deliveryNotice": "",
"paymentPID": 101,
"assigndTickets": "",
"resubmissionDate": "1970-01-01T12:00:00",
"resubmissionInfo": "",
"acquisitionPartnerID": 0,
"acquisitionInfo": "",
"acquisitionRedirect": null,
"acquisitionDate": "1970-01-01T12:00:00",
"shippingNotice": "",
"shippingDCID": 2,
"retoureRID": 0,
"companySHID": 1,
"salesmanUID": 0,
"channelOrderID": "",
"channelOrderState": "0",
"channelOrderDate": null,
"channelOrderData": {}
}
],
"sys": {
"pagination": {
"currentPage": 1,
"nextOffset": 3,
"pages": 1,
"prevOffset": null,
"offset": 0,
"objectsPerPage": 20,
"total": 3
},
"message": "200 OK",
"code": 200
}
}
</script>
</monster-datasource-dom>
<monster-pagination data-monster-datasource-selector="#data1"></monster-pagination> <div class="monster-table-container">
<monster-datatable id="t12" data-monster-datasource-selector="#data1">
<template id="row">
<div data-monster-mode="fixed" data-monster-sortable="oid" data-monster-head="OID">
<a data-monster-attributes="href path:row.oid | tostring | prefix:#"
data-monster-replace="path:row.oid | tostring">Link</a>
</div>
<div data-monster-grid-template="1fr">
<ul>
<li><input type="date"></li>
<li data-monster-replace="path:row.oid">test 1</li>
<li>asdfjasdkfjk</li>
</ul>
</div>
<div data-monster-mode="fixed" data-monster-head="i18n:key2"
data-monster-replace="path:row.erpCreation"></div>
<div data-monster-mode="fixed" data-monster-head="i18n:key1" data-monster-grid-template="1fr"><input
type="checkbox"></div>
<div data-monster-head="orderState 2" class="center" data-monster-align="center"
data-monster-replace="path:row.orderState"></div>
<div class="end" data-monster-align="end"
data-monster-replace="path:row.orderState | tostring | prefix:<span class=monster-badge-secondary-pill>|suffix:</span>"></div>
<div data-monster-mode="hidden" data-monster-head="OS2" data-monster-replace="static:OXXXXX"></div>
<div data-monster-sortable="orderState" data-monster-head="State"
data-monster-replace="path:row.orderState | tostring | prefix:____"></div>
<div data-monster-head="xxx" data-monster-replace="static:wwwww"></div>
<div>
<button data-monster-replace="static:doit">Click</button>
</div>
</template>
<div slot="footer" class="monster-button-group">
<monster-button>Aktion 1</monster-button>
<monster-button>Aktion 2</monster-button>
<monster-button>Aktion 3</monster-button>
</div>
</monster-datatable> </div>
</main>
</body>
</html>