existdb-packages.html

<!--
`existdb-packages`
element for displaying package metadata

@demo demo/doc.html
-->

<dom-module id="existdb-packages">
    <template>
        <style>
            body{
                margin:0;
                padding:0;
            }
            :host {
                position: relative;
                background: whitesmoke;
                margin:0;
                padding:0;
                height: 100%;
                width: 100%;

                --paper-icon-button: {
                    color: var(--paper-blue-300);
                };

            }

            #localItemList{
                /*width:100%;*/
                /*display: block;*/
                padding: 10px;
                margin:0;
                background: whitesmoke;
                display: flex;
                flex-direction:row;
                flex-wrap:wrap;
                justify-content:center;
            }

            @media only screen and (max-width: 768px) {
                #localItemList{
                    display: block;
                }
            }


            ::slotted(repo-packages){
                display: block;
                width: 100%;
            }
            paper-progress.paper-progress{
                width: 100%;
                display: block;
                margin-top: -2px;
                flex-grow:5;

                --paper-progress-active-color: var(--paper-blue-500);
                --paper-progress-height: 5px;

            }
            [hidden]{
                display:none;
            }
            .spin-wrapper{
                position: relative;
                width: 100%;
                text-align: center;
                height: 1px;
                z-index: 10;
                top: 20px;
            }
            paper-spinner{
                padding: 10px;
                background: var(--paper-grey-200);
                border-radius: 24px;
                box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
                0 1px 10px 0 rgba(0, 0, 0, 0.12),
                0 2px 4px -1px rgba(0, 0, 0, 0.4);
            }

        </style>

        <iron-ajax id="loadPackages"
                   verbose with-credentials
                   method="get" handle-as="text"
                   on-response="_handlePackages"
                   on-error="_handleLocalError"></iron-ajax>


        <div class="spin-wrapper" id="spinner">
            <paper-spinner active></paper-spinner>
        </div>

        <div id="localItemList" class="items" type="packagemanager">
            <slot></slot>
        </div>

    </template>

    <script>
        class ExistdbPackages extends Polymer.Element {

            static get is() {
                return 'existdb-packages';
            }

            static get properties() {
                return {
                    url: {
                        type:String,
                        reflectToAttribute:true
                    },
                    service:{
                        type: String,
                        reflectToAttribute:true,
//                        notify:true
                    },
                    autoLoad:{
                        type:Boolean,
                        value:false
                    },
                    count:{
                        type:Number,
                        value:0,
                        notify:true,
                        reflectToAttribute:true,
                        observer:'_handleCount'
                    }
                };
            }

            constructor() {
//                console.log('ExistdbPackages constructor')
                super();
            }

            connectedCallback() {
                super.connectedCallback();
//                console.log("existdb-packages connected");
            }


            ready () {
                super.ready();
//                console.log("existdb-packages ready ", this.service);

                if(this.autoLoad){
                    this.loadPackages();
                }

                window.addEventListener('package-removed', function(e){
                    this.loadPackages();
                }.bind(this));

                window.addEventListener('package-installed', function (e) {
                    console.log('package-installed ', e);
                    this.loadPackages();
                }.bind(this));

                /*
                window.addEventListener('package-remove-error', function (e) {
                    this._toastError(e.detail.error.error.message)
                }.bind(this));

                window.addEventListener('package-installed', function (e) {
                    console.log('package-installed ', e);
                    this._toast('Package has been installed: ' + e.detail.abbrev)
                    this.loadPackages();
                }.bind(this));
                window.addEventListener('package-install-error', function (e) {
                    this._toastError(e.detail.error.error.message)
                }.bind(this));
*/

            }

            getPackages(){
                return this.packages;
            }


            _handlePackages (data) {
//                console.log('existdb-packages._handlePackages');

                this.$.localItemList.innerHTML = this.$.loadPackages.lastResponse

//                console.log('repo-packages ', this.shadowRoot.querySelector('repo-packages'));
                this.packages = this.shadowRoot.querySelectorAll('repo-app')
                this.count = this.packages.length;

                this.dispatchEvent(new CustomEvent('packages-loaded', {bubbles: true, composed: true, detail: {type:this.id}}));
                this._hideSpinner();
            }

            _handleLocalError(e) {
//                console.log("loading of available packages failed", e.detail.error)
                this._hideSpinner();

                this.dispatchEvent(new CustomEvent('packages-load-error', {bubbles: true, composed: true, detail: {error:'loading of available packages failed'}}));
            }

            loadPackages(){
                this.$.spinner.hidden=false;
                this.$.loadPackages.url = this.service;
                this.$.loadPackages.generateRequest();
            }

            _hideSpinner(){
//                setTimeout(function () {
                    this.$.spinner.hidden=true;
//                }, 600)
            }


            _handleCount(newValue, oldValue){
//                console.log("_handleCount ", newValue, oldValue)
            }

        }

        window.customElements.define(ExistdbPackages.is, ExistdbPackages);

    </script>
</dom-module>