sprof 0.1.0 → 0.1.2

package/src/components/CarouselImages.vue

@@ -1,434 +0,0 @@
-<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

@@ -1,219 +0,0 @@
-<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

@@ -1,48 +0,0 @@
-<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>