sliding-sync/client/index.html
Kegan Dougal 4a03b12287 client/server: set 'initial' flag on a per-room basis and use it when rendering
Previously the 'initial' flag was set on the entire response which was pointless
as the client can detect this by the presence/absence of `?pos=`.

Instead, move the `initial` flag to be present on the Room object, so clients know
when to replace or update their databases. Use this to fix a bug where the timeline
would show incorrectly when clicking on rooms due to appending to the timeline when
the room subscription data was collected.
2022-02-24 16:48:39 +00:00

63 lines
2.8 KiB
HTML

<html>
<head>
<title>Sync v3 experiments</title>
<link rel="stylesheet" href="styles.css">
<script src="index.js" type="module"></script>
</head>
<body>
<div class="statsheader">
<span id="txrx" title="Total sizes of uncompressed HTTP bodies without HTTP headers">0 KB Tx / 0 KB Rx</span>
<div id="listgraph" title="Room lists tracked, blue=window yellow=SYNC green=INSERT red=DELETE cyan=UPDATE dark red=INVALIDATE"></div>
</div>
<div class="page">
<div class="leftSide">
<div id="roomlistcontainer">
</div>
</div>
<div class="rightSide">
<div class="header">
<input id="accessToken" type="password" placeholder="matrix.org access token" />
<input id="syncButton" type="button" value="Start Sync" />
<input id="debugButton" type="button" value="DEBUG" style="display: none;" />
<span id="errorMsg"></span>
<input id="roomfilter" type="text" placeholder="Filter rooms..." />
</div>
<div class="roomheading">
<img class="roomavatar" decoding="async" id="selectedroomavatar" src="/client/placeholder.svg"/>
<span id="selectedroomname">Select a room</span>
<div id="selectedroomtopic">
</div>
</div>
<div id="messages"></div>
<div id="roomfooter">
<input id="sendmessageinput" type="text" placeholder="Enter text or commands /me /invite /join /leave" spellcheck="true" />
</div>
</div>
<template id="roomCellTemplate">
<div class="roomcell">
<img class="roomavatar" decoding="async" src="/client/placeholder.svg"/>
<div class="roominfo">
<span class="unreadcount"></span>
<span class="roomname"></span>
<span class="roomtimestamp"></span>
<div>
<span class="roomsender"></span>
<span class="roomcontent"></span>
</div>
</div>
</div>
</template>
<template id="messagetemplate">
<div>
<div class="msgheader">
<div class="msgsender">Alice</div>
<div class="msgtimestamp">11/06/1999 11:22:33</div>
</div>
<div class="msgcontent">Lorem Ipsum Dolor...</div>
</div>
</template>
</div>
</body>
</html>