From 03df472c53ab43a6345bcd04a8f41b54aed4ddbf Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Sat, 15 Jun 2019 17:50:15 +0200
Subject: [PATCH] show placeholder in middle panel when no room is selected

---
 src/ui/web/RoomPlaceholderView.js | 19 +++++++++++++++++++
 src/ui/web/SessionView.js         | 30 ++++++++----------------------
 2 files changed, 27 insertions(+), 22 deletions(-)
 create mode 100644 src/ui/web/RoomPlaceholderView.js

diff --git a/src/ui/web/RoomPlaceholderView.js b/src/ui/web/RoomPlaceholderView.js
new file mode 100644
index 00000000..eaeadb57
--- /dev/null
+++ b/src/ui/web/RoomPlaceholderView.js
@@ -0,0 +1,19 @@
+import {tag} from "./html.js";
+
+export default class RoomPlaceholderView {
+    constructor() {
+        this._root = null;
+    }
+
+    mount() {
+        this._root = tag.div(tag.h2("Choose a room on the left side."));
+        return this._root;
+    }
+
+    root() {
+        return this._root;
+    }
+
+    unmount() {}
+    update() {}
+}
diff --git a/src/ui/web/SessionView.js b/src/ui/web/SessionView.js
index ba92f80b..12ef2e1c 100644
--- a/src/ui/web/SessionView.js
+++ b/src/ui/web/SessionView.js
@@ -1,11 +1,14 @@
 import ListView from "./ListView.js";
 import RoomTile from "./RoomTile.js";
 import RoomView from "./RoomView.js";
+import SwitchView from "./SwitchView.js";
+import RoomPlaceholderView from "./RoomPlaceholderView.js";
 import {tag} from "./html.js";
 
 export default class SessionView {
     constructor(viewModel) {
         this._viewModel = viewModel;
+        this._middleSwitcher = null;
         this._roomList = null;
         this._currentRoom = null;
         this._root = null;
@@ -27,41 +30,24 @@ export default class SessionView {
             },
             (room) => new RoomTile(room)
         );
-        this._roomList.mount();
-        this._root.appendChild(this._roomList.root());
-
-        this._updateCurrentRoom();
+        this._root.appendChild(this._roomList.mount());
+        this._middleSwitcher = new SwitchView(new RoomPlaceholderView());
+        this._root.appendChild(this._middleSwitcher.mount());
         return this._root;
     }
 
     unmount() {
         this._roomList.unmount();
-        if (this._room) {
-            this._room.unmount();
-        }
-
+        this._middleSwitcher.unmount();
         this._viewModel.off("change", this._onViewModelChange);
     }
 
     _onViewModelChange(prop) {
         if (prop === "currentRoom") {
-            this._updateCurrentRoom();
+            this._middleSwitcher.switch(new RoomView(this._viewModel.currentRoom));
         }
     }
 
     // changing viewModel not supported for now
     update() {}
-
-    _updateCurrentRoom() {
-        if (this._currentRoom) {
-            this._currentRoom.root().remove();
-            this._currentRoom.unmount();
-            this._currentRoom = null;
-        }
-        if (this._viewModel.currentRoom) {
-            this._currentRoom = new RoomView(this._viewModel.currentRoom);
-            this._currentRoom.mount();
-            this.root().appendChild(this._currentRoom.root());
-        }
-    }
 }