-
Notifications
You must be signed in to change notification settings - Fork 93
/
Copy pathplayground.html
137 lines (124 loc) · 4.54 KB
/
playground.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!doctype html>
<html>
<head>
<title>`paper-datatable-card` playground</title>
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../paper-datatable-card.html">
<link rel="import" href="../../paper-datatable.html">
<link rel="import" href="../../docs/documentation-menu.html">
</head>
<body>
<template is="dom-bind" id="app">
<demo-menu>
<style is="custom-style">
body{
background: #f5f5f5;
}
</style>
<paper-datatable-card id="datatableCard" header="Document library" page-size="10" data-source="{{data}}" id-property="i" selected-ids="{{selectedIds}}">
<div toolbar-main>
<paper-icon-button icon="add" on-tap="addNew"></paper-icon-button>
</div>
<div toolbar-select>
<paper-icon-button icon="delete"></paper-icon-button>
</div>
<paper-datatable selectable multi-selection>
<paper-datatable-column header="ID" property="i" type="String" tooltip="Some title" sortable align="center" style="min-width: 40px" sorted></paper-datatable-column>
<paper-datatable-column header="Author" property="author" tooltip="The total amount of..." style="min-width: 500px" default='{"first": "", "last": ""}' editable>
<template>
<paper-input value="{{value.first}}" no-label-float style="display:inline-block;width:49%;"></paper-input>
<paper-input value="{{value.last}}" no-label-float style="display:inline-block;width:49%;"></paper-input>
</template>
</paper-datatable-column>
<paper-datatable-column header="Document title" property="title" type="String" tooltip="Some title" sortable style="width: 99%"></paper-datatable-column>
<paper-datatable-column header="Rating" property="rating" type="Number" tooltip="The total amount of..." sortable style="min-width: 200px" editable>
<template>
<paper-input value="{{value}}" no-label-float></paper-input>
</template>
</paper-datatable-column>
<paper-datatable-column property="reserved" header="Reserved" type="boolean" default="false" style="min-width: 100px" cell-style="padding-left:40px;" align="center" editable>
<template>
<paper-checkbox checked="{{value}}"></paper-checkbox>
</template>
</paper-datatable-column>
</paper-datatable>
</paper-datatable-card>
<div style="padding:20px">
Selected IDs: {{outputSelectedIds(selectedIds.splices)}}
</div>
</demo-menu>
</template>
<script>
var app = document.querySelector('#app');
var myData = [];
for (var i=0; i<142; i++) {
var id = i*10000+Math.round(Math.random() * 500);
var rating = Math.round(Math.random() * 2000)+1000;
myData.push({
i: i,
title: "title"+id,
rating: rating,
author: {
first: "David",
last: "Mulder "+ i
},
reserved: (Math.random() > 0.9 ? true : undefined)
});
}
window.myData = myData;
app.data = {
get: function(sort, page, pageSize){
console.log('just once? :/');
return new Promise(function(resolve, reject){
myData.sort(function(a,b){
if(sort.direction == "desc"){
var c = a;
a = b;
b = c;
}
if(a[sort.property] > b[sort.property]) return 1;
if(a[sort.property] < b[sort.property]) return -1;
return 0;
});
resolve(myData.slice((page-1)*pageSize, page*pageSize));
});
},
set: function(item, property, value){
return new Promise(function(resolve, reject){
console.info("a save was triggered", [item, property, value]);
if(item.id === '__new__'){
//validate item, if invalid (and thus not savable yet) reject, otherwise return it's new id
console.warn('this is for the time being deprecated');
/*
if(item.author.first.length > 0 && item.author.last.length > 0){
console.log('trigger save');
var id = Math.round(Math.random() * 10000);
item.id = id;
myData.push(item);
app.set('data.length', myData.length);
resolve(id);
}else{
console.log('no luck yet');
reject();
}*/
}else{
var myItem = myData.find(function(thisItem){
return thisItem.id == item.id;
});
myItem[property] = value;
resolve(true);
}
});
},
length:myData.length
};
app.addNew = function(){
this.$.datatableCard.addNew();
};
app.outputSelectedIds = function(){
return app.selectedIds.join(', ');
}
</script>
</body>
</html>