99 lines
2.5 KiB
HTML
99 lines
2.5 KiB
HTML
<link rel="import" href="../bower_components/polymer/polymer.html">
|
|
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
|
|
<link rel="import" href="../bower_components/core-icons/core-icons.html">
|
|
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
|
|
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">
|
|
|
|
<link rel="import" href="../elements/xinu-email-unread.html">
|
|
|
|
<script src="../bower_components/moment/moment.js"></script>
|
|
|
|
<polymer-element name="xinu-email-app">
|
|
<template>
|
|
<style>
|
|
:host {
|
|
height: 100%;
|
|
}
|
|
|
|
core-header-panel {
|
|
height: 100%;
|
|
}
|
|
|
|
core-header-panel[mode=cover]::shadow #mainContainer {
|
|
left: 70px;
|
|
}
|
|
|
|
.core-header {
|
|
height: 4em;
|
|
line-height: 2em;
|
|
font-size: 18px;
|
|
padding: 0 10px;
|
|
background-color: #4F7DC9;
|
|
color: #FFF;
|
|
transition: height 0.2s;
|
|
}
|
|
|
|
.core-header.tall {
|
|
height: 180px;
|
|
}
|
|
|
|
.core-header.medium-tall {
|
|
height: 120px;
|
|
}
|
|
|
|
#net-stats {
|
|
font-size: 12px;
|
|
}
|
|
|
|
paper-fab#refresh-button {
|
|
background: #080;
|
|
margin: 10px;
|
|
}
|
|
</style>
|
|
<core-ajax
|
|
id="fetch"
|
|
url="/unread?format=list"
|
|
handleAs="json"
|
|
response="{{boxes}}"
|
|
on-core-response="{{handleResponse}}">
|
|
</core-ajax>
|
|
<core-header-panel flex mode="waterfall">
|
|
<div class="core-header" horizontal layout center>
|
|
<div flex>Unread</div>
|
|
<div id="net-stats">{{latency}} ms @ {{lastRefresh}}</div>
|
|
<paper-fab id="refresh-button" icon="refresh" on-click="{{handleRefresh}}" end></paper-fab>
|
|
</div>
|
|
<div class="content">
|
|
<xinu-email-unread boxes="{{boxes}}"></xinu-email-unread>
|
|
</div>
|
|
</core-header-panel>
|
|
</template>
|
|
|
|
<script>
|
|
var pollingIntervalMS = 30 * 1000
|
|
Polymer('xinu-email-app', {
|
|
log: function() {
|
|
console.log('xinu-email-app ', arguments);
|
|
},
|
|
ready: function() {
|
|
this.log('ready');
|
|
this.handleRefresh();
|
|
},
|
|
handleRefresh: function(event, detail, sender) {
|
|
this.lastRequest = moment();
|
|
this.log('handleRefresh');
|
|
this.$.fetch.go();
|
|
this.job('refreshLoop', function() { // first arg is the name of the "job"
|
|
this.handleRefresh();
|
|
}, pollingIntervalMS);
|
|
},
|
|
handleResponse: function(event, detail, sender) {
|
|
var now = moment();
|
|
this.lastRefresh = now.format('h:mm:ss');
|
|
this.latency = moment(now - this.lastRequest).millisecond();
|
|
}
|
|
});
|
|
</script>
|
|
</polymer-element>
|
|
|