sprof 0.1.0

package/src/components/CarouselImages.vue

@@ -0,0 +1,434 @@
+<template>
+  <div class="field" :style="{ height: height, maxHeight: maxHeight }">
+    <div class="container">
+      <svg class="icon-arrow" @click.stop="toPrev()">
+        <use xlink:href="#arrow-prev"></use>
+      </svg>
+      <div class="slide-box">
+        <div
+          v-for="(carouselGroupElement, i) in activeCarouselGroup"
+          :key="i"
+          :class="{
+            animationnext: animation === Animations.Next,
+            animationprev: animation === Animations.Prev,
+          }"
+        >
+          <div class="image">
+            <div class="image-box">
+              <!-- <h2 class="event-name" @click="$router.push(`/events/${carouselGroupElement.slug}`)">{{ carouselGroupElement.name }}</h2> -->
+              <!-- {{ carouselGroupElement }} -->
+              <!-- <img -->
+              <!--   :id="carouselGroupElement.fileInfo.getImageUrl()" -->
+              <!--   :style="{ height: `calc(${height} - 110px)`, maxHeight: `calc(${maxHeight} - 110px)` }" -->
+              <!--   :src="carouselGroupElement.fileInfo.getImageUrl()" -->
+              <!--   :alt="carouselGroupElement.fileInfo.originalName" -->
+              <!--   @click="showImageInFullScreen()" -->
+              <!-- /> -->
+            </div>
+          </div>
+
+          <div class="label">{{ carouselGroupElement.description }}</div>
+        </div>
+      </div>
+      <svg class="icon-arrow" @click.stop="toNext()">
+        <use xlink:href="#arrow-next"></use>
+      </svg>
+    </div>
+    <div class="link-number">
+      <GridContainer grid-template-columns="repeat(auto-fit, minmax(26px, 1fr))" grid-gap="5px" margin="0">
+        <div
+          v-for="(_, i) in carousel"
+          :id="i.toString()"
+          :key="i"
+          class="number"
+          :style="{ background: i.toString() === activeGroupIndex.toString() ? '#9D9D9D' : '' }"
+          @click.stop="toGroup(i)"
+        >
+          {{ i + 1 }}
+        </div>
+      </GridContainer>
+    </div>
+  </div>
+
+  <!-- <ArrowPrev /> -->
+  <!-- <ArrowNext /> -->
+</template>
+
+<script lang="ts" setup>
+import GridContainer from '@/services/components/GridContainer.vue';
+import { Animations } from '@/services/interfaces/Animations';
+import makeCarousel from '@/services/MakeCarousel';
+const props = defineProps({
+  events: {
+    type: Array as PropType<Array<unknown>>,
+    required: true,
+  },
+  quantity: {
+    type: Number,
+    default: 1,
+    required: false,
+  },
+  animationTime: {
+    type: Number,
+    default: 500,
+  },
+
+  height: {
+    type: String,
+    default: '360px',
+  },
+  maxHeight: {
+    type: String,
+    default: '360px',
+  },
+  startActiveGroupIndex: {
+    type: Number,
+    default: 0,
+  },
+});
+defineEmits(['openModalWindow']);
+const cssAnimationTime = `${props.animationTime}ms`;
+// const fullScreenMode: Ref<boolean> = ref(false);
+const activeGroupIndex = ref(props.startActiveGroupIndex);
+
+// const mobileWindow = computed(() => {
+//   const width = window.innerWidth;
+//   let divisor = 3.5;
+//   if (width < 1600) {
+//     divisor = 2.5;
+//   }
+//   if (width < 600) {
+//     divisor = 1.6;
+//   }
+//   return width / divisor;
+// });
+//
+const animation: Ref<Animations> = ref(Animations.None);
+
+const carousel: Ref<unknown[][]> = ref(makeCarousel<unknown>(props.events, props.quantity));
+
+const activeCarouselGroup: ComputedRef<unknown[]> = computed(() => {
+  return carousel.value[activeGroupIndex.value];
+});
+
+// const showImageInFullScreen = () => {
+//   fullScreenMode.value = true;
+// };
+
+onMounted(() => {
+  // document.addEventListener('keyup', function (evt) {
+  //   switch (evt.key) {
+  //     case 'ArrowLeft': {
+  //       toPrev();
+  //       break;
+  //     }
+  //     case 'ArrowRight': {
+  //       toNext();
+  //       break;
+  //     }
+  //     case 'Escape': {
+  //       fullScreenMode.value = false;
+  //       break;
+  //     }
+  //   }
+  // });
+});
+
+const toNextGroup = () => (activeGroupIndex.value = activeGroupIndex.value + 1 < carousel.value.length ? activeGroupIndex.value + 1 : 0);
+const toPreviousGroup = () =>
+  (activeGroupIndex.value = activeGroupIndex.value - 1 < 0 ? carousel.value.length - 1 : activeGroupIndex.value - 1);
+
+const callAnimation = (curAnimation: Animations) => {
+  animation.value = curAnimation;
+  setTimeout(() => (animation.value = Animations.None), props.animationTime);
+};
+
+const toGroup = (value: number) => {
+  if (value == activeGroupIndex.value) {
+    return;
+  }
+  callAnimation(value < activeGroupIndex.value ? Animations.Prev : Animations.Next);
+  setTimeout(() => (activeGroupIndex.value = value), props.animationTime / 2);
+};
+
+const toNext = () => {
+  callAnimation(Animations.Next);
+  setTimeout(toNextGroup, props.animationTime / 2);
+};
+
+const toPrev = () => {
+  callAnimation(Animations.Prev);
+  setTimeout(toPreviousGroup, props.animationTime / 2);
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+.event-name {
+  height: auto;
+  &:hover {
+    cursor: pointer;
+    color: grey;
+  }
+}
+
+.icon-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 20px;
+  height: 20px;
+  fill: #343e5c;
+  cursor: pointer;
+  transition: 0.3s;
+  padding: 20px;
+}
+
+.icon-close:hover {
+  fill: #205bb8;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 3;
+}
+
+.modal-box {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  align-items: center;
+  justify-content: space-between;
+  background: white;
+  max-width: 1344px;
+  width: calc(100% - 40px);
+  padding: 20px;
+  z-index: 4;
+  border-radius: 10px;
+}
+
+@keyframes movenext {
+  0% {
+    margin-left: 0;
+    margin-top: 0;
+  }
+  48% {
+    margin-left: -200%;
+    margin-top: 0;
+  }
+  49% {
+    margin-left: -200%;
+    margin-top: -200%;
+  }
+  50% {
+    margin-left: 200%;
+    margin-top: -200%;
+  }
+  51% {
+    margin-left: 200%;
+    margin-top: 0;
+  }
+  100% {
+    margin-left: 0;
+    margin-top: 0;
+  }
+}
+
+@keyframes moveprev {
+  0% {
+    margin-right: 0;
+    margin-top: 0;
+  }
+  48% {
+    margin-right: -200%;
+    margin-top: 0;
+  }
+  49% {
+    margin-right: -200%;
+    margin-top: -200%;
+  }
+  50% {
+    margin-right: 200%;
+    margin-top: -200%;
+  }
+  51% {
+    margin-right: 200%;
+    margin-top: 0;
+  }
+  100% {
+    margin-right: 0;
+    margin-top: 0;
+  }
+}
+
+.container {
+  width: 100%;
+  height: calc(100% - 50px);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.icon-arrow {
+  width: 30px;
+  height: 30px;
+  fill: $site_dark_gray;
+  border-radius: 25px;
+  padding: 10px;
+  background: #ffffff;
+  cursor: pointer;
+  transition: 0.1s;
+}
+
+.icon-arrow:hover {
+  background: #e3e3e3;
+}
+
+.icon-arrow:active {
+  background: #9d9d9d;
+}
+
+.slide-box {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: calc(100% - 60px);
+  height: 100%;
+  z-index: 2;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.animationnext {
+  position: absolute;
+  animation: movenext v-bind(cssAnimationTime) infinite;
+  animation-timing-function: linear;
+  animation-iteration-count: 1;
+  z-index: 1;
+}
+
+.animationprev {
+  position: absolute;
+  animation: moveprev v-bind(cssAnimationTime) infinite;
+  animation-timing-function: linear;
+  animation-iteration-count: 1;
+  z-index: 1;
+}
+
+.image {
+  height: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+img {
+  width: auto;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.link-number {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 1s;
+}
+
+.number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  margin: 5px;
+  border-radius: 20px;
+  color: #ffffff;
+  transform: 0.5s;
+  background: #e3e3e3;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+  cursor: pointer;
+}
+
+.number:hover {
+  background: #c3c3c3;
+}
+
+.hidden {
+  display: none;
+}
+
+.label {
+  max-width: 100%;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+  color: #9d9d9d;
+}
+
+@media screen and (max-width: 1024px) {
+  .event-name {
+    font-size: 30px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .label {
+    font-size: 12px;
+  }
+  .icon-arrow {
+    padding: 0px;
+  }
+
+  .event-name {
+    font-size: 24px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .label {
+    height: 40px;
+    font-size: 9px;
+  }
+
+  .slide-box {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: calc(100% - 20px);
+    height: 80%;
+    z-index: 2;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  .event-name {
+    font-size: 18px;
+  }
+}
+</style>

package/src/components/ContactForm.vue

@@ -0,0 +1,219 @@
+<template>
+  <div v-if="full" class="contact-container">
+    <PInput v-model="contact.description" label="Описание" />
+    <PInput v-model="contact.time" label="Время работы" />
+    <PInput v-model="contact.latitude" label="Широта (для карты)" />
+    <PInput v-model="contact.longitude" label="Долгота (для карты)" />
+  </div>
+
+  <div class="contact-container" :style="{ background: contact.phones.length ? '' : '#F9FAFB' }">
+    <div class="bottom-buttons">
+      <div class="title" :style="{ color: !contact.phones.length ? '#c4c4c4' : '#303133' }">Телефоны</div>
+      <PButton class="admin-add" text="+ Добавить" @click="addPhone()" />
+    </div>
+
+    <div v-for="(phone, i) in contact.phones" :key="phone.id" class="contact-container-item">
+      <PButton class="admin-del" text="Удалить" @click="removePhone(phone.id)" />
+      <div class="list-number">
+        {{ i + 1 }}
+      </div>
+      <PhoneForm v-model="contact.phones[i]" />
+    </div>
+  </div>
+
+  <div class="contact-container" :style="{ background: contact.emails.length ? '' : '#F9FAFB' }">
+    <div class="bottom-buttons">
+      <div class="title" :style="{ color: !contact.emails.length ? '#c4c4c4' : '#303133' }">Электронная почта</div>
+      <PButton class="admin-add" text="+ Добавить" @click="addEmail()" />
+    </div>
+
+    <div v-for="(email, i) in contact.emails" :key="email.id" class="contact-container-item">
+      <PButton class="admin-del" text="Удалить" @click="removeEmail(email.id)" />
+      <div class="list-number">
+        {{ i + 1 }}
+      </div>
+      <EmailForm v-model="contact.emails[i]" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Contact from '@/services/classes/Contact';
+import EmailForm from '@/services/components/EmailForm.vue';
+import PhoneForm from '@/services/components/PhoneForm.vue';
+const contact: Ref<Contact> = defineModel<Contact>() as Ref<Contact>;
+
+defineProps({
+  // contact: {
+  //   type: Object as PropType<Contact>,
+  //   required: true,
+  // },
+  full: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const addEmail = async () => {
+  const item = contact.value.addEmail();
+  await EmailsStore.Create(item);
+};
+
+const removeEmail = async (id: string | undefined) => {
+  contact.value.removeEmail(id as string);
+  await EmailsStore.Remove(id);
+};
+
+const addPhone = async () => {
+  const item = contact.value.addPhone();
+  await PhonesStore.Create(item);
+};
+
+const removePhone = async (id: string | undefined) => {
+  contact.value.removePhone(id as string);
+  await PhonesStore.Remove(id);
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+
+.admin-add {
+  border: none;
+  background: inherit;
+  color: #00b5a4;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+.admin-add:hover {
+  color: darken($color: #00b5a4, $amount: 10%);
+}
+
+.admin-del {
+  top: 23px;
+  right: 36px;
+  border: none;
+  background: inherit;
+  color: #a3a9be;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+.admin-del:hover {
+  color: darken($color: #cf3d19, $amount: 5%);
+}
+
+.bottom-buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 15px;
+}
+
+.contact-container {
+  box-sizing: border-box;
+  width: 100%;
+  position: relative;
+  padding: 0 10px;
+  border: 1px solid #c3c3c3;
+  border-radius: 5px;
+  margin: 0px 0px 20px 0px;
+  background: #dff2f8;
+}
+
+.contact-container-item {
+  position: relative;
+  width: calc(100% - 42px);
+  margin: 0px 10px 20px 10px;
+  border: 1px solid #c3c3c3;
+  border-radius: 5px;
+  padding: 12px 10px;
+  background: #f9fafb;
+}
+
+.list-number {
+  position: absolute;
+  top: 20px;
+  right: 10px;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  background: #1979cf;
+  border-radius: 20px;
+}
+
+.title {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+  color: #c4c4c4;
+  margin: 10px;
+}
+
+:deep(.el-form-item__content) {
+  width: 100%;
+}
+
+:deep(.el-input__inner) {
+  border-radius: 40px;
+  padding-left: 25px;
+  height: 32px;
+  width: 100%;
+  display: flex;
+  font-family: Comfortaa, Arial, Helvetica, sans-serif;
+  font-size: 15px;
+}
+
+:deep(.el-input__inner::placeholder) {
+  color: #4a4a4a;
+}
+
+:deep(.el-select .el-input .el-select__caret) {
+  color: #343e5c;
+  font-size: 15px;
+  font-weight: bold;
+  margin-right: 5px;
+}
+
+.el-select {
+  width: 100%;
+}
+
+:deep(.el-input__prefix) {
+  left: 230px;
+  top: -3px;
+}
+
+:deep(.el-date-editor.el-input, .el-date-editor.el-input__inner) {
+  width: 100%;
+}
+
+:deep(.el-input__icon) {
+  color: #343e5c;
+}
+
+:deep(.el-input__suffix) {
+  top: -3px;
+}
+
+:deep(.el-form-item__label) {
+  font-size: 12px;
+  color: #a3a9be;
+  padding: 0 !important;
+  text-transform: uppercase;
+  margin-left: 5px;
+  height: 30px;
+}
+
+:deep(.el-input__prefix) {
+  left: auto;
+  right: 10px;
+}
+
+:deep(.el-form-item) {
+  margin-bottom: 10px;
+}
+</style>

package/src/components/ContextWindow.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    v-click-outside="outsideClick"
+    class="context-window"
+    :style="{
+      left: left,
+      top: top,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  x: {
+    type: Number as PropType<number>,
+    default: -1,
+  },
+  y: {
+    type: Number as PropType<number>,
+    default: -1,
+  },
+});
+const emits = defineEmits(['close']);
+const xCoord = ref(props.x);
+const yCoord = ref(props.y);
+
+const left = computed(() => xCoord.value + 'px');
+const top = computed(() => yCoord.value + 'px');
+
+const outsideClick = () => {
+  emits('close');
+};
+</script>
+<stype lang="scss">
+@import './src/assets/styles/elements/base-style.scss';
+
+.context-window {
+  position: fixed;
+  border: 1px solid #343e5c;
+  border-radius: 5px;
+  background: #ffffff;
+  z-index: 10;
+  width: 300px;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+</stype>