strolch-maven-archetypes/li.strolch.mvn.archetype.webapp/src/main/resources/archetype-resources/src/main/webapp/app/src/main/c-drawer.html

<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">

<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">

<link rel="import" href="../../bower_components/paper-material/paper-material.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">

<link rel="import" href="../../bower_components/strolch-wc-inspector/strolch-wc-inspector-menu.html">

<link rel="import" href="../behaviors/c-component-behavior.html">
<link rel="import" href="../styles/c-app-style.html">

<dom-module id="c-drawer">
    <template>
        <style is="custom-style" include="c-app-style">
            :root {
            }

            app-drawer {
                z-index: 10;
            }

            app-toolbar {
                background-color: var(--app-primary-color);
                color: var(--app-regular-highlight-fg-color);
            }

            paper-menu {
                --paper-menu-selected-item: {
                    background-color: var(--app-light-highlight-bg-color);
                };
                --paper-menu-focused-item: {
                    background-color: var(--app-regular-highlight-bg-color);
                };
            }

            paper-menu paper-item {
                cursor: pointer;
            }

            paper-menu paper-item:hover {
                background-color: var(--app-regular-highlight-bg-color);
            }

            .info-div {
                display: block !important;
                font-size: small;
                color: darkgray;
            }

            .strolch {
                color: #7f7f7f;
                font-family: monospace;
                font-weight: 600;
                font-size: 30px;
                text-shadow: 2px 2px 3px #7f7f7f;
                margin: auto;
            }

        </style>

        <app-drawer id="appDrawer">

            <app-toolbar>
                <paper-icon-button icon="menu" on-tap="closeDrawer"></paper-icon-button>
                <div main-title>[[localize('appTitle')]]</div>
            </app-toolbar>

            <paper-menu id="menu" selected="{{page}}" attr-for-selected="id" on-tap="onMenuTap">

                <paper-item id="demo-locations" class="menu-item">[[localize('demo-locations')]]</paper-item>
                <paper-item id="demo-books" class="menu-item">[[localize('demo-books')]]</paper-item>

                <template is="dom-if" if="[[hasPrivilege('li.strolch.report.ReportSearch')]]">
                    <paper-item id="reports" class="menu-item">[[localize('reports')]]</paper-item>
                </template>

            </paper-menu>

            <template is="dom-if" if="[[hasRole('StrolchAdmin')]]">
                <strolch-wc-inspector-menu selected-page="[[page]]"
                                           on-menu-tap="onInspectorMenuTap"></strolch-wc-inspector-menu>
            </template>

            <paper-menu on-tap="onLogoutTapped">
                <paper-item id="logout" class="menu-item">[[localize('logout')]]</paper-item>
            </paper-menu>

            <paper-material id="container" class="container info-div" elevation="0">
                <p>[[userConfig.firstname]] [[userConfig.lastname]] / [[userConfig.username]]</p>
                <p title="[[version.appVersion.scmRevision]]">[[version.appVersion.artifactVersion]]</p>
            </paper-material>

            <paper-material id="container" class="container" elevation="0">
                <paper-dropdown-menu label="[[localize('language')]]">
                    <paper-listbox class="dropdown-content" selected="{{userLocale}}" attr-for-selected="data">
                        <paper-item data="de">Deutsch</paper-item>
                        <paper-item data="en">English</paper-item>
                        <paper-item data="fr">Français</paper-item>
                    </paper-listbox>
                </paper-dropdown-menu>
            </paper-material>

            <paper-material id="container" class="container" elevation="0">
                <p class="strolch">${appName}</p>
            </paper-material>
        </app-drawer>

        <!-- Ajax requests -->
        <iron-ajax id="ajaxPutLocale" content-type="application/json" handle-as="json" method="PUT"></iron-ajax>

    </template>

    <script>

        Polymer({

            is: 'c-drawer',

            behaviors: [
                CustomComponentBehavior
            ],

            properties: {
                authTokenValid: {
                    type: Boolean
                },
                userConfig: {
                    type: Object,
                    observer: "userConfigChanged"
                },
                userLocale: {
                    type: String,
                    observer: "userLocaleChanged"
                },
                version: {
                    type: Object
                }
            },

            observers: [],

            listeners: {},

            toggleDrawer: function () {
                this.$$("#appDrawer").toggle();
            },
            closeDrawer: function () {
                this.$$("#appDrawer").close();
            },

            onInspectorMenuTap: function (e) {
                this.changePage(e.detail.target.id, false);
            },
            onMenuTap: function (e) {
                this.changePage(e.detail.sourceEvent.target.id, false);
            },
            onLogoutTapped: function (e) {
                this.fire('cx-logout');
            },

            userConfigChanged: function (newValue, oldValue) {
                if (newValue != null) {
                    var userLocale = Strolch.getUserLocale();
                    if (userLocale !== newValue.locale) {
                        console.log("Updating server side locale for user " + newValue.username + " to " + userLocale);
                        newValue.locale = userLocale;
                        Strolch.setUserConfig(newValue);
                        this.$.ajaxPutLocale.url = this.baseRestPath + "/strolch/sessions/" + newValue.sessionId + "/locale/" + userLocale;
                        this.$.ajaxPutLocale.generateRequest();
                    }

                    this.userLocale = newValue.locale;
                }
            },

            userLocaleChanged: function (newValue, oldValue) {
                if (newValue && oldValue) {
                    console.log('User locale changed to ' + newValue);
                    this.$.ajaxPutLocale.generateRequest();
                    Strolch.setUserLocale(newValue);
                    window.location.reload();
                } else if (this.userConfig == null && Strolch.getUserConfig() != null && Strolch.getUserConfig().locale !== newValue) {
                    this.userConfig = Strolch.getUserConfig();
                    this.userConfig.locale = newValue;
                    Strolch.setUserConfig(this.userConfig);
                    this.$.ajaxPutLocale.generateRequest();
                }
            },

            /* Lifecycle */
        });

    </script>

</dom-module>