1 files changed, 291 insertions, 0 deletions
diff --git a/src/views/_sila/BMC/Configuration/SettingsImportPopup.vue b/src/views/_sila/BMC/Configuration/SettingsImportPopup.vue
new file mode 100644
index 00000000..3807a694
--- /dev/null
+++ b/src/views/_sila/BMC/Configuration/SettingsImportPopup.vue
@@ -0,0 +1,291 @@
+<template>
+  <div id="my-container">
+    <span
+      :id="id"
+      ref="button"
+      class="regular-12px underline"
+      variant="primary"
+    >
+      {{ $t(description) }}
+    </span>
+    <!-- Our popover title and content render container -->
+    <b-popover
+      id="export-popup"
+      ref="popover"
+      :target="id"
+      triggers="click"
+      :show.sync="popoverShow"
+      placement="auto"
+      container="my-container"
+      @show="onShow"
+      @shown="onShown"
+      @hidden="onHidden"
+    >
+      <template #title>
+        <div class="popup-title">
+          <span class="semi-bold-20px">{{ $t(popup) }}</span>
+          <b-button class="popup-title__button_close" @click="onClose">
+            <img src="@/assets/images/_sila/popups/x-icon.svg" />
+          </b-button>
+        </div>
+      </template>
+      <div class="popup-switch">
+        <span
+          class="medium-16px popup-item"
+          :class="{ 'switch-active': isExport }"
+          @click="switchExport"
+          >{{ $t('global.action.export') }}</span
+        >
+        <span
+          class="medium-16px popup-item"
+          :class="{ 'switch-active': !isExport }"
+          @click="switchImport"
+          >{{ $t('global.action.import') }}</span
+        >
+        <div class="slider" />
+      </div>
+      <div v-if="isExport" class="popup-body">
+        <div class="ip-container">
+          <span class="regular-16px"
+            >Оставить IP адрес из настроек сервера</span
+          >
+          <b-form-checkbox switch> </b-form-checkbox>
+        </div>
+        <b-button class="popover-button" variant="primary" @click="onClose">
+          {{ $t(button) }}
+        </b-button>
+      </div>
+      <div v-else class="settings-import_container">
+        <b-form-file
+          id="settings-import__file-input"
+          placeholder="Нажмите на область или перетащите в нее файл с настройками"
+        ></b-form-file>
+      </div>
+    </b-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    description: {
+      type: String,
+      default: '',
+    },
+    id: {
+      type: String,
+      default: '',
+    },
+    button: {
+      type: String,
+      default: 'global.action.reload',
+    },
+    popup: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      input1: '',
+      input1state: null,
+      input1Return: '',
+      popoverShow: false,
+      isExport: true,
+    };
+  },
+  watch: {
+    input1(val) {
+      if (val) {
+        this.input1state = true;
+      }
+    },
+  },
+  methods: {
+    onClose() {
+      this.popoverShow = false;
+    },
+    onOk() {
+      if (!this.input1) {
+        this.input1state = false;
+      }
+      if (this.input1) {
+        this.onClose();
+        // Return our popover form results
+        this.input1Return = this.input1;
+      }
+    },
+    onShow() {
+      this.$root.$emit('bv::hide::popover');
+      // This is called just before the popover is shown
+      // Reset our popover form variables
+      this.input1 = '';
+      this.input1state = null;
+      this.input1Return = '';
+    },
+    onShown() {
+      // Called just after the popover has been shown
+      // Transfer focus to the first input
+      this.focusRef(this.$refs.input1);
+    },
+    onHidden() {
+      // Called just after the popover has finished hiding
+      // Bring focus back to the button
+      this.focusRef(this.$refs.button);
+    },
+    focusRef(ref) {
+      // Some references may be a component, functional component, or plain element
+      // This handles that check before focusing, assuming a `focus()` method exists
+      // We do this in a double `$nextTick()` to ensure components have
+      // updated & popover positioned first
+      this.$nextTick(() => {
+        this.$nextTick(() => {
+          (ref.$el || ref).focus();
+        });
+      });
+    },
+    switchExport() {
+      this.isExport = true;
+    },
+    switchImport() {
+      this.isExport = false;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.custom-file {
+  width: 432px;
+  height: 108px;
+}
+
+#settings-import__file-input ~ .custom-file-label {
+  background-color: transparent;
+  border: 1px dashed rgba(12, 28, 41, 0.6);
+  box-sizing: border-box;
+  border-radius: 8px;
+  width: 432px;
+  height: 108px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  white-space: normal;
+  padding: 0 65px;
+}
+
+#settings-import__file-input ~ .custom-file-label::after {
+  display: none;
+}
+</style>
+<style lang="scss" scoped>
+#export-popup {
+  flex-direction: column;
+  align-items: flex-start;
+  background: #ffffff;
+  box-shadow: 0px -4px 12px rgb(0 0 0 / 5%);
+  border-radius: 16px !important;
+  border-radius: 4px;
+  max-width: 480px;
+  width: 480px;
+  height: auto;
+}
+
+.form-group {
+  margin: 0;
+}
+
+.popup-title {
+  display: flex;
+  align-items: baseline;
+  width: 465px;
+}
+
+.popup-title__button_close {
+  margin: 0 28px 0 auto;
+  background: none;
+  border: none;
+  &:active {
+    background-color: $faint-secondary-primary-5-hover !important;
+    box-shadow: none !important;
+    border-radius: 8px;
+  }
+  &:focus-visible {
+    border: none !important;
+    border-radius: 8px;
+  }
+  &:focus {
+    box-shadow: none;
+    border-radius: 8px;
+  }
+}
+
+.popup-body {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+}
+
+.medium-16px {
+  display: inline-block;
+  height: 45px;
+  margin: 10px;
+  cursor: pointer;
+}
+
+.popup-switch {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  border-bottom: 1px solid #f3f4f5;
+}
+
+.switch-active {
+  color: $red-brand-primary;
+  transition: ease-in 0.15s;
+}
+
+.slider {
+  position: absolute;
+  width: 130px;
+  height: 0px;
+  border-bottom: 4px solid $red-brand-primary;
+  transition: ease-in 0.2s;
+  bottom: 14px;
+  left: 10px;
+}
+
+.popup-item:nth-child(1).switch-active ~ .slider {
+  left: 10px;
+}
+
+.popup-item:nth-child(2).switch-active ~ .slider {
+  left: 160px;
+}
+
+.ip-container {
+  display: flex;
+  width: 461px;
+  height: 75px;
+  padding: 30px 15px 25px 15px;
+}
+
+.popover-button {
+  width: 432px;
+  height: 52px;
+  margin: 0 auto 10px;
+}
+
+.settings-import_container {
+  width: 478px;
+  height: 160px;
+  background-color: $surface-secondary;
+  margin: -15px -15px -8px -12px;
+  border-radius: 0 0 16px 16px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>