<template>
  <div
    class="grid"
  >
    <ConfigEditor
      :config="config"
      :template="template"
    />
    <ViewComponent
      v-for="(item,key) of config"
      :key="key"
      :config="item"
      :data="parsed_log"
    />
  </div>
</template>

<script>
import Vuex from 'vuex';
import ViewComponent from '../components/ViewComponent.vue';
import ConfigEditor from '../components/ConfigEditor.vue';
import default_config from '../default';
import default_template from '../template';

export default {
  components: { ViewComponent, ConfigEditor },
  data () {
    return {
      config:   default_config,
      template: default_template
    };
  },
  computed:   {
    parsed_log () {
      return this.log.map ((l) => {
        l.data = JSON.parse (l.data);
        return l;
      });
    },
    ...Vuex.mapState ({ log: (state) => state.log })
  },
  mounted () {
    this.get_log ();
  },
  methods: { ...Vuex.mapActions ({ get_log: 'get_log' }) }
};
</script>

<style scoped>
.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

p {
  display: inline-block;
}
</style>
