strolch-wc-notification-detail.html

<!-- Components -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../strolch-wc-util-behavior/strolch-wc-component-behavior.html">
<link rel="import" href="../strolch-wc-localize-behavior/strolch-wc-localize-behavior.html">
<link rel="import" href="../strolch-wc-raw-text/strolch-wc-raw-text.html">
<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">

<link rel="import" href="./strolch-wc-notifications-behavior.html">
<link rel="import" href="./strolch-wc-notification.html">

<dom-module id="strolch-wc-notification-detail">
    <template>
        <!-- Style -->
        <style is="custom-style" include="strolch-wc-styles">
            :host {

            }

            paper-dialog {
                width: 600px;
            }

        </style>

        <!-- Content -->
        <paper-dialog id="dlg" modal on-iron-overlay-closed="close">
            <iron-a11y-keys keys="esc" on-keys-pressed="close"></iron-a11y-keys>
            <h2>[[notification.title]]</h2>
            <strolch-wc-raw-text text="[[notification.text]]"></strolch-wc-raw-text>

            <dl class="g-dl">
                <dt>[[localize('validFrom')]]</dt>
                <dd>[[formatDateTimeDashIfEmpty(notification.visibleFrom)]]</dd>
                <dt>[[localize('validTo')]]</dt>
                <dd>[[formatDateTimeDashIfEmpty(notification.visibleTo)]]</dd>
            </dl>

            <div class="buttons">
                <paper-button dialog-confirm autofocus>[[localize('close')]]</paper-button>
            </div>
        </paper-dialog>

    </template>

    <script>
        Polymer({
            <!-- Settings -->
            is: "strolch-wc-notification-detail",

            <!-- Behaviors -->
            behaviors: [
                StrolchLocalizeBehavior, StrolchNotificationsBehavior
            ],

            <!-- Properties -->
            properties: {
                localesPath: {
                    type: String
                },
                notification: {
                    type: Object
                }
            },

            <!-- Functions -->

            open: function (notification) {
                this.notification = notification;
                this.$.dlg.open();
            },

            close: function () {
                this.$.dlg.close();
            },


        });
    </script>
</dom-module>