From 5b0960da0cc45532bf65057f39876647f414a269 Mon Sep 17 00:00:00 2001
From: Sipachev Igor <sipachev@sveak.com>
Date: Thu, 10 Mar 2022 13:13:57 +0700
Subject: [PATCH] =?UTF-8?q?=D0=92=D1=8B=D0=BD=D0=B5=D1=81=20=D1=82=D0=B0?=
 =?UTF-8?q?=D0=B1=20=D0=B2=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 popup/src/components/ember-tab/main.vue      |  4 ++
 popup/src/components/ember-tab/script.ts     | 37 +++++++++++
 popup/src/components/ember-tab/style.scss    | 65 ++++++++++++++++++++
 popup/src/components/ember-tab/template.html | 17 +++++
 popup/src/components/script.ts               | 43 +------------
 popup/src/components/template.html           | 16 +----
 6 files changed, 127 insertions(+), 55 deletions(-)
 create mode 100644 popup/src/components/ember-tab/main.vue
 create mode 100644 popup/src/components/ember-tab/script.ts
 create mode 100644 popup/src/components/ember-tab/style.scss
 create mode 100644 popup/src/components/ember-tab/template.html

diff --git a/popup/src/components/ember-tab/main.vue b/popup/src/components/ember-tab/main.vue
new file mode 100644
index 0000000..bfbb7d7
--- /dev/null
+++ b/popup/src/components/ember-tab/main.vue
@@ -0,0 +1,4 @@
+<template src="./template.html"></template>
+<script lang="ts" src="./script.ts"></script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss" src="./style.scss"></style>
diff --git a/popup/src/components/ember-tab/script.ts b/popup/src/components/ember-tab/script.ts
new file mode 100644
index 0000000..8ff92a3
--- /dev/null
+++ b/popup/src/components/ember-tab/script.ts
@@ -0,0 +1,37 @@
+import { Component, Vue } from 'vue-property-decorator'
+import { Person } from '@/classes/DTO/Person'
+import VueClipboard from 'vue-clipboard2'
+import sender from '@/classes/Service/Browser/Chrome/Sender'
+import { Action } from '@/classes/Enum/Action'
+import notificationCleaner from '@/classes/Service/NotificationCleaner'
+
+Vue.use(VueClipboard)
+
+@Component
+export default class HelloWorld extends Vue {
+  person = new Person()
+  isAutoCleaner = false
+
+  mounted () {
+    /** todo заполнить первоначальное значение */
+    notificationCleaner.state().then((isAutoCleaner) => {
+      this.isAutoCleaner = isAutoCleaner
+      console.log('this.isAutoCleaner = ' + isAutoCleaner)
+    })
+  }
+
+  cleanNotifications (): void {
+    sender.send({
+      action: Action.CLEAN_NOTIFICATION
+    })
+  }
+
+  onChangeAutoCleaner () {
+    console.log(this.isAutoCleaner)
+    if (this.isAutoCleaner) {
+      notificationCleaner.enable()
+    } else {
+      notificationCleaner.disable()
+    }
+  }
+}
diff --git a/popup/src/components/ember-tab/style.scss b/popup/src/components/ember-tab/style.scss
new file mode 100644
index 0000000..fe25a0b
--- /dev/null
+++ b/popup/src/components/ember-tab/style.scss
@@ -0,0 +1,65 @@
+.container {
+  max-width: 400px;
+  min-width: 400px;
+  border: solid 2px gray;
+
+  .wrapper {
+    padding: 10px;
+
+    .tab-panel {
+      display: flex;
+
+      &__item {
+        flex-grow: 1;
+        padding: 5px;
+        cursor: pointer;
+        border-bottom: solid 2px #cae5fa;
+
+        &_active {
+          border-bottom: solid 2px #298df8;
+        }
+
+        &:hover {
+          border-bottom: solid 2px #298df8;
+        }
+      }
+    }
+
+    .tab-page {
+      padding-top: 10px;
+
+      &__item {
+        display: none;
+
+
+        &_show {
+          display: block;
+        }
+
+        .form-row {
+          display: flex;
+          margin-bottom: 5px;
+
+          &__item {
+            flex-grow: 1;
+            margin-right: 10px;
+
+            &-input {
+              width: 100%;
+            }
+          }
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+
+    .memory-panel {
+      text-align: left;
+      padding: 5px;
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/popup/src/components/ember-tab/template.html b/popup/src/components/ember-tab/template.html
new file mode 100644
index 0000000..f953c9d
--- /dev/null
+++ b/popup/src/components/ember-tab/template.html
@@ -0,0 +1,17 @@
+<div>
+    <div class="form-row">
+        <div class="form-row__item">
+            <label>
+                Use notification cleaner
+                <input @change="onChangeAutoCleaner" type="checkbox" v-model="isAutoCleaner">
+            </label>
+        </div>
+    </div>
+    <div class="form-row">
+        <div class="form-row__item">
+            <button
+                    @click="cleanNotifications"
+            >Clean</button>
+        </div>
+    </div>
+</div>
diff --git a/popup/src/components/script.ts b/popup/src/components/script.ts
index 1c6434f..e8eb89b 100644
--- a/popup/src/components/script.ts
+++ b/popup/src/components/script.ts
@@ -1,13 +1,9 @@
 import { Component, Vue } from 'vue-property-decorator'
-import { Person } from '@/classes/DTO/Person'
 import VueClipboard from 'vue-clipboard2'
-import { Target } from '@/classes/Enum/Target'
-import sender from '@/classes/Service/Browser/Chrome/Sender'
-import { Action } from '@/classes/Enum/Action'
-import notificationCleaner from '@/classes/Service/NotificationCleaner'
 import Mocks from '@/components/mocks/main.vue'
 import PersonTab from '@/components/person-tab/main.vue'
 import MocksTab from '@/components/mocks-tab/main.vue'
+import EmberTab from '@/components/ember-tab/main.vue'
 
 Vue.use(VueClipboard)
 
@@ -15,43 +11,10 @@ Vue.use(VueClipboard)
   components: {
     Mocks,
     PersonTab,
-    MocksTab
+    MocksTab,
+    EmberTab
   }
 })
 export default class HelloWorld extends Vue {
   tab = 'person'
-  personalId = ''
-  person = new Person()
-  isAutoCleaner = false
-
-  mounted () {
-    /** todo заполнить первоначальное значение */
-    notificationCleaner.state().then((isAutoCleaner) => {
-      this.isAutoCleaner = isAutoCleaner
-      console.log('this.isAutoCleaner = ' + isAutoCleaner)
-    })
-  }
-
-  insertValueToNode (target: Target, value: string): void {
-    sender.send({
-      action: Action.INSERT,
-      target: target,
-      value: value
-    })
-  }
-
-  cleanNotifications (): void {
-    sender.send({
-      action: Action.CLEAN_NOTIFICATION
-    })
-  }
-
-  onChangeAutoCleaner () {
-    console.log(this.isAutoCleaner)
-    if (this.isAutoCleaner) {
-      notificationCleaner.enable()
-    } else {
-      notificationCleaner.disable()
-    }
-  }
 }
diff --git a/popup/src/components/template.html b/popup/src/components/template.html
index aacc887..be5c380 100644
--- a/popup/src/components/template.html
+++ b/popup/src/components/template.html
@@ -19,21 +19,7 @@
                 <MocksTab/>
             </div>
             <div class="tab-page__item" :class="{'tab-page__item_show': tab === 'ember'}">
-                <div class="form-row">
-                    <div class="form-row__item">
-                        <label>
-                            Use notification cleaner
-                            <input @change="onChangeAutoCleaner" type="checkbox" v-model="isAutoCleaner">
-                        </label>
-                    </div>
-                </div>
-                <div class="form-row">
-                    <div class="form-row__item">
-                        <button
-                            @click="cleanNotifications"
-                        >Clean</button>
-                    </div>
-                </div>
+                <EmberTab/>
             </div>
         </div>
     </div>