mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 11:35:04 +01:00
rooms on the screen!!
This commit is contained in:
parent
90a7989eda
commit
841f280d3c
@ -6,13 +6,15 @@
|
|||||||
<body>
|
<body>
|
||||||
<p id="syncstatus"></p>
|
<p id="syncstatus"></p>
|
||||||
<div><button id="stopsync">stop syncing</button></div>
|
<div><button id="stopsync">stop syncing</button></div>
|
||||||
|
<div id="container"></div>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import main from "./src/main.js";
|
import main from "./src/main.js";
|
||||||
const label = document.getElementById("syncstatus");
|
const label = document.getElementById("syncstatus");
|
||||||
const button = document.getElementById("stopsync");
|
const button = document.getElementById("stopsync");
|
||||||
|
const container = document.getElementById("container");
|
||||||
|
|
||||||
//import("./src/main.js").then(main => {
|
//import("./src/main.js").then(main => {
|
||||||
main(label, button);
|
main(label, button, container);
|
||||||
//});
|
//});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
11
src/main.js
11
src/main.js
@ -2,6 +2,8 @@ import HomeServerApi from "./matrix/hs-api.js";
|
|||||||
import Session from "./matrix/session.js";
|
import Session from "./matrix/session.js";
|
||||||
import createIdbStorage from "./matrix/storage/idb/create.js";
|
import createIdbStorage from "./matrix/storage/idb/create.js";
|
||||||
import Sync from "./matrix/sync.js";
|
import Sync from "./matrix/sync.js";
|
||||||
|
import ListView from "./ui/web/ListView.js";
|
||||||
|
import RoomTile from "./ui/web/RoomTile.js";
|
||||||
|
|
||||||
const HOST = "localhost";
|
const HOST = "localhost";
|
||||||
const HOMESERVER = `http://${HOST}:8008`;
|
const HOMESERVER = `http://${HOST}:8008`;
|
||||||
@ -32,8 +34,14 @@ async function login(username, password, homeserver) {
|
|||||||
return {sessionId, loginData};
|
return {sessionId, loginData};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function showRooms(container, rooms) {
|
||||||
|
const sortedRooms = rooms.sortValues((a, b) => a.name.localeCompare(b.name));
|
||||||
|
const listView = new ListView(sortedRooms, (room) => new RoomTile(room));
|
||||||
|
container.appendChild(listView.mount());
|
||||||
|
}
|
||||||
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
export default async function main(label, button) {
|
export default async function main(label, button, container) {
|
||||||
try {
|
try {
|
||||||
let sessionId = getSessionId(USER_ID);
|
let sessionId = getSessionId(USER_ID);
|
||||||
let loginData;
|
let loginData;
|
||||||
@ -46,6 +54,7 @@ export default async function main(label, button) {
|
|||||||
await session.setLoginData(loginData);
|
await session.setLoginData(loginData);
|
||||||
}
|
}
|
||||||
await session.load();
|
await session.load();
|
||||||
|
showRooms(container, session.rooms);
|
||||||
const hsApi = new HomeServerApi(HOMESERVER, session.accessToken);
|
const hsApi = new HomeServerApi(HOMESERVER, session.accessToken);
|
||||||
console.log("session loaded");
|
console.log("session loaded");
|
||||||
if (!session.syncToken) {
|
if (!session.syncToken) {
|
||||||
|
@ -25,4 +25,8 @@ export default class Room extends EventEmitter {
|
|||||||
this._summary.load(summary);
|
this._summary.load(summary);
|
||||||
return this._persister.load(txn);
|
return this._persister.load(txn);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get name() {
|
||||||
|
return this._summary.name;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -17,7 +17,7 @@ export default class RoomSummary {
|
|||||||
}
|
}
|
||||||
|
|
||||||
get name() {
|
get name() {
|
||||||
return this._name || "Room without a name";
|
return this._name || this._roomId;
|
||||||
}
|
}
|
||||||
|
|
||||||
get lastMessage() {
|
get lastMessage() {
|
||||||
|
@ -8,7 +8,7 @@ export { default as ObservableMap } from "./map/ObservableMap.js";
|
|||||||
// avoid circular dependency between these classes
|
// avoid circular dependency between these classes
|
||||||
// and BaseObservableMap (as they extend it)
|
// and BaseObservableMap (as they extend it)
|
||||||
Object.assign(BaseObservableMap.prototype, {
|
Object.assign(BaseObservableMap.prototype, {
|
||||||
asSortedList(comparator) {
|
sortValues(comparator) {
|
||||||
return new SortedMapList(this, comparator);
|
return new SortedMapList(this, comparator);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -1,16 +1,20 @@
|
|||||||
import * as html from "./html.js";
|
import * as html from "./html.js";
|
||||||
|
|
||||||
class UIView {
|
class UIView {
|
||||||
mount(initialValue) {
|
mount() {}
|
||||||
|
unmount() {}
|
||||||
|
update(_value) {}
|
||||||
|
// can only be called between a call to mount and unmount
|
||||||
|
root() {}
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
function insertAt(parentNode, idx, childNode) {
|
||||||
|
const isLast = idx === parentNode.childElementCount - 1;
|
||||||
}
|
if (isLast) {
|
||||||
|
parentNode.appendChild(childNode);
|
||||||
update() {
|
} else {
|
||||||
|
const nextDomNode = parentNode.children[idx + 1];
|
||||||
|
parentNode.insertBefore(childNode, nextDomNode);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -23,10 +27,12 @@ export default class ListView {
|
|||||||
this._childInstances = null;
|
this._childInstances = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
getDOMNode() {
|
root() {
|
||||||
return this._root;
|
return this._root;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
update() {}
|
||||||
|
|
||||||
mount() {
|
mount() {
|
||||||
this._subscription = this._collection.subscribe(this);
|
this._subscription = this._collection.subscribe(this);
|
||||||
this._root = html.ul({className: "ListView"});
|
this._root = html.ul({className: "ListView"});
|
||||||
@ -48,31 +54,26 @@ export default class ListView {
|
|||||||
this._childInstances = null;
|
this._childInstances = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
onAdd(i, value) {
|
onAdd(idx, value) {
|
||||||
const child = this._childCreator(value);
|
const child = this._childCreator(value);
|
||||||
const childDomNode = child.mount();
|
this._childInstances.splice(idx, 0, child);
|
||||||
this._childInstances.splice(i, 0, child);
|
insertAt(this._root, idx, child.mount());
|
||||||
const isLast = i === this._collection.length - 1;
|
|
||||||
if (isLast) {
|
|
||||||
this._root.appendChild(childDomNode);
|
|
||||||
} else {
|
|
||||||
const nextDomNode = this._childInstances[i + 1].getDOMNode();
|
|
||||||
this._root.insertBefore(childDomNode, nextDomNode);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
onRemove(idx, _value) {
|
||||||
|
const [child] = this._childInstances.splice(idx, 1);
|
||||||
onRemove(i, _value) {
|
child.root().remove();
|
||||||
const [child] = this._childInstances.splice(i, 1);
|
|
||||||
child.getDOMNode().remove();
|
|
||||||
child.unmount();
|
child.unmount();
|
||||||
}
|
}
|
||||||
|
|
||||||
onMove(fromIdx, toIdx, value) {
|
onMove(fromIdx, toIdx, value) {
|
||||||
|
const [child] = this._childInstances.splice(fromIdx, 1);
|
||||||
|
this._childInstances.splice(toIdx, 0, child);
|
||||||
|
child.root().remove();
|
||||||
|
insertAt(this._root, toIdx, child.root());
|
||||||
}
|
}
|
||||||
|
|
||||||
onChange(i, value) {
|
onUpdate(i, value) {
|
||||||
this._childInstances[i].update(value);
|
this._childInstances[i].update(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
25
src/ui/web/RoomTile.js
Normal file
25
src/ui/web/RoomTile.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { li } from "./html.js";
|
||||||
|
|
||||||
|
export default class RoomTile {
|
||||||
|
constructor(room) {
|
||||||
|
this._room = room;
|
||||||
|
this._root = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
mount() {
|
||||||
|
this._root = li(null, this._room.name);
|
||||||
|
return this._root;
|
||||||
|
}
|
||||||
|
|
||||||
|
unmount() {
|
||||||
|
}
|
||||||
|
|
||||||
|
update() {
|
||||||
|
// no data-binding yet
|
||||||
|
this._root.innerText = this._room.name;
|
||||||
|
}
|
||||||
|
|
||||||
|
root() {
|
||||||
|
return this._root;
|
||||||
|
}
|
||||||
|
}
|
@ -4,12 +4,15 @@ export function setAttribute(el, name, value) {
|
|||||||
|
|
||||||
export function el(elementName, attrs, children) {
|
export function el(elementName, attrs, children) {
|
||||||
const e = document.createElement(elementName);
|
const e = document.createElement(elementName);
|
||||||
if (typeof attrs === "object") {
|
if (typeof attrs === "object" && attrs !== null) {
|
||||||
for (let [name, value] of Object.entries(attrs)) {
|
for (let [name, value] of Object.entries(attrs)) {
|
||||||
setAttribute(e, name, value);
|
setAttribute(e, name, value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (Array.isArray(children)) {
|
if (children) {
|
||||||
|
if (!Array.isArray(children)) {
|
||||||
|
children = [children];
|
||||||
|
}
|
||||||
// TODO: use fragment here?
|
// TODO: use fragment here?
|
||||||
for (let c of children) {
|
for (let c of children) {
|
||||||
if (typeof c === "string") {
|
if (typeof c === "string") {
|
||||||
|
Loading…
Reference in New Issue
Block a user