<template>
  <card class="card-user" style="max-height:100%">
      <div class="author">
        <img class="avatar border-white" src="@/assets/img/docker.png" alt="...">
      </div>

      <b-container fluid class="bv-example-row">


          <div class="row text-center">
            <div class="col-12">
              <b>Swarmlab hybrid zones config</b>
            </div>
          </div>

<br>



              <div class="input-group input-group-sm sm-3">
                <div class="input-group-prepend">
                  <button 
                    class="btn btn-outline-primary" 
                    round
                    type="button"
                    @click="onAction('add')"
                  >
                    Add Network Node</button>
                </div>
                    
                <input type="text" 
                  class="form-control" 
                  aria-label="Small" aria-describedby="inputGroup-sizing-sm"
                  placeholder="Search"
                  v-model="searchFor"
                  @keyup.enter="setFilter"
                  >
                    
                <div class="input-group-append">
                  <button 
                    class="btn btn-outline-primary" 
                    round
                    type="button"
                    @click="setFilter">
                    Go</button>
                </div>
                    
                <div class="input-group-append">
                  <button class="btn btn-outline-secondary" 
                    round
                    type="button"
                    @click="resetFilter">
                    Reset</button>
                </div>
              </div>

          <!-- add newNODE -->
           <card class="card-user" style="max-height:100%"
                  v-if="nodeadmin"
           >
                  <br>
              <div class="white h-20 flex-fixed-width-item"

          <!-- add newROW ----------------------------------------------------  -->
              <div class="row" >
                <div class="col-3 order-first pr-md-1" >
                    <input type="text" 
                      class="form-control" 
                      aria-label="Small" aria-describedby="inputGroup-sizing-sm"
                      placeholder="Name"
                      v-model="nodename"
                    >
                </div> <!-- coll -->

                <div class="col-3  pr-md-1" >



                   <ValidationProvider name="nodeid" rules="required|alpha_num"  ref="provider" 
                      v-slot="{ valid, errors, ariaMsg, ariaInput }"
                    v-if="nodeadminupdate"
                   >
                      <input type="text" 
                        class="form-control" 
                        aria-label="Small" aria-describedby="inputGroup-sizing-sm"
                        placeholder="NodeId"
                        disabled
                        v-model="nodeid"
                        >
                    </ValidationProvider>
                   <ValidationProvider name="nodeid" rules="required|alpha_num"  ref="provider" 
                      v-slot="{ valid, errors, ariaMsg, ariaInput }"
                        v-else
                   >
                      <input type="text" 
                        class="form-control" 
                        aria-label="Small" aria-describedby="inputGroup-sizing-sm"
                        placeholder="NodeId"
                        v-model="nodeid"
                        data-vv-as='"Node id"'
                        data-vv-value-path="nodeid"
                        data-vv-name="nodeid"
                        >
                        <span>{{ errors[0] }}</span>
                    </ValidationProvider>
                </div> <!-- coll -->

                <div class="col-3  pr-md-1" >
                  <input type="text" 
                    class="form-control" 
                    aria-label="Small" aria-describedby="inputGroup-sizing-sm"
                    placeholder="IP"
                    v-model="nodeip"
                    >
                </div> <!-- coll -->
              </div> <!-- row -->

          <!-- add newROW ----------------------------------------------------  -->
              <div class="row" >
                <div class="col-3 order-first pr-md-1" >
                  <input type="text" 
                    class="form-control" 
                    aria-label="Small" aria-describedby="inputGroup-sizing-sm"
                    placeholder="Role"
                    v-model="noderole"
                    >
                </div> <!-- coll -->

                <div class="col-3 pr-md-1" >
                  <input type="text" 
                    class="form-control" 
                    aria-label="Small" aria-describedby="inputGroup-sizing-sm"
                    placeholder="Zones"
                    v-model="nodezones"
                    >
                </div> <!-- coll -->

                <div class="col-3  pr-md-1" >
                  <input type="text" 
                    class="form-control" 
                    aria-label="Small" aria-describedby="inputGroup-sizing-sm"
                    placeholder="nodedesc"
                    v-model="nodedesc"
                    >
                </div> <!-- coll -->
              </div> <!-- row -->

          <!-- add newROW ----------------------------------------------------  -->
              <div class="row" >
                <div class="col-2  pr-md-1" >
                  <div class="input-group input-group-sm sm-3">
                    <div class="input-group-append">

                      <button 
                        class="btn btn-outline-primary" 
                        round
                        type="button"
                        v-if="nodeadminupdate"
                        @click="onAction('update')">
                       update</button>
                      <button 
                        class="btn btn-outline-primary" 
                        round
                        type="button"
                        v-else
                        @click="onAction('addserver')">
                       add</button>
                    </div>

                    <div class="input-group-append">
                      <button class="btn btn-outline-secondary" 
                        round
                        type="button"
                        @click="onAction('cancel')"
                       >
                        Cancel</button>
                    </div>
                  </div>
                </div> <!-- coll -->
               </div> <!-- row -->
              </card> <!-- card -->
          <!-- add newNODE -->

              <div class="white h-100 flex-fixed-width-item"
                <vuetable 
                  ref="vuetable"
                  :key="vuetablekeyc"
                  :api-url='apiurl'
                  :api-mode="true"
                  :http-options="httpOptions"
                  :fields="fields"
                  :item-actions="itemActions"
                  :sort-order="sortOrder"
                  :show-sort-icons="true"
                  :multi-sort="multiSort"
                  :per-page="perpage"
                  pagination-path="links.pagination"
                  :pagination-component="paginationComponent"
                  :append-params="moreParams"
                  wrapper-class="vuetable-wrapper"
                  loading-class="loading"
                  detail-row-id="id"
                  @vuetable:pagination-data="onPaginationData"
                  @vuetable:load-success="loadsuccess"
                  @vuetable:load-error="onLoadError"
                  :css="css.table"
                   >
                 <template slot="actions" slot-scope="props">
                  <div class="table-button-container">
                    <button 
                      class="ti-pencil btn btn-outline-secondary btn-sm"
                      @click="onAction('edit', props.rowData, props.rowIndex)"
                     >
                      </button>
                    <button 
                        round
                        class="ti-trash btn btn-outline-secondary btn-sm"
                        @click="onAction('rm', props.rowData, props.rowIndex)"
                     >
                      </button>

                  </div>
                </template>
                </vuetable>
                <div class="vuetable-pagination ui basic segment grid">
                  <vuetable-pagination-info 
                    ref="paginationInfo"      
                    :css="css.paginationInfo"
                    >
                  </vuetable-pagination-info>
                  <vuetable-pagination 
                    :css="css.pagination"
                    ref="pagination"
                    @vuetable-pagination:change-page="onChangePage"
                    >
                  </vuetable-pagination>
                </div>









      </b-container>
  </card>
</template>
<script>
import store from '@/store/index'
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
import Vue from 'vue'
import {Vuetable, VuetablePaginationDropdown} from 'vuetable-2'
import card from '@/components/Card.vue'
import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo'
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
import CssConfig from 'vuetable-2/src/components/VuetableCssConfig.js'
import {ApiConfig} from "@/config/index";
import { extend } from 'vee-validate';
import { required, alpha_num } from 'vee-validate/dist/rules';

// No message specified.
extend('alpha_num', alpha_num);

// Override the default message.
extend('required', {
  ...required,
  message: 'This field is required'
});
export default {
  components: {
      card,
	    Vuetable,
			VuetablePagination,
			VuetablePaginationInfo,
			VuetablePaginationDropdown
	},
  props: {
  },
  data() {
   return{
    token: '',
    valid:false,
    nodeadmin:false,
    nodeadminupdate:false,
    rowdata:{},
    nodename:'',
    nodeid:'',
    nodeip:'',
    noderole:'',
    nodezones:'',
    nodedesc:'',
	  playbookInfo: {},
    token: '',
	  playbook: {
			'title':'',
			'name':'',
			'description':''
		},
			container:{
				name:'',
				view:0
			},
			pipeline:{},
 		selected: '',
    options: [
      { text: 'Packages', value: 'packages' },
      { text: 'Images', value: 'images' },
      { text: 'Scripts', value: 'scripts' }
    ],
		showModal: false,
		visibility: [],
	 	active:false,
		vuetablekeyc:0,
		fielddata:{},
		fields: [ 
          {
        name: 'name',
        title: '<span class="orange"></span>Name',
        sortField: 'name',
        titleClass: 'text-center aligned',
        visible:true,
          dataClass: "center aligned",
        width: '20%'
      },
      {
        name: 'nodeid',
        title: '<span class="text-warning">nodeid</span>',
        titleClass: 'text-center aligned',
        sortField: 'nodeid',
        visible:true,
        width: '20%'
      },
      {
        name: 'ip',
        title: '<span class="orange"></span>IP',
        titleClass: 'text-center aligned',
        sortField: 'swarmlabname',
        visible:true,
        width: '13%'
      },
      {
        name: 'role',
        title: '<span class="orange"></span>Role',
        titleClass: 'text-center aligned',
        sortField: 'role',
        visible:true,
        width: '15%',
        formatter (value) {
          const result = /^ondemand_playground/.test(value);
          if (result) {
              var v = '<p class="text-warning">Playground</p>'
              return v
          }else{
              var v = '<p class="text-info">Lab</p>'
              return v
          }
        }

      },
      {
        name: 'zones',
        title: '<span class="text-warning">Zones</span>',
        sortField: 'zones',
        titleClass: 'text-center aligned',
        visible:true,
        width: '20%'
      },
      {
        name: 'status',
        title: '<span class="orange"></span>Status',
        titleClass: 'text-center aligned',
        sortField: 'status',
        visible:true,
        width: '5%'
      },
      {
        name: '__slot:actions',
        title: 'Actions',
        titleClass: 'text-center aligned',
        dataClass: "text-center aligned",
        width: '10%'
      },
      {
        name: '_id',
        title: '<span class="orange"></span>mongo',
        visible:false
      }
		],
		//apiurl:ApiConfig.url_80+"/swarmlabservices",
		apiurl:ApiConfig.swarmlab_url_80+"/getswarmlabhybrid",
		css: CssConfig,
    perpage: 9,
    searchFor: '',
		sortOrder: [{
				field: 'pipelinename',
				direction: 'asc'
		}],
    multiSort: true,
    paginationComponent: 'vuetable-pagination',
		itemActions: [
				{ name: 'view-item', label: '', icon: 'glyphicon glyphicon-zoom-in', class: 'btn btn-info', extra: {'title': 'View', 'data-toggle':"tooltip", 'data-placement': "left"} },
				{ name: 'edit-item', label: '', icon: 'glyphicon glyphicon-pencil', class: 'btn btn-warning', extra: {title: 'Edit', 'data-toggle':"tooltip", 'data-placement': "top"} },
				{ name: 'delete-item', label: '', icon: 'glyphicon glyphicon-remove', class: 'btn btn-danger', extra: {title: 'Delete', 'data-toggle':"tooltip", 'data-placement': "right" } }
		],
		moreParams: { 
				'filter':  '',
				'type':  'hybrid'
			},
		}
  },
	mounted() {
	},
	created() {
    var url_string = window.location.href
    var url = new URL(url_string);
    this.token = url.searchParams.get("token");
    //console.log("token "+ this.token);

	},
    beforeDestroy () {
 },
  computed: {
		httpOptions() {
			var token = this.token
			    var p="headers: {Authorization: token}}"; //table props -> :http-options="httpOptions"
			    return {headers: {Authorization: 'Bearer ' + token}} //table props -> :http-options="httpOptions"
	  },

	},

  methods: {
   onError (type,description) {
                    var winfo=description
                    var info='<h5>Bootstrap '+type+'</h5>'
                    this.$swal({
                      type: type,
                      html: info+winfo,
                      showCloseButton: true,
                      showLoaderOnConfirm: false,
                      allowOutsideClick: false,
                      cancelButtonText: 'No, cancel!',
                      showCancelButton: false,
                      showLoaderOnConfirm: false,
                      reverseButtons: true,
                      focusCancel: true,
                      confirmButtonText: 'Ok!'
                      })
    },


		setFilter () {
				this.moreParams = {
						'filter':  this.searchFor,
						'type':    this.selected
				}
        Vue.nextTick( () => this.$refs.vuetable.refresh())
		},
		resetFilter () {
				this.moreParams = {}
				this.searchFor = ''
        Vue.nextTick( () => this.$refs.vuetable.refresh())
		},
   onPaginationData (paginationData) {
      this.$refs.pagination.setPaginationData(paginationData)
			this.$refs.paginationInfo.setPaginationData(paginationData) 
    },
    onChangePage (page) {
      this.$refs.vuetable.changePage(page)
    },
    editRow(rowData) {
      alert("You clicked edit on"+ JSON.stringify(rowData));
		},
    async onAction (action, data, index) {
        var log1 = await store.dispatch("pipelineLLO/swarmlabhybridjoin",{
                token:this.token,
                action:'join'
              })
         //console.log(JSON.stringify(log1))

			if(action == 'edit' ){
        this.nodeadmin = true    
        this.nodeadminupdate = true    
          this.nodeid = data.nodeid
          this.nodeip = data.ip
          this.nodename = data.name
          this.noderole = data.role
          this.nodezones = data.zones
          this.nodedesc = data.description
         //console.log(JSON.stringify(data))
         //console.log(JSON.stringify(index))
			}else if(action == 'update' ){
        await this.$refs.provider.validate().then(success => {
          if (success.valid) {
            this.valid = true
            //console.log('valid '+JSON.stringify(success))
          }else{
            this.valid = false
            //console.log('no valid'+JSON.stringify(success))
          }
        });
        if (this.valid) {
            var log = await store.dispatch("pipelineLLO/swarmlabhybridadd",{
                    token:this.token,
                    action:'add',
                  nodeid:     this.nodeid,
                  nodeip:     this.nodeip,
                  nodename:   this.nodename,
                  noderole:   this.noderole,
                  nodezones:  this.nodezones,
                  nodedesc:   this.nodedesc
                  })
                //console.log(this.nodename)
                //console.log(this.nodeid)
                //console.log(this.nodeip)
                //console.log(this.noderole)
                //console.log(this.nodezones)
                //console.log(this.nodedesc)
            Vue.nextTick( () => this.$refs.vuetable.refresh())
        }
			}else if(action == 'rm' ){
        this.rowdata = data
				this.$swal({
					type: 'info',
					html: 'info',
					showCloseButton: true,
					showLoaderOnConfirm: false,
					allowOutsideClick: false,
					 cancelButtonText: 'No, cancel!',
					showCancelButton: true,
					showLoaderOnConfirm: false,
					reverseButtons: true,
					focusCancel: true,
					confirmButtonText: 'Yes, Delete it!'
					}).then((result)=> {
              this.rmAndClose(result);
            })

			}else if(action == 'add' ){
        this.nodeadmin = true    
        this.nodeadminupdate = false 
			}else if(action == 'addserver' ){
        await this.$refs.provider.validate().then(success => {
          if (success.valid) {
            this.valid = true
            //console.log('valid '+JSON.stringify(success))
          }else{
            this.valid = false
            //console.log('no valid'+JSON.stringify(success))
          }
        });

       if (this.valid) {
            this.nodeadmin = false
            this.nodeadminupdate = false 
            var log = await store.dispatch("pipelineLLO/swarmlabhybridadd",{
                    token:this.token,
                    action:'add',
                  nodeid:     this.nodeid,
                  nodeip:     this.nodeip,
                  nodename:   this.nodename,
                  noderole:   this.noderole,
                  nodezones:  this.nodezones,
                  nodedesc:   this.nodedesc
                  })
            Vue.nextTick( () => this.$refs.vuetable.refresh())
             //console.log(JSON.stringify(log))
        }
			}else if(action == 'cancel' ){
        this.nodeadmin = false
        this.nodeadminupdate = false 
      }
    },
    async rmAndClose(result) {
            var log = await store.dispatch("pipelineLLO/getswarmlabhybridinfo",{
                token:this.token,
                nodezones:  this.rowdata.zones
              })
        if(result.value){
            var log = await store.dispatch("pipelineLLO/swarmlabhybridrm",{
                token:this.token,
                action:'rm',
              nodeid:     this.rowdata.nodeid,
              nodeip:     this.rowdata.ip,
              nodename:   this.rowdata.name,
              noderole:   this.rowdata.role,
              nodezones:  this.rowdata.zones,
              nodedesc:   this.rowdata.description
              })
            Vue.nextTick( () => this.$refs.vuetable.refresh())
            //console.log(JSON.stringify(result))
         //console.log('rowdara '+JSON.stringify(this.rowdata))

        }
      },
    async addAndClose(result) {

      },
    refreshVuetable() {
			this.$nextTick(()=>{
					this.vuetablekeyc += 1
				})
      },
		playbookinfoShow(value) {
				return this.visibility[value]=true
		},
		playbookinfo(value) {
				return this.playbookInfo=value
		},
		rowClicked(row, event) {
			return {
				html: true,
				title: () => { return 'Hello <b>Popover:</b> ' + (++this.counter) },
				content: () => { return 'The date is:<br><em>' + new Date() + '</em>' }
			}
		},
		loadsuccess(response) {
				var data = response.data.data
				this.fielddata=data
				if(data.length){
					var n = data.length
					n=n-1
				}
			},
      onLoadError(payload) {
          /*
          //error2 "invalid_token" join-service.vue:684
          //error2 "The access token provided has expired" join-service.vue:685
          //error2 "Unauthorized" join-service.vue:686
          //error2 401
        */
        if(payload.response.status == '401'){
          window.location.href = 'https://api-login.swarmlab.io:8089';
          Vue.nextTick( () => window.location.href = 'https://api-login.swarmlab.io:8089')
        }
      }


  },


  actions: {


	}

};
</script>
<style>
.flex-fixed-width-item {
    flex: 0 0 100px;
		}
.modalinfo {
  z-index: 10000000 !important;
	position:fixed;
}
/* a container with flex-direction column */

.vue-notifyjs.notifications{
  .alert{
   z-index: 100;
  }
  .list-move {
    transition: transform 0.3s, opacity 0.4s;
  }
  .list-item {
    display: inline-block;
    margin-right: 10px;

  }
  .list-enter-active {
    transition: transform 0.2s ease-in, opacity 0.4s ease-in;
  }
  .list-leave-active {
    transition: transform 1s ease-out, opacity 0.4s ease-out;
  }

  .list-enter {
    opacity: 0;
    transform: scale(1.1);

  }
  .list-leave-to {
    opacity: 0;
    transform: scale(1.2, 0.7);
  }
}

pre {
  //background-color: rgb(255, 247, 229);
  background-color: #eff0f1;
	  border: 1px solid blue;
		  //white-space: pre-line;
			}

</style>
