|
@@ -1,132 +0,0 @@
|
|
|
-<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>
|