How to display cards based on data passed to an array (maybe Vuex)?

K

Kiril Kharkevich2019-01-14 15:21:12

Vue.js

Kiril Kharkevich, 2019-01-14 15:21:12

Please tell me how to solve the problem. At the moment I am outputting data to cards, I get data using axios get-request from the firebase database. And now the following is needed, I have a menu with devices, each has its own unique id, there is a checkbox next to each device, when a specific device is selected, the data that is assigned to it is written to the selected array. It is necessary to implement a method that will be called when the button is pressed (and display the data in the selected array in the cards, and not send a request to the database).
Code for outputting data to cards:

<template>
<div class="card-expansions">
  <form @submit.prevent="fetchData">
     <div class="submit">
          <md-button  type="submit"><md-icon>view_module</md-icon>Відобразити картки</md-button>
          </div>
<div class="md-layout-item" >
  <div  class="card-expansion md-layout-item" v-for="{ id, named, location, napruga } in devices" :key="id">
    <md-card md-with-hover>
      <md-card-media>
           <md-card-header class="md-card-header-fix">
              <div class="md-title" style="font-size: 18px; text-align: center;" v-bind:title="nazvahint">{{named}}</div>
              <div class="md-subhead" style="font-size: 14px; text-align: center;" v-bind:title="locationhint"><md-icon>location_on</md-icon>{{location}}-{{napruga}}</div>
            </md-card-header>
              <table border="1" class="tablefont" >
                <tr class="trheight">
                  <th class="left-down" v-bind:title="Ppotuzhnist" valign="bottom">P=100</th>
                  <th class="middle-top" v-bind:title="Qpotuzhnist" valign="top">Q=200</th>
                  <th class="right-down" v-bind:title="Spotuzhnist" valign="bottom">S=300</th>
               </tr>
              </table>
        <md-button v-bind:title="statered" style="background-color:red" class="md-fab md-primary md-mini" ></md-button>
      </md-card-media>


      <md-card-expand>
        <md-card-actions md-alignment="space-between">
          <div>
            <md-button class="buttoncard md-primary">все</md-button>
          </div>

          <md-card-expand-trigger>
            <md-button class="buttoncard md-primary" ><md-icon>keyboard_arrow_down</md-icon>Параметри</md-button>
          </md-card-expand-trigger>
        </md-card-actions>

        <md-card-expand-content>
          <md-card-content>
            <param-devices></param-devices>
          </md-card-content>
        </md-card-expand-content>
      </md-card-expand>
    </md-card>
  </div>
</div>
  </form>
</div>

</template>

<script>
import ParamDevices from "~/components/ParamDevices.vue";
import Axiospost from "~/components/ParamDevices.vue";
import axios from 'axios';
import { SSL_OP_ALL } from 'constants';


  export default {
    name: 'LayoutHorizontalColumns',
    name: 'CardExpansion',
    name: 'FloatingButtons',
     data () {
      return {
        named: '',
        napruga: null,
        location: '',
        devices:[],
        Ppotuzhnist: 'P - активна потужність ',
        Qpotuzhnist: 'Q - реактивна потужність',
        Spotuzhnist: 'S - повна потужність',
        statered: 'Пристрій вимкнено',
        nazvahint: 'Назва пристрою',
        locationhint: 'Геолокаційне місце розташування пристрою'
      }
    },
    components: {
    ParamDevices,
  },
    methods: {
      fetchData () {
        this.menuVisible = !this.menuVisible;
      axios.get('https://db-http.firebaseio.com/devices.json')
     .then(res => {
          console.log(res)
          const data = res.data
          const devices = []
          for (let key in data) {
            const device = data[key]
            device.id = key
            devices.push(device)
          }
         this.devices = Object.entries(res.data).map(([ id, n ]) => ({ ...n, id }));
        })
        .catch(error => console.log(error))
    },
    }
  }
</script>

Menu code:

<template>
    
      <!-- <div class="container">
         
         <md-toolbar class="md-accent" md-elevation="1">
        <md-button class="md-icon-button" @click="toggleMenu" v-if="!menuVisible">
          <md-icon>menu</md-icon>
        </md-button>
         <nuxt-link class="md-title" style="flex: 1" to="/"><md-icon>gesture</md-icon>ІНОВІНПРОМ "МОНІТОРИНГ"</nuxt-link>
          <md-button v-on:click="fetchData"><md-icon>refresh</md-icon>Оновити</md-button>
          <formauth></formauth>
           
    </md-toolbar>
   
       </div>-->
         <div class="page-container">
    <md-app>
      <md-app-toolbar class="md-primary" > 
        <md-button class="md-icon-button" @click="toggleMenu" v-if="!menuVisible">
          <md-icon>menu</md-icon>
        </md-button>
        <nuxt-link class="md-title" style="flex: 1" to="/"><md-icon>gesture</md-icon>ІНОВІНПРОМ "МОНІТОРИНГ"</nuxt-link>
          <md-button><md-icon>refresh</md-icon>Оновити</md-button>
          <formauth></formauth>
          
      </md-app-toolbar>

      <md-app-drawer :md-active.sync="menuVisible" md-persistent="full">
        <md-toolbar class="md-transparent" md-elevation="0">
          <span><md-icon>list</md-icon>Меню</span>

          <div class="md-toolbar-section-end">
            <md-button class="md-icon-button md-dense" @click="toggleMenu">
              <md-icon>keyboard_arrow_left</md-icon>
            </md-button>
          </div>
        </md-toolbar>

        <md-list>
          <md-list-item class="general"  @click="showAllDevices">
            <md-icon>settings_input_composite</md-icon>
            <span class="md-list-item-text">Всі пристрої</span>
          </md-list-item>

          <md-list-item md-expand>
            <md-icon>touch_app</md-icon>
            <span  class="md-list-item-text" >Пристрій</span>
            <md-list  slot="md-expand">
            <md-table v-model="devices" md-card @md-selected="onSelect">
  
      <md-table-row slot="md-table-row" slot-scope="{ item }" :md-disabled="item.named.includes('Stave')" md-selectable="multiple" md-auto-select>
        <md-table-cell md-label="Обрати всі пристрої">{{ item.named }}</md-table-cell>
      </md-table-row>
    </md-table>
          </md-list>
          </md-list-item>
  <tr>
        <td>{{ selected }}</td>
      </tr>
          
        </md-list>
      </md-app-drawer>

      <md-app-content>
        <div class="md-layout md-layout">
          <vkladky v-show="showForm"></vkladky>
          <!--<testcard v-show="showForm"></testcard>-->
          
          </div>
      </md-app-content>
    </md-app>
  </div>
  
</template>

<script>
import Formauth from "~/components/Formauth.vue";
import Devices from "~/components/Devices.vue";
import Menu from "~/components/Menu.vue";
import Axiospost from "~/components/ParamDevices.vue";
import axios from 'axios';
import Testcard from "~/components/TestCard.vue";
import Vkladky from "~/components/Vkladky.vue";
import { SSL_OP_ALL } from 'constants';
export default {
  name: 'ContentActions',
  name: 'PersistentFull',
  name: 'RegularSwitch',
  components:{
      Formauth,
      Devices,
      Testcard,
      Vkladky,
      Menu
 },
 data: () => ({
      menuVisible: false,
      expandNews: false,
        expandSingle: false,
        expandDevice: false,
        named: '',
        napruga: null,
        location: '',
        devices:[],
        showForm : false,
        visible :false,
        selected: [],
      boolean: false,
      string: null,
      novalue: null,
      disabled: true,
    }),
  methods: {
      toggleMenu () {   // отримання json-a з інформацією з фаєрбейса
        this.menuVisible = !this.menuVisible;
        axios.get('https://db-http.firebaseio.com/devices.json')
     .then(res => {
          console.log(res)
          const data = res.data
          const devices = []
          for (let key in data) {
            const device = data[key]
            device.id = key
            devices.push(device)
          }
         this.devices = Object.entries(res.data).map(([ id, n ]) => ({ ...n, id }));
        })
        .catch(error => console.log(error))
    },
    showAllDevices : function(){
    this.showForm = !this.showForm;
  },
  onSelect (items) {        //вибір чекбоксів пристроїв в меню
        this.selected = items
      },
      getAlternateLabel (count) {
        let plural = ''

        if (count > 1) {
          plural = 's'
        }

        return `${count} user${plural} selected`
      }
      }
    

};
 
</script>

Screenshots: