content.vue

<template lang="html">

  <section class="content" :style="style">
    <v-flex lg12>
      <v-layout row wrap >

        <v-flex lg12 class="v-padding">
            <div id="webgl" :style="mapStyle"></div>
            <v-btn
              absolute
              dark
              fab
              bottom
              right
              color="blue darken-4"
              @click="$_fullScreen()"
              v-tooltip.right="fullscreenmessage" 
              style="z-index: 1;"
            >
              FS
            </v-btn>
        </v-flex>

        <v-flex lg12 v-if="contentData.filterSearch">
          <v-layout row wrap >
            <v-flex lg2 class="v-padding" v-for="(item, index) in contentData.statistics" :key="index">
              <v-card>
                <v-card-title>
                  <v-avatar style="margin-left:-10px;">
                    <img :src="item.icon">
                  </v-avatar>
                  <div style="margin-left: 5px;">
                    <span class="headline">{{ item.number }}</span><br>
                    <small>{{ item.name }}</small>
                  </div>
                </v-card-title>
              </v-card>
            </v-flex>
          </v-layout> 
        </v-flex>

        <v-flex lg12 class="v-padding">
          <v-card>
            <v-layout row wrap >
              <template v-for="x in [filteredItems]">
                <v-flex lg12>
                  <v-data-table :headers="contentData.headers" :items="x" class="elevation-1 white" hide-actions :pagination.sync="contentData.pagination">
                    <template slot="items" slot-scope="props" >
                      <td @click="$_getProfileInfo()" class="pointer">{{ props.item.id }}</td>
                      <td @click="$_getProfileInfo()" class="pointer text-xs-right">{{ props.item.name }}</td>
                      
                      <td v-show="$_get(props.item.gender)" class="text-xs-right">{{ props.item.age }}</td>
                      <td v-show="$_get(props.item.gender)">{{ props.item.gender }}</td>
                      <td v-show="$_get(props.item.gender)">{{ props.item.civil_status }}</td>
                      <td v-show="$_get(props.item.gender)" class="text-xs-right">{{ props.item.spouse }}</td>
                      <td v-show="$_get(props.item.gender)" class="text-xs-right">{{ props.item.no_of_child }}</td>
                      <td v-show="$_get(props.item.gender)">{{ props.item.tribe }}</td>
                      <td v-show="$_get(props.item.gender)">{{ props.item.religion }}</td>
                      <td v-show="$_get(props.item.gender)">{{ props.item.highest_educational_attainment }}</td>
                      
                      <td v-show="$_get(props.item.gender)" class="text-xs-right">{{ props.item.monthly_income }}</td>
                      <td v-show="$_get(props.item.gender)">{{ props.item.other_src_income }}</td>
                      <td v-show="$_get(props.item.gender)">{{ props.item.ip_non_ip }}</td>
                      <td v-show="$_get(props.item.gender)">{{ props.item.reg_voter }}</td>
                      <td v-show="$_get(props.item.gender)">{{ props.item.member_org }}</td>
                    </template>
                  </v-data-table>
                </v-flex>
                <!-- <v-flex lg6 class="text-xs-left v-padding">
                    <v-btn color="primary">View All</v-btn>
                </v-flex >
                <v-flex lg6 class="text-xs-right v-card-padding">
                    <v-pagination
                      v-model="contentData.pagination.page"
                      :length="pages"
                      :next-icon="null"
                      :prev-icon="null"
                      circle
                    ></v-pagination>
                </v-flex > -->
              </template>
            </v-layout> 
            </v-card>
        </v-flex>

        <v-flex md12 lg12 class="v-padding"  v-if="contentData.filterSearch">
          <v-card>
            <v-card-title>
              <strong>Barangay</strong>
            </v-card-title>
            <v-divider></v-divider>
            <chartjs-line :labels="contentData.mylabels" :datasets="contentData.mydatasets" v-bind:option="contentData.myDataOption" :height="50"></chartjs-line>
          </v-card>
        </v-flex>

        <v-flex lg6 class="v-padding" v-if="contentData.filterSearch">
          <v-card>
            <v-card-title>
              <strong>Income</strong>
            </v-card-title>
            <v-divider></v-divider>
            <chartjs-bar :labels="contentData.myIncomeLabels" :height="100" :datasets="contentData.myIncomeDataSets"></chartjs-bar>
          </v-card>
        </v-flex>

        <v-flex lg6 class="v-padding" v-if="contentData.filterSearch">
          <v-card>
            <v-card-title>
              <strong>Gender Distribution by Educational Level</strong>
            </v-card-title>
            <v-divider></v-divider>
            <chartjs-bar :labels="contentData.myAgeAndGenderLabels" :height="100" :datasets="contentData.myAgeAndGenderDataSets"></chartjs-bar>
          </v-card>
        </v-flex>

        <v-flex lg4 class="v-padding" v-if="contentData.filterSearch">
          <v-card>
            <v-card-title>
              <strong>4PS</strong>
            </v-card-title>
            <v-divider></v-divider>
            <chartjs-polar-area :labels="contentData.pieMylabels" :datasets="contentData.pieMydata" :height="200"></chartjs-polar-area>
          </v-card>
        </v-flex>

        <v-flex lg4 class="v-padding" v-if="contentData.filterSearch">
          <v-card>
            <v-card-title>
              <strong>Blood Type</strong>
            </v-card-title>
            <v-divider></v-divider>
            <chartjs-bar :labels="contentData.myBloodTypeLabels" :height="200" :datasets="contentData.myBloodTypeDataSets"></chartjs-bar>
          </v-card>
        </v-flex>

        <v-flex lg4 class="v-padding" v-if="contentData.filterSearch">
          <v-card>
            <v-card-title>
              <strong>Disaster Vulnerability</strong>
            </v-card-title>
            <v-divider></v-divider>
            <chartjs-pie :labels="contentData.pieDisasterVulnerability" :datasets="contentData.pieDisasterVulnerabilityMydata" v-bind:option="contentData.myoption" :height="200"></chartjs-pie>
          </v-card>
        </v-flex>

      </v-layout>  
    </v-flex>
  </section>
</template>

<script lang="js">
  import EventBus from '../event-bus'
  import { Data } from '../staticdata/content'
  import store from '../store'

  // 3rd party
  // import '../GEOIP/Qgis2threejs.css'
  // import Q3D from '../GEOIP/Qgis2threejs.js'
  // import '../GEOIP/threejs/OrbitControls.js'
  // import '../GEOIP/threejs/loaders/ColladaLoader.js'
  // import { sData } from '../staticdata/testcolladaData'

  // Vue.use(Q3D)
  export default {
    name: 'content',
    props: {},
    mounted () {
      store.dispatch('LOAD_PROJECT_LIST')
      EventBus.$on('EVENT_SHOW_RESULT', this.$_showSearchResult.bind(this))
      // EventBus.$on('FILTERED_ITEMS', this.$_filter.bind(this))
      // this.$_inInit()
    },
    data () {
      return {
        contentData: null,
        testColladaArray: null,
        reactiveData: false,
        another: './GEOIP2/Filter.vue',
        style: 'height: 390px; position: relative;',
        mapStyle: 'overflow:hidden; height:420px; width: 100%; border:none;',
        isClicked: false,
        fullscreenmessage: 'Full Screen'
      }
    },
    methods: {
      $_getProfileInfo: function () {
        EventBus.$emit('SHOW_PROFILE')
      },
      $_showSearchResult: function (eventData) {
        this.contentData.eventData = eventData
        this.$_summarySearch()
      },
      $_summarySearch: function () {
        if (this.contentData.filterSearch === true) {
          this.contentData.filterSearch = false
        } else {
          this.contentData.filterSearch = true
        }
      },
      $_filter: function (eventData) {
        if ((eventData === 'Male') || (eventData === 'A')) {
          this.contentData.evFilter = eventData
        } else if ((eventData === 'Female') || (eventData === 'AB')) {
          this.contentData.evFilter = eventData
        } else {
          this.contentData.evFilter = ''
        }
      },
      $_get: function (gender) {
        if (this.contentData.evFilter === '') {
          return true
        } else if ((this.contentData.evFilter !== '') && (this.contentData.evFilter === gender)) {
          return true
        }
      },
      $_fullScreen: function () {
        if (this.isClicked === false) {
          this.style = 'height: 840px; position: relative;'
          this.mapStyle = 'overflow:hidden; height:870px; width: 100%; border:none;'
          this.fullscreenmessage = 'Show Original'
          this.isClicked = true
        } else {
          this.style = 'height: 390px; position: relative;'
          this.mapStyle = 'overflow:hidden; height:420px; width: 100%; border:none;'
          this.fullscreenmessage = 'Full Screen'
          this.isClicked = false
        }
      },
      threads: function () {
        console.log('1st ni dapat')
        return store.state.projects
      },
      $_inInit: function () {
        // let container = document.getElementById('webgl')
        // let app = Q3D.application
        // app.init(container)

        /*eslint-disable */
        // let project = new Q3D.Project({crs:"EPSG:32651",wgs84Center:{lat:6.48823299847,lon:125.570777158},proj:"+proj=utm +zone=51 +datum=WGS84 +units=m +no_defs",title:"testcollada",baseExtent:[781767.427062,716639.176741,786905.932988,719153.966277],rotation:0,zShift:5.0,width:100.0,zExaggeration:1.0});
        /*eslint-disable */
        // let lyr = project.addLayer(new Q3D.DEMLayer({ q: 1, shading: true, type: "dem", name: "UpdatedFebSatellite" }));
        // let bl = lyr.addBlock({ frame: true, m: 0, height: 420, width: 858, plane: { width: 100.0, offsetX: 0, offsetY: 0, height: 48.9400921659 }, sides: true }, false);
        // bl.data = this.testColladaArray
        // app.loadProject(project)
        // app.addEventListeners()
        // app.start()
      }
    },
    computed: {
      threads () { return store.state.projects },
      
      filteredItems () {
        let f = this.contentData.eventData
        let items = this.threads
        console.log(items)
        // console.log(this.functi)
        // let result = []
        // Object.keys(items).forEach(key => {
        //   const item = items[key]
        //   result[key] = item
        // })
        // console.log(this.threads)
        // return this.threads.results.filter(function (cust) {
        //   return cust.name.toLowerCase().indexOf(f) >= 0
        // })
      },
      // pages () {
      //   return this.contentData.pagination.rowsPerPage ? Math.ceil(this.filteredItems.length / this.contentData.pagination.rowsPerPage) : 0
      // }
    },
    created () {
      this.contentData = Data
    },
    beforeCreate () {
      
    }
}
</script>

<style scoped lang="stylus">
</style>