strolch-wc-notifications.html

<!-- Components -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">
<link rel="import" href="../strolch-wc-styles/strolch-wc-app-style.html">
<link rel="import" href="../strolch-wc-util-behavior/strolch-wc-component-behavior.html">
<link rel="import" href="../strolch-wc-raw-text/strolch-wc-raw-text.html">
<link rel="import" href="../strolch-wc-date-time/strolch-wc-date-picker.html">
<link rel="import" href="../strolch-wc-date-time/strolch-wc-editable-time-picker.html">

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

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

            }

            .content {
                display: flex;
                flex-direction: column;
            }

            textarea {
                padding: 8px;
                min-height: 200px;
                width: calc(100% - 96px);
                margin: 0 24px;
            }

            paper-card {
                padding: 8px;
            }

            .notification {
                margin-bottom: 16px;
            }


        </style>

        <!-- Content -->
        <template is="dom-if" if="[[testNotification]]">
            <strolch-wc-notification message="[[testNotification.title]]" action1="[[localize('details')]]"
                                     callback1="[[testNotification.callback1]]"
                                     bind="[[testNotification.bind]]"
                                     fa-icon="[[testNotification.faIcon]]"></strolch-wc-notification>
        </template>
        <div class="actions padding actions-right">
            <div>
                <paper-button on-tap="onAddNotification" raised>
                    [[localize('add')]]
                </paper-button>
                <paper-icon-button on-tap="refresh" icon="refresh"></paper-icon-button>
            </div>
        </div>

        <div id="content" class="content">
            <template is="dom-repeat" items="[[notifications]]" as="notification">
                <paper-card class="notification" raised="1">
                    <template is="dom-repeat" items="[[supportedLanguages]]" as="language">
                        <h3>[[language.name]]: [[_getField('title', language.locale, notification)]]</h3>
                        <strolch-wc-raw-text
                                text="[[_getField('text', language.locale, notification)]]"></strolch-wc-raw-text>
                        <hr/>
                    </template>

                    <dl class="g-dl">
                        <dt>[[localize('enabled')]]</dt>
                        <dd>[[localizeBoolean(notification.visibility.enabled)]]</dd>
                        <dt>[[localize('validFrom')]]</dt>
                        <dd>[[formatDateTimeDashIfEmpty(notification.visibility.visibleFrom)]]</dd>
                        <dt>[[localize('validTo')]]</dt>
                        <dd>[[formatDateTimeDashIfEmpty(notification.visibility.visibleTo)]]</dd>
                        <dt>[[localize('forAll')]]</dt>
                        <dd>[[localizeBoolean(notification.visibility.forAll)]]</dd>
                        <dt>[[localize('roles')]]</dt>
                        <dd>[[notification.visibility.roles]]</dd>
                        <dt>[[localize('locations')]]</dt>
                        <dd>[[notification.visibility.locationNames]]</dd>
                    </dl>
                    <dl class="g-dl">
                        <dt>[[localize('updatedBy')]]</dt>
                        <dd>[[notification.version.updatedBy]]</dd>
                        <dt>[[localize('updatedAt')]]</dt>
                        <dd>[[formatDateTimeDashIfEmpty(notification.version.updated)]]</dd>
                    </dl>

                    <div class="actions padding actions-right">
                        <div>
                            <paper-button on-tap="onTestNotification" raised>
                                [[localize('test')]]
                            </paper-button>
                            <paper-button on-tap="onEditNotification" raised>
                                [[localize('edit')]]
                            </paper-button>
                            <paper-button on-tap="onRemoveNotification" raised>
                                [[localize('remove')]]
                            </paper-button>
                        </div>
                    </div>
                </paper-card>
            </template>
        </div>

        <strolch-wc-notification-edit-dlg id="editDlg" supported-languages="[[supportedLanguages]]"
                                          locations="[[locations]]" base-path="../"
                                          base-rest-path="[[baseRestPath]]"
                                          locales-path="[[localesPath]]"
                                          on-save="onSaveNotification"></strolch-wc-notification-edit-dlg>
        <strolch-wc-notification-detail id="detailDlg" base-path="../"
                                        base-rest-path="[[baseRestPath]]"
                                        locales-path="[[localesPath]]"></strolch-wc-notification-detail>

        <!-- ajax request -->
        <iron-ajax id="ajaxGetSupportedLanguages" url="[[baseRestPath]]/strolch/languages/supported"
                   content-type="application/json" handle-as="json" method="GET"
                   on-response="onGetSupportedLanguagesResponse" on-error="onRequestError"></iron-ajax>
        <iron-ajax id="ajaxGetAllNotifications" url="[[baseRestPath]]/strolch/notifications/all"
                   content-type="application/json" handle-as="json" method="GET"
                   on-response="onGetAllNotificationsResponse" on-error="onRequestError"></iron-ajax>
        <iron-ajax id="ajaxGetNotification" content-type="application/json" handle-as="json" method="GET"
                   on-response="onGetNotificationResponse" on-error="onRequestError"></iron-ajax>
        <iron-ajax id="ajax" content-type="application/json" handle-as="json" on-response="onAjaxResponse"
                   on-error="onRequestError"></iron-ajax>

    </template>

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

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

            <!-- Properties -->
            properties: {
                toolbarConfig: {
                    type: Object,
                    value: {
                        pageTitle: "notifications",
                        backButton: true,
                        searchInput: false,
                        lockLocation: false
                    },
                    notify: true,
                    readOnly: true
                },
                locations: {
                    type: Array
                },
                supportedLanguages: {
                    type: Array
                },
                notifications: {
                    type: Array
                },
                testNotification: {
                    type: Object
                }
            },

            <!-- Functions -->
            reload: function () {
                this.refresh();
            },
            refresh: function () {
                this.$.ajaxGetSupportedLanguages.generateRequest();
                this.$.ajaxGetAllNotifications.generateRequest();
            },

            onAddNotification: function (e) {
                this.$.editDlg.open();
            },
            onEditNotification: function (e) {
                this.$.editDlg.open(e.model.notification);
            },
            showDetail: function (notification) {
                this.$.detailDlg.open(notification);
            },
            onTestNotification: function (e) {
                var notification = e.model.notification;
                this.$.ajaxGetNotification.url = this.baseRestPath + "/strolch/notifications/" + notification.id;
                this.$.ajaxGetNotification.generateRequest();
            },
            onGetNotificationResponse: function (e) {
                var notification = e.detail.response.data;
                notification.callback1 = function () {
                    this.showDetail(notification);
                }.bind(this);
                this.testNotification = notification;
                this.async(function () {
                    this.testNotification = null;
                }, 10000);
            },

            ready: function () {

            },

            onGetAllNotificationsResponse: function (e) {
                this.notifications = e.detail.response.data;
            },
            onGetSupportedLanguagesResponse: function (e) {
                this.supportedLanguages = e.detail.response;
                this.selectedLanguageTab = this.supportedLanguages[0].locale;
            },

            onSaveNotification: function (e) {
                var notification = e.detail;

                this.showInfo({
                    title: this.localize("saveNotification"),
                    line1: this.localize("saveNotificationConfirm"),
                    callback: function (confirmed) {
                        if (confirmed)
                            this._save(notification);
                    }.bind(this)
                });
            },
            _save: function (notification) {
                if (notification.id == null) {
                    this.$.ajax.url = this.baseRestPath + '/strolch/notifications/';
                    this.$.ajax.method = 'POST';
                } else {
                    this.$.ajax.url = this.baseRestPath + '/strolch/notifications/' + notification.id;
                    this.$.ajax.method = 'PUT';
                }
                this.$.ajax.body = notification;
                this.$.ajax.onResponse = this.closeEditDlg;
                this.$.ajax.generateRequest();
            },
            onRemoveNotification: function (e) {
                var notification = e.model.notification;
                var title = notification[this.supportedLanguages[0].locale].title;

                this.showInfo({
                    title: this.localize("removeNotification"),
                    line1: this.localize("removeNotificationConfirm", "title", title),
                    callback: function (confirmed) {
                        if (!confirmed) return;
                        console.log("Removing " + notification.id);
                        this.$.ajax.url = this.baseRestPath + '/strolch/notifications/' + notification.id;
                        this.$.ajax.method = "DELETE";
                        this.$.ajax.body = null;
                        this.$.ajax.generateRequest();
                    }.bind(this)
                });
            },

            onAjaxResponse: function (e) {
                this.$.editDlg.close();
                this.refresh();
            }
        });
    </script>
</dom-module>