From 6fdb2e134f54a95752f6f0ad5935a39305002dd0 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Fri, 11 Jan 2019 00:58:41 +0700
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=20=D0=BD?=
 =?UTF-8?q?=D0=B0=D0=B4=20LoaderPage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Reader/LoaderPage/LoaderPage.vue          | 60 ++++++++++++++++---
 client/components/Reader/Reader.vue           |  3 +
 client/element.js                             |  4 ++
 3 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/client/components/Reader/LoaderPage/LoaderPage.vue b/client/components/Reader/LoaderPage/LoaderPage.vue
index 3ad229fe..ca5d97d3 100644
--- a/client/components/Reader/LoaderPage/LoaderPage.vue
+++ b/client/components/Reader/LoaderPage/LoaderPage.vue
@@ -1,13 +1,16 @@
 <template>
     <div class="main">
         <div class="part">
-            
+            <span class="greeting bold-font">{{ title }}</span>
+            <span class="greeting">Добро пожаловать!</span>
+            <span class="greeting">Поддерживаются форматы: fb2, fb2.zip, html, txt</span>
         </div>
-        <div class="part">
-            
+        <div class="part center">
+            <el-input ref="input" placeholder="URL книги" v-model="bookUrl">
+                <el-button slot="append" icon="el-icon-search" @click="submitUrl"></el-button>
+            </el-input>
         </div>
         <div class="part bottom">
-            
         </div>
     </div>
 </template>
@@ -20,13 +23,40 @@ import Component from 'vue-class-component';
 export default @Component({
 })
 class LoaderPage extends Vue {
+    bookUrl = null;
+
     created() {
+        this.commit = this.$store.commit;
+        this.dispatch = this.$store.dispatch;
+        this.config = this.$store.state.config;
     }
 
+    mounted() {
+        //недостатки сторонних ui
+        this.$refs.input.$refs.input.addEventListener('keyup', (event) => {
+            if (event.key == 'Enter')
+                this.submitUrl();
+        });
+    }
+
+    activated() {
+        this.$refs.input.focus();
+    }
+
+    get title() {
+        if (this.config.mode == 'omnireader')
+            return 'Omni Reader - браузерная онлайн-читалка.';
+        return 'Универсальная читалка книг и ресурсов интернета.';
+
+    }
+
+    submitUrl() {
+        if (this.bookUrl)
+            //loadUrl()
+        ;
+    }
 }
 //-----------------------------------------------------------------------------
-//    justify-content: space-between;
-
 </script>
 <style scoped>
 .main {
@@ -35,7 +65,6 @@ class LoaderPage extends Vue {
     flex-direction: column;
 }
 
-
 .part {
     flex: 1;
     display: flex;
@@ -44,8 +73,25 @@ class LoaderPage extends Vue {
     align-items: center;
 }
 
+.greeting {
+    font-size: 130%;
+    line-height: 170%;
+}
+
+.bold-font {
+    font-weight: bold;
+}
+
+.center {
+    justify-content: flex-start;
+    padding: 0 5px 0 5px;
+}
+
 .bottom {
     justify-content: flex-end;
 }
 
+.el-input {
+    max-width: 600px;
+}
 </style>
\ No newline at end of file
diff --git a/client/components/Reader/Reader.vue b/client/components/Reader/Reader.vue
index 2178099b..13ac53ce 100644
--- a/client/components/Reader/Reader.vue
+++ b/client/components/Reader/Reader.vue
@@ -94,6 +94,9 @@ class Reader extends Vue {
     get componentActive() {
         let result = '';
 
+        if (this.loaderActive)
+            result = 'LoaderPage';
+
         if (!result) {
             this.commit('reader/setLoaderActive', true);
             result = 'LoaderPage';
diff --git a/client/element.js b/client/element.js
index 6ba0faea..18b63e8d 100644
--- a/client/element.js
+++ b/client/element.js
@@ -47,12 +47,16 @@ import './theme/header.css';
 import ElMain from 'element-ui/lib/main';
 import './theme/main.css';
 
+import ElInput from 'element-ui/lib/input';
+import './theme/input.css';
+
 const ElNotification = () => import('element-ui/lib/notification');
 import './theme/notification.css';
 
 const components = {
     ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane, ElTooltip,
     ElContainer, ElAside, ElMain, ElHeader,
+    ElInput,
     ElNotification
 };