Merge branch 'master' of git.flexites.org:Students/ITRadio

client/src/components/ymap.vue

@@ -0,0 +1,62 @@
+<template>
+  <div ref="map" :style="{ width: mapWidth, height: mapHeight }"></div>
+</template>
+
+<script>
+export default {
+  name: 'YandexMap',
+  props: {
+    apiKey: {
+      type: String,
+      default: '',
+    },
+    mapWidth: {
+      type: String,
+      default: '100%',
+    },
+    mapHeight: {
+      type: String,
+      default: '100%',
+    },
+    center: {
+      type: Array,
+      default: () => [61.402554, 55.159902],
+    },
+    zoom: {
+      type: Number,
+      default: 10,
+    },
+  },
+  mounted() {
+    this.loadYandexMap();
+  },
+  methods: {
+    loadYandexMap() {
+      if (document.querySelector('script[src*="api-maps.yandex.ru"]')) {
+        this.initMap();
+      } else {
+        const script = document.createElement('script');
+        script.src = `https://api-maps.yandex.ru/v3/?apikey=${this.apiKey}&lang=ru_RU`;
+        script.onload = this.initMap;
+        document.head.appendChild(script);
+      }
+    },
+    async initMap() {
+      // eslint-disable-next-line no-undef
+      await ymaps3.ready;
+
+      // eslint-disable-next-line no-undef
+      const { YMap, YMapDefaultSchemeLayer, YMapDefaultMarker } = ymaps3;
+
+      const map = new YMap(this.$refs.map, {
+        location: {
+          center: this.center,
+          zoom: this.zoom,
+        },
+      });
+
+      map.addChild(new YMapDefaultSchemeLayer());
+    },
+  },
+};
+</script>

client/src/router/index.js

@@ -49,7 +49,9 @@ export default route(function (/* { store, ssrContext } */) {
   });
 
   Router.beforeEach((to, from, next) => {
-    if (to.meta.isAuth) {
+    console.log(process.env.SERVER);
+    //уточнить зачем нужен process.env.SERVER
+    if (to.meta.isAuth && !process.env.SERVER) {
       if (store.state.user) {
         next();
       } else {

client/src/services/app.js

@@ -5,6 +5,8 @@ import { REST, RESTError } from './rest';
 // console.log(settings);
 
 export default class extends REST {
+  // export default class Django extends REST {
+
   static get settings() {
     return settings;
   }
@@ -237,4 +239,16 @@ export default class extends REST {
         );
       });
   }
+
+  static getSupportInfo() {
+    return this._get('radio/support_info', {}, {})
+      .then((data) => {
+        return data;
+      })
+      .catch((error) => {
+        throw new RESTError(error, 'Ошибка при получении контактов');
+      });
+  }
 }
+
+// window.django = Django;

client/src/views/contacts.vue

@@ -8,29 +8,29 @@
     />
     <h1 class="h2">Контакты</h1>
     <div class="contacts__content">
-      <div class="contacts__info">
+      <div v-if="contacts" class="contacts__info">
-        <div class="text contacts__item">
+        <div v-for="(item, index) in contactsField" :key="index">
-          <span class="title">Телефон</span>
+          <div
-          +7 (900) 000-00-00
+            v-if="item.title !== dictionaryFields.socials"
-        </div>
+            class="text contacts__item"
-        <div class="text contacts__item">
+          >
-          <span class="title">Почта</span>
+            <span class="title">{{ item.title }}</span>
-          it-radio@info.org
+            {{ item.data }}
-        </div>
+          </div>
-        <div class="text contacts__item">
+          <div v-else class="contacts__socials">
-          <span class="title">Адрес</span>
+            <span class="title">{{ item.title }}</span>
-          г. Челябинск, Адрес
+            <div
-        </div>
+              v-for="(href, social) in item.data"
-        <div class="text contacts__item">
+              :key="social"
-          <span class="title">Соц. сети</span>
+              class="contacts__social"
-          <div class="contacts__social">
+            >
-            <div class="contacts__social m--telegram"></div>
+              <a :href="href" :class="['contacts__social', social]"></a>
-            <div class="contacts__social m--vk"></div>
+            </div>
           </div>
         </div>
       </div>
       <div class="contacts__map">
-        <div
+        <!-- <div
           class="contacts__map-frame"
           style="position: relative; overflow: hidden"
         >
@@ -38,10 +38,6 @@
             href="https://yandex.ru/maps/56/chelyabinsk/?utm_medium=mapframe&utm_source=maps"
             style="color: #eee; font-size: 12px; position: absolute; top: 0px"
             >Челябинск</a
-          ><a
-            href="https://yandex.ru/maps/geo/chelyabinsk/53159527/?ll=61.421984%2C55.159071&utm_medium=mapframe&utm_source=maps&z=14.04"
-            style="color: #eee; font-size: 12px; position: absolute; top: 14px"
-            >Челябинск — Яндекс Карты</a
           ><iframe
             src="https://yandex.ru/map-widget/v1/?ll=61.421984%2C55.159071&mode=poi&poi%5Bpoint%5D=61.399655%2C55.160475&poi%5Buri%5D=ymapsbm1%3A%2F%2Fgeo%3Fdata%3DCgg1MzE1OTUyNxIg0KDQvtGB0YHQuNGPLCDQp9C10LvRj9Cx0LjQvdGB0LoiCg04nHVCFb2jXEI%2C&z=14.04"
             width="100%"
@@ -50,7 +46,8 @@
             allowfullscreen="true"
             style="position: relative"
           ></iframe>
-        </div>
+        </div> -->
+        <YandexMap apiKey="e73ed16e-35ea-483b-afb4-9daac388591a" />
       </div>
       <FormKit
         v-model="formData"
@@ -79,10 +76,12 @@
 <script>
 import AppBreadcrumbs from '@/components/app-breadcrumbs.vue';
 import SupportBlock from '@/components/support-block.vue';
+import YandexMap from '@/components/ymap.vue';
+import { app } from '@/services';
 
 export default {
   name: 'contacts',
-  components: { SupportBlock, AppBreadcrumbs },
+  components: { SupportBlock, AppBreadcrumbs, YandexMap },
   data() {
     return {
       formData: {},
@@ -104,12 +103,11 @@ export default {
           outerClass: 'field--required',
         },
         {
-          $formkit: 'maska',
+          $formkit: 'text',
-          name: 'phone',
+          name: 'email',
-          maska: { mask: '+7 (###) ###-##-##' },
+          label: 'Электронная почта',
-          label: 'Контактный телефон',
+          placeholder: 'example@example.com',
-          placeholder: '+7 (###) ###-##-##',
+          validation: 'required|email',
-          validation: 'required',
           outerClass: 'field--required',
         },
         {
@@ -122,10 +120,72 @@ export default {
         },
       ],
       showLoaderSending: false,
+      contacts: null,
+      dictionaryFields: {
+        phone: 'Телефон',
+        address: 'Адрес',
+        email: 'Почта',
+        socials: 'Соц. сети',
+      },
     };
   },
+  computed: {
+    contactsField() {
+      const address = this.formatAddress(this.contacts);
+      const phone = this.contacts.phone;
+      const email = this.contacts.email;
+      const socials = {
+        ['m--telegram']: this.contacts.telegram_url,
+        ['m--vk']: this.contacts.vk_url,
+      };
+
+      const fields = {
+        address,
+        phone,
+        email,
+        socials,
+      };
+
+      const fieldsWithoutNull = this.removeNullFields(fields);
+      return this.createArrayContacts(this.dictionaryFields, fieldsWithoutNull);
+    },
+  },
+  created() {
+    app.getSupportInfo().then((responce) => {
+      this.contacts = { ...responce };
+    });
+  },
+  mounted() {},
   methods: {
     submitHandler() {},
+    removeNullFields(obj) {
+      const result = {};
+      for (const key in obj) {
+        if (obj[key] !== null) {
+          if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
+            result[key] = this.removeNullFields(obj[key]);
+          } else {
+            result[key] = obj[key];
+          }
+        }
+      }
+      return result;
+    },
+    createArrayContacts(dictionary, fields) {
+      const result = [];
+      for (const key in fields) {
+        if (dictionary[key]) {
+          result.push({ title: dictionary[key], data: fields[key] });
+        }
+      }
+      return result;
+    },
+    formatAddress(contacts) {
+      if (contacts.city && contacts.street && contacts.house) {
+        return `г. ${contacts.city}, ул. ${contacts.street}, д. ${contacts.house}`;
+      }
+      return null;
+    },
   },
 };
 </script>