add infomation on titlebar

data request infomation remove some button from rightbar
MOTOO11 · Dec 11, 2016 · f04a6f1 · f04a6f1
1 parent ab2d958
commit f04a6f1
Show file tree

Hide file tree

Showing 6 changed files with 164 additions and 76 deletions.
diff --git a/src/renderer/css/main.less b/src/renderer/css/main.less
@@ -8,6 +8,31 @@
     padding-left: 10px;
 }
 
+.mdl-textfield.footerTextInput {
+    padding: 0px;
+}
+
+.mdl-mini-footer {
+    padding: 0px;
+    padding-bottom:  80px;
+    background-color: rgba(0, 0, 0, 0.12);
+    color: black;
+    textarea{
+        padding-bottom: 28px;
+        width: 60%;
+        left:0;
+        height: 100%;
+    }
+    button{
+        padding-top: 28px;
+        padding-bottom: 20px;
+    }
+}
+
+#snackbar {
+    left:75%;
+}
+
 #loading {
     &.aa {
         font-family: "ＭＳ Ｐゴシック", "MS PGothic", "Mona", "mona-gothic-jisx0208.1990-0", sans-serif;
@@ -53,9 +78,6 @@ body {
     width: 580px;
 }
 
-.mdl-mini-footer {
-    height: 0px;
-}
 
 .mdl-textfield--url {
     width: 500px;

diff --git a/src/renderer/html/index.html b/src/renderer/html/index.html
@@ -32,7 +32,7 @@
             <!-- header -->
             <div class="mdl-layout__drawer">
                 <!-- setting -->
-                <span class="mdl-layout-title">設定</span>
+                <span v-on:click="open()" class="mdl-layout-title">設定</span>
                 <nav class="mdl-navigation">
                     <span class="mdl-navigation__link">
                         <label><i class="material-icons">refresh</i> リロード：{{reload}}</label>
@@ -112,21 +112,36 @@
             <!-- display -->
             <main class="mdl-layout__content">
                 <div class="viewer__showThread">
-                    <dl v-for="item in thread.messages">
-                        <dt :id="'MESSAGE-'+item.num" :key="item.num">{{item.num}}:<span v-html="item.name"></span>[{{item.mail}}] {{item.date}} ID:{{item.id}}</dt>
-                        <dd v-html="replace(item.text)" class="aa" :key="item.num"></dd>
-                    </dl>
+                    <div v-show="!showList">
+                        <dl v-for="item in thread.messages">
+                            <dt :id="'MESSAGE-'+item.num" :key="item.num">{{item.num}}:<span v-html="item.name"></span>[{{item.mail}}] {{item.date}} ID:{{item.id}}</dt>
+                            <dd v-html="replace(item.text)" class="aa" :key="item.num"></dd>
+                        </dl>
+                    </div>
+                    <div v-show="showList">
+                        <div v-for="item in thread.threadLists">
+                            <a v-bind:href="item.url" class="aa" v-on:click.prevent="setUrlFromShowList(item.url)">{{item.title}}</a>
+                        </div>
+                    </div>
                 </div>
             </main>
             <!-- display -->
+            <!-- footer -->
+            <!--<footer class="mdl-mini-footer">
+                <input type="text" value="name" v-model="NAME"><input type="text" v-model="MAIL">
+                <textarea id="post" autocomplete="off" rows="3" v-model="MESSAGE"></textarea>
+                <button v-on:click="sendMessage()">send</button>
+            </footer>-->
+            <!-- footer -->
+            <!-- display -->
         </div>
         <!-- fixed right menu -->
         <div class="fixed-menubar__right">
-            <button id="reloadTimerCountDown" class="mdl-button mdl-js-button mdl-button--raised mdl-button--default" v-bind:class="{ 'mdl-button--colored ':processing }" v-bind:disabled="!processing">
-                {{reloadTimerCountDown}}
-            </button>
-            <div class="mdl-tooltip mdl-tooltip--left mdl-tooltip--larg" data-mdl-for="reloadTimerCountDown">
-                データ取得タイマー
+            <button id="bookmark" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--default">
+                {{thread.bookmark}}
+                </button>
+            <div class="mdl-tooltip mdl-tooltip--left mdl-tooltip--larg" data-mdl-for="bookmark">
+                表示中の番号
             </div>
             <button v-on:click="start()" id="start" v-bind:disabled="!validUrl" v-show="!processing" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">
                 <i class="material-icons">play_arrow</i>
@@ -146,21 +161,10 @@
             <div class="mdl-tooltip mdl-tooltip--left mdl-tooltip--larg" data-mdl-for="latest">
                 最新まで移動
             </div>
-            <button id="bookmark" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--default">
-                {{thread.bookmark}}
-                </button>
-            <div class="mdl-tooltip mdl-tooltip--left mdl-tooltip--larg" data-mdl-for="bookmark">
-                表示中の番号
-            </div>
+
             <button class="mdl-button mdl-js-button" disabled>
 
             </button>
-            <button id="provideTimerLimitCountDown" class="mdl-button mdl-js-button mdl-button--raised mdl-button--default" v-bind:class="{ 'mdl-button--colored ':processing }" v-bind:disabled="!processing">
-                {{provideTimerLimitCountDown}}
-            </button>
-            <div class="mdl-tooltip mdl-tooltip--left mdl-tooltip--larg" data-mdl-for="provideTimerLimitCountDown">
-                読み上げタイマー
-            </div>
             <button v-on:click="cnangeAutoScroll()" id="autoScrollOn" v-show="!autoScroll" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">
                   <i class="material-icons">arrow_drop_down</i>
             </button>
@@ -179,16 +183,17 @@
             <div class="mdl-tooltip mdl-tooltip--left mdl-tooltip--larg" data-mdl-for="dummyTextButton">
                 字幕用テキストを設定
             </div>
-            <button v-on:click="showListWindow()" id="list" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">
-                 <i class="material-icons">message</i>
+            <button v-on:click="flipShowListMode()" id="showList" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">
+                 <i v-show="!showList" class="material-icons">view_list</i>
+                 <i v-show="showList"  class="material-icons">arrow_back</i>
             </button>
-            <div class="mdl-tooltip mdl-tooltip--left mdl-tooltip--larg" data-mdl-for="list">
-                一覧表示
+            <div class="mdl-tooltip mdl-tooltip--left mdl-tooltip--larg" data-mdl-for="showList">
+                {{showList?"戻る":"一覧"}}
             </div>
         </div>
         <!-- fixed right menu -->
         <!-- snack bar -->
-        <div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
+        <div id="snackbar" class="mdl-js-snackbar mdl-snackbar">
             <div class="mdl-snackbar__text"></div>
             <button class="mdl-snackbar__action" type="button"></button>
         </div>
@@ -208,13 +213,6 @@
             </div>
         </dialog>
         <!-- dummytext dialog -->
-        <dialog class="mdl-dialog" id="listwindow">
-            <div class="mdl-dialog__content">
-            </div>
-            <div class="mdl-dialog__actions mdl-dialog__actions--full-width">
-                <button type="button" class="mdl-button close">閉じる</button>
-            </div>
-        </dialog>
     </div>
     <!--<div id="loading" class="aa"><br/> 　　　　　　 ／ﾌﾌ 　　　　　　 　ム｀ヽ<br/> 　　　　　　/ ノ)　 ∧＿∧　　　　）　ヽ<br/> 　　　　　ﾞ/ ｜　　(´・ω・`）ノ⌒（ゝ._,ノ Now loading....<br/> 　　　　　/　ﾉ⌒7⌒ヽーく　 ＼　／<br/> 　　　　　丶＿ ノ ｡　　 ノ､　　｡|/<br/> 　　　　　　　 `ヽ `ー-'_人`ーﾉ　<br/> 　　　　　　　　 丶 ￣ _人'彡ﾉ<br/> 　　　　　　　　　ﾉ　　r'十ヽ/
         <br/> 　　　　　　　／｀ヽ _/　十∨<br/>

diff --git a/src/renderer/ts/Application.ts b/src/renderer/ts/Application.ts
@@ -45,10 +45,12 @@ export default class Application extends Vue {
 
     startThreadRequest() {
         if (!this.processing) return;
+        this.snackbar({ message: "データ取得開始", timeout: 1000 });
         this.reloadTimerCountDown = this.reload;
         this.thread.request(
             (newArrival: number) => {
                 Logger.log("request success", newArrival.toString());
+                this.snackbar({ message: "新着レス：" + newArrival });
                 this.setRequestTimer();
             },
             (err: any) => {
@@ -175,6 +177,7 @@ export default class Application extends Vue {
         if (!this.validate()) {
             return;
         }
+        this.showList = false;
         this.loadUrlSource(false);
 
         this.thread.request(
@@ -229,14 +232,42 @@ export default class Application extends Vue {
             dialog.close();
         });
     }
+    getLists() {
+        this.snackbar({ message: "一覧の読み込みを開始", timeout: 1000 });
+        this.thread.getLists(() => {
+            this.snackbar({ message: "一覧の読み込みに成功", timeout: 1000 });
+        }, (err) => {
+            this.snackbar({ message: err, timeout: 6000 });
+        });
+    }
 
-    showListWindow() {
-        var dialog: any = document.querySelector("#listwindow");
-        dialog.showModal();
-        dialog.querySelector('.close').addEventListener('click', () => {
-            dialog.close();
+    flipShowListMode() {
+        if (!this.showList) this.getLists();
+        this.showList = !this.showList;
+    }
+    showList = false;
+
+    setUrlFromShowList(url: string) {
+        this.url = url;
+        this.loadUrlSource();
+        this.requestOnce();
+    }
+
+    sendMessage() {
+        console.log("send");
+        if(!this.MESSAGE)return;
+        const message = {
+            NAME: this.NAME, MAIL: this.MAIL, MESSAGE: this.MESSAGE
+        }
+        this.thread.sendMessage(message, () => {
+            this.MESSAGE = "";
+        }, (err) => {
+            this.snackbar({ message: err });
         });
     }
+    MAIL = "";
+    NAME = "";
+    MESSAGE = "";
 
     replace(msg: string) {
         var utl = StringUtil.urlToLink(msg);
@@ -249,7 +280,7 @@ export default class Application extends Vue {
     }
 
     snackbar(data: { message: string, timeout?: number } = { message: "info", timeout: 3000 }) {
-        var snackbarContainer: any = document.querySelector('#demo-snackbar-example');
+        var snackbarContainer: any = document.querySelector('#snackbar');
         // var handler = function (event) {
         //     Logger.log("snackbar", "");
         // };
@@ -328,7 +359,8 @@ export default class Application extends Vue {
             + this.pManager.vParam.use
             + this.playingNotificationSound
             + this.reload + this.provideTimeLimit + this.pManager.reading
-            + this.path + this.pManager.voice;
+            + this.path + this.pManager.voice
+            + this.NAME + this.MAIL;
     }
 
     loadSettings() {
@@ -345,6 +377,8 @@ export default class Application extends Vue {
                     this.loadUrlSource();
                 this.setTitleWithTimer();
             };
+            this.NAME = settings.NAME;
+            this.MAIL = settings.MAIL;
             this.playingNotificationSound = Boolean(settings.playingNotificationSound);
             this.autoScroll = Boolean(settings.autoScroll);
             this.pManager.vParam.volume = Number(settings.volume);
@@ -387,7 +421,9 @@ export default class Application extends Vue {
             path: this.path,
             voice: this.pManager.voice,
             playingNotificationSound: this.playingNotificationSound,
-            dummyText: this.dummyText
+            dummyText: this.dummyText,
+            MAIL: this.MAIL,
+            NAME: this.NAME
         }));
     };
 

diff --git a/src/renderer/ts/CaveTube.ts b/src/renderer/ts/CaveTube.ts
@@ -121,7 +121,7 @@ export class CaveTube extends DataSource {
     }
     data2Lists(value: string) {
     }
-    sendMessage(success: () => void, failed: (err: any) => void) {
+    sendMessage(message:any,success: () => void, failed: (err: any) => void) {
         failed("未実装");
     }
 

diff --git a/src/renderer/ts/DataSource.ts b/src/renderer/ts/DataSource.ts
@@ -4,6 +4,7 @@ export abstract class DataSource {
     url: string = "";
     bookmark: number = 0;
     title: string = "";
+    threadLists: ThreadList[] = [];
     constructor(url: string) {
         this.url = url;
     }
@@ -61,7 +62,7 @@ export abstract class DataSource {
         });
     }
 
-    abstract sendMessage(success: () => void, failed: (err: any) => void);
+    abstract sendMessage(message:any,success: () => void, failed: (err: any) => void);
     abstract getLists(success: () => void, failed: (err: any) => void);
 
     save() {
@@ -87,5 +88,5 @@ export abstract class DataSource {
 export class ThreadList {
     title = "";
     url = "";
-    name="";
+    key = "";
 }