1 files changed, 132 insertions, 0 deletions
diff --git a/src/components/_sila/Global/SilaComponents/NtpPopover.vue b/src/components/_sila/Global/SilaComponents/NtpPopover.vue
new file mode 100644
index 00000000..0b476f72
--- /dev/null
+++ b/src/components/_sila/Global/SilaComponents/NtpPopover.vue
@@ -0,0 +1,132 @@
+<template>
+  <div id="my-container">
+    <span :id="id" class="regular-12px underline" variant="primary">
+      {{ $t(description) }}
+    </span>
+    <!-- Our popover title and content render container -->
+    <b-popover
+      :target="id"
+      placement="auto"
+      container="my-container"
+      :show.sync="popoverShow"
+      @show="onShow"
+    >
+      <template #title>
+        <div class="popup-title">
+          <span class="bold-16px__caps">{{ $t(description) }}</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-body">
+        <div class="popup-body__input-container">
+          <span class="regular-12px tretiatry"
+            >Введите адрес сервера (IP, FQDM)</span
+          >
+          <b-form-input
+            id="popover-input-1"
+            v-model="input1"
+            class="medium-12px"
+          ></b-form-input>
+        </div>
+        <b-button class="popup-button" variant="primary" @click="onClose">
+          {{ $t('global.action.save') }}
+        </b-button>
+      </div>
+    </b-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    description: {
+      type: String,
+      default: '',
+    },
+    id: {
+      type: String,
+      default: '',
+    },
+    button: {
+      type: String,
+      default: 'Reload',
+    },
+  },
+  data() {
+    return {
+      input1: '',
+      popoverShow: false,
+    };
+  },
+  methods: {
+    onShow() {
+      this.$root.$emit('bv::hide::popover');
+    },
+    onClose() {
+      this.popoverShow = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.form-group {
+  margin: 0;
+}
+
+.popup-title {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: baseline;
+}
+
+.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;
+}
+
+.form-control {
+  width: 341px;
+  height: 52px;
+  margin: -25px auto;
+  padding-top: 30px;
+}
+
+.popup-button {
+  width: 341px;
+  height: 40px;
+  margin: 0 auto 10px;
+}
+
+.popup-body__input-container {
+  height: 52px;
+  margin: 24px auto 16px auto;
+}
+
+.tretiatry {
+  margin-left: 12px;
+}
+</style>