110 lines
3.0 KiB
HTML
110 lines
3.0 KiB
HTML
<link rel="import" href="../bower_components/polymer/polymer.html">
|
|
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
|
|
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
|
|
<link rel="import" href="../bower_components/paper-header-panel/paper-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>
|
|
|
|
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
|
|
<dom-module id="xinu-email-app">
|
|
<style>
|
|
/* TODO(polyup): For speed, consider reworking these styles with .classes
|
|
and #ids rather than [attributes].
|
|
*/
|
|
[layout] {
|
|
@apply(--layout);
|
|
}
|
|
[layout][horizontal] {
|
|
@apply(--layout-horizontal);
|
|
}
|
|
[layout][center] {
|
|
@apply(--layout-center);
|
|
}
|
|
</style>
|
|
<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>
|
|
<template>
|
|
<iron-ajax id="fetch" url="http://mail.z.xinu.tv/unread?format=list" handle-as="json" last-response="{{boxes}}" on-core-response="handleResponse">
|
|
</iron-ajax>
|
|
<paper-header-panel flex="" mode="waterfall">
|
|
<div class="core-header" horizontal="" layout="" center="">
|
|
<div flex="">Unread</div>
|
|
<div id="net-stats"><span>{{latency}}</span> ms @ <span>{{lastRefresh}}</span></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>
|
|
</paper-header-panel>
|
|
</template>
|
|
<script>
|
|
var pollingIntervalMS = 30 * 1000;
|
|
Polymer({
|
|
is: '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.generateRequest();
|
|
this.debounce('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>
|
|
</dom-module>
|
|
|