|
@@ -1,16 +1,50 @@
|
|
|
<template>
|
|
|
- <div id="map">
|
|
|
- <node-map class="node-map" v-if="data" v-bind="one" />
|
|
|
- <node-map
|
|
|
- class="node-map" v-if="data2" v-bind="two"
|
|
|
- id="ùmqsldùml"
|
|
|
- />
|
|
|
+ <div class="d-flex flex-column h-100 px-4 py-3">
|
|
|
+ <div id="maps">
|
|
|
+ <div>
|
|
|
+ <h4>Carte avec duplication</h4>
|
|
|
+ <node-map
|
|
|
+ v-if="data"
|
|
|
+ v-bind="mapSingle"
|
|
|
+ :key="data.id + '-single'"
|
|
|
+ class="node-map"
|
|
|
+ :show-id="showId"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h4>Carte avec liens multiples</h4>
|
|
|
+ <node-map
|
|
|
+ v-if="data"
|
|
|
+ v-bind="mapMany"
|
|
|
+ :key="data.id + '-many'"
|
|
|
+ class="node-map"
|
|
|
+ :show-id="showId"
|
|
|
+ id="map-2"
|
|
|
+ />
|
|
|
+ </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"
|
|
|
+ :options="textsDepartOptions"
|
|
|
+ />
|
|
|
+ </b-form-group>
|
|
|
+
|
|
|
+ <b-form-checkbox v-model="showId" name="check-button" switch>
|
|
|
+ Afficher les numéros
|
|
|
+ </b-form-checkbox>
|
|
|
+ </b-form>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { toSingleManyData, toManyManyData } from '@/helpers/d3Data'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+
|
|
|
import NodeMap from '@/components/NodeMap'
|
|
|
+import { toSingleManyData, toManyManyData } from '@/helpers/d3Data'
|
|
|
+
|
|
|
|
|
|
export default {
|
|
|
name: 'Home',
|
|
@@ -21,35 +55,54 @@ export default {
|
|
|
|
|
|
data () {
|
|
|
return {
|
|
|
- id: 39,
|
|
|
+ textId: undefined,
|
|
|
+ showId: true,
|
|
|
data: null,
|
|
|
- data2: null,
|
|
|
- one: { nodes: null, links: null },
|
|
|
- two: { nodes: null, links: null }
|
|
|
+ mapSingle: { nodes: null, links: null },
|
|
|
+ mapMany: { nodes: null, links: null }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['textsDepartOptions'])
|
|
|
+ },
|
|
|
+
|
|
|
+ watch: {
|
|
|
+ textId (id) {
|
|
|
+ this.$store.dispatch('GET_TREE', id).then((data) => {
|
|
|
+ this.mapSingle = toSingleManyData(data)
|
|
|
+ this.mapMany = toManyManyData(data)
|
|
|
+ this.data = data
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
|
|
|
created () {
|
|
|
- this.$store.dispatch('GET_TREE', this.id).then((data) => {
|
|
|
- this.data = data
|
|
|
- this.one = toSingleManyData(data)
|
|
|
- })
|
|
|
- this.$store.dispatch('GET_TREE', this.id).then((data) => {
|
|
|
- this.data2 = data
|
|
|
- this.two = toManyManyData(data)
|
|
|
+ this.$store.dispatch('GET_TEXTS_DEPART').then(textsDepart => {
|
|
|
+ this.textId = textsDepart[0].id
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-#map {
|
|
|
- height: 100%;
|
|
|
+#maps {
|
|
|
width: 100%;
|
|
|
+ height: 100%;
|
|
|
display: flex;
|
|
|
- flex-basis: 50%;
|
|
|
-}
|
|
|
-.node-map {
|
|
|
- width: 50vw;
|
|
|
+
|
|
|
+ & > div {
|
|
|
+ flex-basis: 50%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ & + div .node-map {
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .node-map {
|
|
|
+ border: 1px solid grey;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|