implement listing and watching on the web side

watching doesn't do anything yet, because the server side doesn't yet
know how to send messages to a watch client

5 files changed, 227 insertions, 57 deletions

diff --git a/Cargo.lock b/Cargo.lock
index 69e2815..0341cbb 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2127,8 +2127,11 @@ dependencies = [
 name = "teleterm-web"
 version = "0.1.0"
 dependencies = [
+ "futures",
  "js-sys",
  "seed",
+ "serde",
+ "serde_json",
  "wasm-bindgen",
  "web-sys",
 ]
diff --git a/teleterm-web/Cargo.toml b/teleterm-web/Cargo.toml
index 7a9a7f9..57a7d25 100644
--- a/teleterm-web/Cargo.toml
+++ b/teleterm-web/Cargo.toml
@@ -11,7 +11,10 @@ publish = false
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
+futures = "0.1.29"
 js-sys = "0.3"
 seed = "0.4"
+serde = "1"
+serde_json = "1"
 wasm-bindgen = "0.2"
 web-sys = { version = "0.3", features = ["ErrorEvent", "MessageEvent", "WebSocket"] }
diff --git a/teleterm-web/src/lib.rs b/teleterm-web/src/lib.rs
index 99c68f1..c78c600 100644
--- a/teleterm-web/src/lib.rs
+++ b/teleterm-web/src/lib.rs
@@ -9,59 +9,116 @@ extern "C" {
     fn log(s: &str);
 }
 
+const LIST_URL: &str = "http://127.0.0.1:4145/list";
 const WATCH_URL: &str = "ws://127.0.0.1:4145/watch";
 
+#[allow(clippy::large_enum_variant)]
 #[derive(Clone)]
 enum Msg {
+    List(seed::fetch::ResponseDataResult<Vec<Session>>),
+    Refresh,
+    StartWatching(String),
     Watch(ws::WebSocketEvent),
 }
 
+struct WatchConn {
+    id: String,
+    #[allow(dead_code)] // no idea why it thinks this is dead
+    ws: WebSocket,
+}
+
+#[derive(Clone, Debug, serde::Deserialize)]
+struct Session {
+    id: String,
+    username: String,
+}
+
+#[derive(Default)]
 struct Model {
-    watch_conn: WebSocket,
+    sessions: Vec<Session>,
+    watch_conn: Option<WatchConn>,
+}
+
+impl Model {
+    fn list(&self) -> impl futures::Future<Item = Msg, Error = Msg> {
+        seed::Request::new(LIST_URL).fetch_json_data(Msg::List)
+    }
+
+    fn watch(&mut self, id: &str, orders: &mut impl Orders<Msg>) {
+        let ws = ws::connect(WATCH_URL, Msg::Watch, orders);
+        self.watch_conn = Some(WatchConn {
+            id: id.to_string(),
+            ws,
+        })
+    }
 }
 
 fn init(_: Url, orders: &mut impl Orders<Msg>) -> Init<Model> {
     log("init");
-    let watch_conn = ws::connect(WATCH_URL, Msg::Watch, orders);
-    Init::new(Model { watch_conn })
+    let model = Model::default();
+    orders.perform_cmd(model.list());
+    Init::new(model)
 }
 
-fn update(msg: Msg, model: &mut Model, _orders: &mut impl Orders<Msg>) {
+fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
     log("update");
     match msg {
+        Msg::List(sessions) => match sessions {
+            Ok(sessions) => {
+                log("got sessions");
+                model.sessions = sessions;
+            }
+            Err(e) => {
+                log(&format!("error getting sessions: {:?}", e));
+            }
+        },
+        Msg::Refresh => {
+            orders.perform_cmd(model.list());
+        }
+        Msg::StartWatching(id) => {
+            log(&format!("watching {}", id));
+            model.watch(&id, orders);
+        }
         Msg::Watch(event) => match event {
             ws::WebSocketEvent::Connected(_) => {
                 log("connected");
-                match model.watch_conn.send_with_str("ping1") {
-                    Ok(_) => log("sent ping1 successfully"),
-                    Err(e) => {
-                        log(&format!("error sending ping: {:?}", e));
-                        return;
-                    }
-                }
-                match model.watch_conn.send_with_str("ping2") {
-                    Ok(_) => log("sent ping2 successfully"),
-                    Err(e) => {
-                        log(&format!("error sending ping: {:?}", e));
-                    }
-                }
             }
             ws::WebSocketEvent::Disconnected(_) => {
                 log("disconnected");
+                model.watch_conn = None;
             }
             ws::WebSocketEvent::Message(msg) => {
-                log(&format!("message {:?}", msg));
+                log(&format!(
+                    "message from id {}: {:?}",
+                    model.watch_conn.as_ref().unwrap().id,
+                    msg
+                ));
             }
             ws::WebSocketEvent::Error(e) => {
-                log(&format!("error {:?}", e));
+                log(&format!(
+                    "error from id {}: {:?}",
+                    model.watch_conn.as_ref().unwrap().id,
+                    e
+                ));
             }
         },
     }
 }
 
-fn view(_model: &Model) -> impl View<Msg> {
+fn view(model: &Model) -> impl View<Msg> {
     log("view");
-    vec![seed::h1!["it's a seed app"]]
+    let mut list = vec![];
+    for session in &model.sessions {
+        list.push(seed::li![seed::button![
+            simple_ev(Ev::Click, Msg::StartWatching(session.id.clone())),
+            format!("{}: {}", session.username, session.id),
+        ]]);
+    }
+    vec![
+        seed::h1!["it's a seed app"],
+        seed::ul![list],
+        seed::button![simple_ev(Ev::Click, Msg::Refresh), "refresh"],
+    ]
 }
 
 #[wasm_bindgen(start)]
diff --git a/teleterm/static/teleterm_web.js b/teleterm/static/teleterm_web.js
index 7eac0ab..45b691a 100644
--- a/teleterm/static/teleterm_web.js
+++ b/teleterm/static/teleterm_web.js
@@ -18,25 +18,31 @@ function addHeapObject(obj) {
     return idx;
 }
 function __wbg_elem_binding0(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(19)(arg0, arg1, addHeapObject(arg2));
+    wasm.__wbg_function_table.get(40)(arg0, arg1, addHeapObject(arg2));
 }
 function __wbg_elem_binding1(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(19)(arg0, arg1, addHeapObject(arg2));
+    wasm.__wbg_function_table.get(45)(arg0, arg1, arg2);
 }
 function __wbg_elem_binding2(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(19)(arg0, arg1, addHeapObject(arg2));
+    wasm.__wbg_function_table.get(240)(arg0, arg1, addHeapObject(arg2));
 }
 function __wbg_elem_binding3(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(23)(arg0, arg1, arg2);
+    wasm.__wbg_function_table.get(40)(arg0, arg1, addHeapObject(arg2));
 }
 function __wbg_elem_binding4(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(144)(arg0, arg1, addHeapObject(arg2));
+    wasm.__wbg_function_table.get(40)(arg0, arg1, addHeapObject(arg2));
 }
-function __wbg_elem_binding5(arg0, arg1, arg2, arg3, arg4) {
-    wasm.__wbg_function_table.get(171)(arg0, arg1, addHeapObject(arg2), arg3, addHeapObject(arg4));
+function __wbg_elem_binding5(arg0, arg1) {
+    wasm.__wbg_function_table.get(170)(arg0, arg1);
 }
-function __wbg_elem_binding6(arg0, arg1, arg2, arg3) {
-    wasm.__wbg_function_table.get(175)(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
+function __wbg_elem_binding6(arg0, arg1, arg2) {
+    wasm.__wbg_function_table.get(40)(arg0, arg1, addHeapObject(arg2));
+}
+function __wbg_elem_binding7(arg0, arg1, arg2, arg3, arg4) {
+    wasm.__wbg_function_table.get(267)(arg0, arg1, addHeapObject(arg2), arg3, addHeapObject(arg4));
+}
+function __wbg_elem_binding8(arg0, arg1, arg2, arg3) {
+    wasm.__wbg_function_table.get(271)(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
 }
 /**
 */
@@ -129,6 +135,8 @@ function getInt32Memory() {
     return cachegetInt32Memory;
 }
 
+function notDefined(what) { return () => { throw new Error(`${what} is not defined`); }; }
+
 function handleError(e) {
     wasm.__wbindgen_exn_store(addHeapObject(e));
 }
@@ -220,8 +228,9 @@ function init(module) {
     imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
         takeObject(arg0);
     };
-    imports.wbg.__wbindgen_cb_forget = function(arg0) {
-        takeObject(arg0);
+    imports.wbg.__wbindgen_object_clone_ref = function(arg0) {
+        const ret = getObject(arg0);
+        return addHeapObject(ret);
     };
     imports.wbg.__wbindgen_cb_drop = function(arg0) {
         const obj = takeObject(arg0).original;
@@ -232,19 +241,18 @@ function init(module) {
         const ret = false;
         return ret;
     };
+    imports.wbg.__wbindgen_cb_forget = function(arg0) {
+        takeObject(arg0);
+    };
     imports.wbg.__wbindgen_json_parse = function(arg0, arg1) {
         const ret = JSON.parse(getStringFromWasm(arg0, arg1));
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
-        const ret = getStringFromWasm(arg0, arg1);
-        return addHeapObject(ret);
-    };
     imports.wbg.__wbg_log_93d35dab6e237612 = function(arg0, arg1) {
         console.log(getStringFromWasm(arg0, arg1));
     };
-    imports.wbg.__wbindgen_object_clone_ref = function(arg0) {
-        const ret = getObject(arg0);
+    imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
+        const ret = getStringFromWasm(arg0, arg1);
         return addHeapObject(ret);
     };
     imports.wbg.__wbg_new_59cb74e423758ede = function() {
@@ -263,10 +271,30 @@ function init(module) {
         wasm.__wbindgen_free(arg0, arg1 * 1);
         console.error(v0);
     };
+    imports.wbg.__wbg_clearTimeout_42a8676f07d366c5 = typeof clearTimeout == 'function' ? clearTimeout : notDefined('clearTimeout');
+    imports.wbg.__wbg_setTimeout_53c0997134972ce3 = function(arg0, arg1) {
+        const ret = setTimeout(getObject(arg0), arg1);
+        return ret;
+    };
     imports.wbg.__widl_instanceof_Window = function(arg0) {
         const ret = getObject(arg0) instanceof Window;
         return ret;
     };
+    imports.wbg.__widl_f_new_AbortController = function() {
+        try {
+            const ret = new AbortController();
+            return addHeapObject(ret);
+        } catch (e) {
+            handleError(e)
+        }
+    };
+    imports.wbg.__widl_f_abort_AbortController = function(arg0) {
+        getObject(arg0).abort();
+    };
+    imports.wbg.__widl_f_signal_AbortController = function(arg0) {
+        const ret = getObject(arg0).signal;
+        return addHeapObject(ret);
+    };
     imports.wbg.__widl_f_create_element_Document = function(arg0, arg1, arg2) {
         try {
             const ret = getObject(arg0).createElement(getStringFromWasm(arg1, arg2));
@@ -491,6 +519,21 @@ function init(module) {
         getInt32Memory()[arg0 / 4 + 0] = ret0;
         getInt32Memory()[arg0 / 4 + 1] = ret1;
     };
+    imports.wbg.__widl_f_new_Headers = function() {
+        try {
+            const ret = new Headers();
+            return addHeapObject(ret);
+        } catch (e) {
+            handleError(e)
+        }
+    };
+    imports.wbg.__widl_f_append_Headers = function(arg0, arg1, arg2, arg3, arg4) {
+        try {
+            getObject(arg0).append(getStringFromWasm(arg1, arg2), getStringFromWasm(arg3, arg4));
+        } catch (e) {
+            handleError(e)
+        }
+    };
     imports.wbg.__widl_f_push_state_with_url_History = function(arg0, arg1, arg2, arg3, arg4, arg5) {
         try {
             getObject(arg0).pushState(getObject(arg1), getStringFromWasm(arg2, arg3), arg4 === 0 ? undefined : getStringFromWasm(arg4, arg5));
@@ -611,17 +654,29 @@ function init(module) {
         const ret = getObject(arg0).state;
         return addHeapObject(ret);
     };
-    imports.wbg.__widl_f_new_WebSocket = function(arg0, arg1) {
+    imports.wbg.__widl_f_status_Response = function(arg0) {
+        const ret = getObject(arg0).status;
+        return ret;
+    };
+    imports.wbg.__widl_f_status_text_Response = function(arg0, arg1) {
+        const ret = getObject(arg1).statusText;
+        const ret0 = passStringToWasm(ret);
+        const ret1 = WASM_VECTOR_LEN;
+        getInt32Memory()[arg0 / 4 + 0] = ret0;
+        getInt32Memory()[arg0 / 4 + 1] = ret1;
+    };
+    imports.wbg.__widl_f_text_Response = function(arg0) {
         try {
-            const ret = new WebSocket(getStringFromWasm(arg0, arg1));
+            const ret = getObject(arg0).text();
             return addHeapObject(ret);
         } catch (e) {
             handleError(e)
         }
     };
-    imports.wbg.__widl_f_send_with_str_WebSocket = function(arg0, arg1, arg2) {
+    imports.wbg.__widl_f_new_WebSocket = function(arg0, arg1) {
         try {
-            getObject(arg0).send(getStringFromWasm(arg1, arg2));
+            const ret = new WebSocket(getStringFromWasm(arg0, arg1));
+            return addHeapObject(ret);
         } catch (e) {
             handleError(e)
         }
@@ -669,6 +724,10 @@ function init(module) {
             handleError(e)
         }
     };
+    imports.wbg.__widl_f_fetch_with_str_and_init_Window = function(arg0, arg1, arg2, arg3) {
+        const ret = getObject(arg0).fetch(getStringFromWasm(arg1, arg2), getObject(arg3));
+        return addHeapObject(ret);
+    };
     imports.wbg.__widl_f_error_1_ = function(arg0) {
         console.error(getObject(arg0));
     };
@@ -686,7 +745,7 @@ function init(module) {
             const a = state0.a;
             state0.a = 0;
             try {
-                return __wbg_elem_binding5(a, state0.b, arg0, arg1, arg2);
+                return __wbg_elem_binding7(a, state0.b, arg0, arg1, arg2);
             } finally {
                 state0.a = a;
             }
@@ -709,13 +768,17 @@ function init(module) {
             handleError(e)
         }
     };
+    imports.wbg.__wbg_new_de17f04ab3be4063 = function() {
+        const ret = new Object();
+        return addHeapObject(ret);
+    };
     imports.wbg.__wbg_new_5e8d465c199e6ff3 = function(arg0, arg1) {
         const state0 = {a: arg0, b: arg1};
         const cb0 = (arg0, arg1) => {
             const a = state0.a;
             state0.a = 0;
             try {
-                return __wbg_elem_binding6(a, state0.b, arg0, arg1);
+                return __wbg_elem_binding8(a, state0.b, arg0, arg1);
             } finally {
                 state0.a = a;
             }
@@ -775,6 +838,14 @@ function init(module) {
         const ret = getObject(arg0) === undefined;
         return ret;
     };
+    imports.wbg.__wbg_set_e11a72d9733dadef = function(arg0, arg1, arg2) {
+        try {
+            const ret = Reflect.set(getObject(arg0), getObject(arg1), getObject(arg2));
+            return ret;
+        } catch (e) {
+            handleError(e)
+        }
+    };
     imports.wbg.__wbindgen_string_get = function(arg0, arg1) {
         const obj = getObject(arg0);
         if (typeof(obj) !== 'string') return 0;
@@ -793,16 +864,16 @@ function init(module) {
     imports.wbg.__wbindgen_throw = function(arg0, arg1) {
         throw new Error(getStringFromWasm(arg0, arg1));
     };
-    imports.wbg.__wbindgen_closure_wrapper163 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper208 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding0(a, state.b, arg0);
+                return __wbg_elem_binding6(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(20)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(41)(a, state.b);
                 else state.a = a;
             }
         }
@@ -811,7 +882,7 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper693 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper214 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
@@ -820,7 +891,7 @@ function init(module) {
             try {
                 return __wbg_elem_binding4(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(145)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(41)(a, state.b);
                 else state.a = a;
             }
         }
@@ -829,16 +900,34 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper159 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper497 = function(arg0, arg1, arg2) {
+        const state = { a: arg0, b: arg1, cnt: 1 };
+        const real = () => {
+            state.cnt++;
+            const a = state.a;
+            state.a = 0;
+            try {
+                return __wbg_elem_binding5(a, state.b, );
+            } finally {
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(171)(a, state.b);
+                else state.a = a;
+            }
+        }
+        ;
+        real.original = state;
+        const ret = real;
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbindgen_closure_wrapper210 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding3(a, state.b, arg0);
+                return __wbg_elem_binding1(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(20)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(41)(a, state.b);
                 else state.a = a;
             }
         }
@@ -847,7 +936,7 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper157 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper899 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
@@ -856,7 +945,7 @@ function init(module) {
             try {
                 return __wbg_elem_binding2(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(20)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(241)(a, state.b);
                 else state.a = a;
             }
         }
@@ -865,16 +954,34 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper161 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper206 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding1(a, state.b, arg0);
+                return __wbg_elem_binding3(a, state.b, arg0);
+            } finally {
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(41)(a, state.b);
+                else state.a = a;
+            }
+        }
+        ;
+        real.original = state;
+        const ret = real;
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbindgen_closure_wrapper212 = function(arg0, arg1, arg2) {
+        const state = { a: arg0, b: arg1, cnt: 1 };
+        const real = (arg0) => {
+            state.cnt++;
+            const a = state.a;
+            state.a = 0;
+            try {
+                return __wbg_elem_binding0(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(20)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(41)(a, state.b);
                 else state.a = a;
             }
         }
diff --git a/teleterm/static/teleterm_web_bg.wasm b/teleterm/static/teleterm_web_bg.wasm
index f3ea767..7111b85 100644
--- a/teleterm/static/teleterm_web_bg.wasm
+++ b/teleterm/static/teleterm_web_bg.wasm