From 4006dafd15baf2f9f836632c248377ac2186aaf1 Mon Sep 17 00:00:00 2001
From: grey-cat-1908 <grey.cat1908@gmail.com>
Date: Fri, 22 Mar 2024 17:41:21 +0300
Subject: [PATCH] branch configuration & pinia

---
 package.json  |  1 +
 src/App.vue   | 62 +++++++++++++++++++++++++++++++++++++++++++++++----
 src/main.ts   |  5 ++++-
 src/style.css |  6 ++++-
 4 files changed, 68 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index c514512..6ef7dbe 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/App.vue b/src/App.vue
index 46c76bc..afdc911 100644
--- a/src/App.vue
+++ b/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>
-                  <v-btn size="x-large" variant="flat" block color="blue">Конфигурация</v-btn>
+                  <h3>Линия:</h3>
+                  <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>
diff --git a/src/main.ts b/src/main.ts
index 7859768..ba59659 100644
--- a/src/main.ts
+++ b/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')
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 096f3f0..499b6af 100644
--- a/src/style.css
+++ b/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;
 }
\ No newline at end of file