demo/ajax-demo.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cosmoz Omnitable demo</title>
<script
type="module"
src="/node_modules/@polymer/polymer/polymer-legacy.js"
></script>
<script
type="module"
src="/node_modules/@polymer/iron-ajax/iron-ajax.js"
></script>
<script
type="module"
src="/node_modules/@polymer/iron-icons/editor-icons.js"
></script>
<script
type="module"
src="/node_modules/@polymer/iron-icons/iron-icons.js"
></script>
<script
type="module"
src="/node_modules/@polymer/paper-button/paper-button.js"
></script>
<script type="module" src="../cosmoz-omnitable.js"></script>
<style>
body {
font-family: sans-serif;
margin: 0;
height: 100vh;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
cosmoz-omnitable {
flex: auto;
}
</style>
</head>
<body>
<cosmoz-i18next interpolation-prefix="{" interpolation-suffix="}">
</cosmoz-i18next>
<dom-bind id="t"
><template>
<div id="container">
<h3>Cosmoz omnitable demo</h3>
<iron-ajax
auto
url="data.json"
params="[[ getSearchParams(eyeColorFilter.splices) ]]"
last-response="{{ data }}"
></iron-ajax>
<iron-ajax
auto
url="eyeColors.json"
loading="{{ eyeColorSearching }}"
params="[[ getEyeColorSearch(eyeColorQuery) ]]"
last-response="{{ eyeColorValues }}"
></iron-ajax>
<cosmoz-omnitable data="[[ data ]]">
<cosmoz-omnitable-column-autocomplete
title="Company"
name="company"
value-path="company"
>
</cosmoz-omnitable-column-autocomplete>
<cosmoz-omnitable-column-boolean
title="Is active"
name="isactive"
value-path="isActive"
true-label="Yes"
false-label="No"
>
</cosmoz-omnitable-column-boolean>
<cosmoz-omnitable-column-autocomplete
external-values
loading="[[ eyeColorSearching ]]"
filter="{{ eyeColorFilter }}"
query="{{ eyeColorQuery }}"
values="[[ eyeColorValues ]]"
title="Eye color"
value-path="eyeColor"
name="eyecolor"
>
</cosmoz-omnitable-column-autocomplete>
<cosmoz-omnitable-column-number
title="Age"
name="age"
value-path="age"
>
</cosmoz-omnitable-column-number>
<cosmoz-omnitable-column-number
title="Longitude"
name="longitude"
value-path="longitude"
>
</cosmoz-omnitable-column-number>
<cosmoz-omnitable-column-number
title="Latitude"
name="latitude"
value-path="latitude"
>
</cosmoz-omnitable-column-number>
<cosmoz-omnitable-column-date
title="Registered"
name="registered"
value-path="registered"
>
</cosmoz-omnitable-column-date>
<cosmoz-omnitable-column-list
title="Tags"
name="tags"
value-path="tags"
>
</cosmoz-omnitable-column-list>
<cosmoz-omnitable-column-autocomplete
title="Favorite fruit"
name="favoritefruit"
value-path="favoriteFruit"
>
</cosmoz-omnitable-column-autocomplete>
</cosmoz-omnitable>
</div> </template
></dom-bind>
<script type="module">
// TODO broken! fix or drop
const t = document.getElementById('t');
t.getEyeColorSearch = function (query) {
return {
q: query,
};
};
t.getSearchParams = function (filterSplice) {
if (!filterSplice) {
return;
}
return {
eyeColor: filterSplice.indexSplices[0].object,
};
};
</script>
</body>
</html>