Skip to content

Commit

Permalink
feat: run prettier and test and demo
Browse files Browse the repository at this point in the history
  • Loading branch information
megheaiulian committed Nov 21, 2023
1 parent bb83d80 commit d9223d1
Show file tree
Hide file tree
Showing 42 changed files with 7,410 additions and 5,968 deletions.
2 changes: 1 addition & 1 deletion demo/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"rules": {
"no-console": 0
"no-console": 0
}
}
214 changes: 142 additions & 72 deletions demo/ajax-demo.html
Original file line number Diff line number Diff line change
@@ -1,85 +1,155 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Cosmoz Omnitable demo</title>
<title>Cosmoz Omnitable demo</title>

<script src="/node_modules/web-animations-js/web-animations-next-lite.min.js"></script>
<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>
<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>
<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>
<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>
<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');
<script type="module">
// TODO broken! fix or drop
const t = document.getElementById('t');

t.getEyeColorSearch = function (query) {
return {
q: query
t.getEyeColorSearch = function (query) {
return {
q: query,
};
};
};

t.getSearchParams = function (filterSplice) {
if (!filterSplice) {
return;
}
return {
eyeColor: filterSplice.indexSplices[0].object
t.getSearchParams = function (filterSplice) {
if (!filterSplice) {
return;
}
return {
eyeColor: filterSplice.indexSplices[0].object,
};
};
};
</script>
</body>
</script>
</body>
</html>
Loading

0 comments on commit d9223d1

Please sign in to comment.