branch configuration & pinia

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@svgdotjs/svg.js": "^3.2.0",
     "@vueuse/core": "^10.9.0",
+    "pinia": "^2.1.7",
     "vue": "^3.3.11",
     "vuetify": "^3.5.9"
   },

src/App.vue

@@ -9,6 +9,7 @@ import {ExtraBranch} from "./models/map/extraBranch.ts";
 // @ts-ignore
 import {set, useEventListener} from '@vueuse/core'
 import {Settings} from "./models/settings.ts";
+import {defineStore} from "pinia";
 
 const element = ref<HTMLDivElement>()
 
@@ -30,6 +31,20 @@ let settings: Settings = new Settings(mapWidth.value, mapHeight.value);
 
 let map: Map;
 
+const useStore = defineStore('branch', {
+  // arrow function recommended for full type inference
+  state: () => {
+    return {
+      name: 'Тест',
+      number: 1,
+      color: '#0078BE'
+    }
+  },
+})
+
+// @ts-ignore
+const store = useStore()
+
 onMounted(() => {
   map = new Map(branch, settings);
 
@@ -49,7 +64,7 @@ function build () {
   let station1: Station = new Station("Смоленская", false, [], 0)
   let station2: Station = new Station("Арбатская", true, [extraStation1, extraStation9, extraStation4], 200)
 
-  let branch: Branch = new Branch('Арбатско-Покровская линия','#0078BE', 3, [station1, station2])
+  let branch: Branch = new Branch(store.name,store.color, store.number, [station1, station2])
   let settings: Settings = new Settings(mapWidth.value, mapHeight.value);
 
   map.setSettings(settings)
@@ -79,8 +94,48 @@ function build () {
                   <v-text-field v-model="mapHeight"></v-text-field>
                 </li>
                 <li>
-                  <h3>Ветка:</h3>
+                  <h3>Линия:</h3>
-                  <v-btn size="x-large" variant="flat" block color="blue">Конфигурация</v-btn>
+                  <v-dialog max-width="800">
+                    <template v-slot:activator="{ props: activatorProps }">
+                      <v-btn
+                          v-bind="activatorProps"
+                          color="blue"
+                          size="x-large"
+                          variant="flat"
+                          block
+                          text="Конфигурация"
+                      ></v-btn>
+                    </template>
+
+                    <template v-slot:default="{ isActive }">
+                      <v-card title="Конфигурация">
+                        <template v-slot:text>
+                          <h2>Название:</h2>
+                          <v-text-field v-model="store.name"></v-text-field>
+
+                          <h2>Номер:</h2>
+                          <v-text-field v-model="store.number"></v-text-field>
+
+                          <h2>Цвет:</h2>
+                          <center>
+                            <v-color-picker v-model="store.color" mode="hex"></v-color-picker>
+                          </center>
+                        </template>
+
+                        <hr>
+
+                        <v-card-actions>
+                          <v-spacer></v-spacer>
+
+                          <v-btn
+                              text="Закрыть"
+                              variant="text"
+                              @click="isActive.value = false"
+                          ></v-btn>
+                        </v-card-actions>
+                      </v-card>
+                    </template>
+                  </v-dialog>
                 </li>
               </ul>
             </div>
@@ -100,7 +155,6 @@ function build () {
                 </li>
                 <li>
                   <h3>Ветка:</h3>
-                  <v-btn size="x-large" variant="flat" block color="blue">Конфигурация</v-btn>
                 </li>
               </ul>
             </div>

src/main.ts

@@ -9,10 +9,13 @@ import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
+import {createPinia} from "pinia";
+
+const pinia = createPinia()
 
 const vuetify = createVuetify({
     components,
     directives,
 })
 
-createApp(App).use(vuetify).mount('#app')
+createApp(App).use(vuetify).use(pinia).mount('#app')

src/style.css

@@ -6,7 +6,7 @@
 }
 
 *, .settings {
-    overflow: hidden;
+    overflow-x: hidden;
 }
 
 .map, svg {
@@ -15,4 +15,8 @@
 
 .v-btn {
     margin-bottom: 1em;
+}
+
+center {
+    padding: 10px;
 }