123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- <template>
- <b-overlay :show="loading" rounded="sm" class="h-100">
- <div class="d-flex flex-column h-100 px-4 py-3">
- <div id="maps">
- <div>
- <h4>Carte avec duplication</h4>
- <div class="node-map">
- <node-map
- v-if="data"
- v-bind="mapSingle"
- :show-id="showId"
- />
- </div>
- </div>
- <div>
- <h4>Carte avec liens multiples</h4>
- <div class="node-map">
- <node-map
- v-if="data"
- v-bind="mapMany"
- :show-id="showId"
- id="map-2"
- />
- </div>
- </div>
- </div>
- <b-form class="mt-4">
- <b-form-group label="Texte de départ :" label-cols="2" class="mb-2">
- <b-form-select
- v-model="textId"
- @input="query"
- :options="textsDepartOptions"
- />
- </b-form-group>
- <b-form-group label="Profondeur :" label-cols="2" class="mb-2">
- <b-form-spinbutton
- v-model="depth"
- @input="query"
- min="0" max="6"
- inline
- />
- </b-form-group>
- <b-form-checkbox v-model="showId" name="check-button" switch>
- Afficher les numéros
- </b-form-checkbox>
- </b-form>
- </div>
- </b-overlay>
- </template>
- <script>
- import { mapGetters } from 'vuex'
- import NodeMap from '@/components/NodeMap'
- import { toSingleManyData, toManyManyData } from '@/helpers/d3Data'
- export default {
- name: 'Home',
- components: {
- NodeMap
- },
- data () {
- return {
- loading: false,
- textId: undefined,
- showId: true,
- depth: 3,
- data: null,
- mapSingle: { nodes: null, links: null },
- mapMany: { nodes: null, links: null }
- }
- },
- computed: {
- ...mapGetters(['textsDepartOptions'])
- },
- methods: {
- query () {
- const { textId: id, depth } = this
- this.data = null
- this.loading = true
- this.$store.dispatch('GET_TREE_WITH_DEPTH', { id, depth }).then((data) => {
- this.mapSingle = toSingleManyData(data)
- this.mapMany = toManyManyData(data)
- this.data = data
- this.loading = false
- })
- }
- },
- created () {
- this.loading = true
- this.$store.dispatch('GET_TEXTS_DEPART').then(textsDepart => {
- this.textId = textsDepart[0].id
- })
- }
- }
- </script>
- <style lang="scss" scoped>
- #maps {
- width: 100%;
- height: 100%;
- display: flex;
- & > div {
- flex-basis: 50%;
- display: flex;
- flex-direction: column;
- & + div .node-map {
- border-left: none;
- }
- }
- .node-map {
- height: 100%;
- border: 1px solid grey;
- }
- }
- .col > * {
- width: auto;
- }
- </style>
|