154 lines
5.5 KiB
HTML
154 lines
5.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Chatr</title>
|
||
|
|
<link rel="stylesheet" href="./css/styles.css">
|
||
|
|
<link rel="stylesheet" href="./css/material.min.css">
|
||
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||
|
|
<link rel="manifest" href="./site.webmanifest">
|
||
|
|
<link rel="icon" type="image/x-icon" href="./favicon.ico">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- Always shows a header, even in smaller screens. -->
|
||
|
|
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||
|
|
<header class="mdl-layout__header">
|
||
|
|
<div class="mdl-layout__header-row">
|
||
|
|
<!-- Title -->
|
||
|
|
<span class="mdl-layout-title">Chatr</span>
|
||
|
|
<!-- Add spacer, to align navigation to the right -->
|
||
|
|
<div class="mdl-layout-spacer"></div>
|
||
|
|
<!-- Navigation. We hide it in small screens. -->
|
||
|
|
<nav class="mdl-navigation mdl-layout--large-screen-only">
|
||
|
|
|
||
|
|
<a class="mdl-navigation__link" href="{{ url }}">{{ name }}</a>
|
||
|
|
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
<div class="mdl-layout__tab-bar mdl-js-ripple-effect" id="_links">
|
||
|
|
<a href="#me" id="link-me" class="mdl-layout__tab is-active">Me</a>
|
||
|
|
<!--<a href="#tytd-bot" class="mdl-layout__tab">TYTD (Bot)</a>-->
|
||
|
|
{{ for user in users }}
|
||
|
|
<a href="#{{ user.hash }}" id="link-{{ user.hash }}" class="mdl-layout__tab">{{ user.text }} </a>
|
||
|
|
{{ end }}
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<div class="mdl-layout__drawer">
|
||
|
|
<span class="mdl-layout-title">Chatr</span>
|
||
|
|
<nav class="mdl-navigation">
|
||
|
|
|
||
|
|
<a class="mdl-navigation__link" href="{{ url }}">{{ name }}</a>
|
||
|
|
|
||
|
|
{{ if loggedin }}
|
||
|
|
<a class="mdl-navigation__link" href="./create-bot">Create Bot</a>
|
||
|
|
<a class="mdl-navigation__link" href="./device-qr">Login With QR Code</a>
|
||
|
|
<a class="mdl-navigation__link" href="./api/logout">Logout</a>
|
||
|
|
|
||
|
|
{{ end }}
|
||
|
|
<a class="mdl-navigation__link" href="./" onclick="return setup_notifications()">Ask for Notifications</a>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
<main class="mdl-layout__content">
|
||
|
|
<section class="mdl-layout__tab-panel is-active" id="me">
|
||
|
|
<div class="page-content">
|
||
|
|
<ul id="messages-me">
|
||
|
|
{{ for message in mymessages }}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li class="me">{{ message.body }}</li>
|
||
|
|
|
||
|
|
|
||
|
|
{{ end }}
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
{{ for user in users }}
|
||
|
|
<section class="mdl-layout__tab-panel" id="{{ user.hash }}">
|
||
|
|
<div class="page-content">
|
||
|
|
<ul id="messages-{{ user.hash }}">
|
||
|
|
{{ for message in user.messages }}
|
||
|
|
|
||
|
|
|
||
|
|
{{ if message.mine }}
|
||
|
|
<li class="me">{{ message.body }}</li>
|
||
|
|
{{ else }}
|
||
|
|
<li class="him">{{ message.body }}</li>
|
||
|
|
{{ end }}
|
||
|
|
|
||
|
|
{{ end }}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
{{ end }}
|
||
|
|
|
||
|
|
<dialog class="mdl-dialog" id="clear_all_dlg">
|
||
|
|
<h4 class="mdl-dialog__title">Delete all messages with this user/bot?</h4>
|
||
|
|
<div class="mdl-dialog__content">
|
||
|
|
<p>
|
||
|
|
NOTE this will happen for the other party too
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="mdl-dialog__actions">
|
||
|
|
<button type="button" onclick="clear_all_confirm()" class="mdl-button mdl-button--accent close">Yes</button>
|
||
|
|
<button type="button" onclick="clear_all_cancel()" class="mdl-button close">No</button>
|
||
|
|
</div>
|
||
|
|
</dialog>
|
||
|
|
</main>
|
||
|
|
<footer>
|
||
|
|
<div class="float-right">
|
||
|
|
|
||
|
|
|
||
|
|
<div class="mdl-textfield mdl-js-textfield">
|
||
|
|
<input class="mdl-textfield__input" type="text" id="msg_tb">
|
||
|
|
<label class="mdl-textfield__label" for="msg_tb">Message...</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button onclick="send_msg_to()" class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
|
||
|
|
<i class="material-icons">send</i>
|
||
|
|
</button>
|
||
|
|
<button id="moreBtn" class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
|
||
|
|
<i class="material-icons">more_vert</i>
|
||
|
|
</button>
|
||
|
|
<div id="moreBtns" hidden>
|
||
|
|
|
||
|
|
<button onclick="clear_all()" class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
|
||
|
|
<i class="material-icons">clear_all</i>
|
||
|
|
</button>
|
||
|
|
<!--
|
||
|
|
|
||
|
|
|
||
|
|
<button onclick="upload_messages()" class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
|
||
|
|
<i class="material-icons">file_open</i>
|
||
|
|
</button>
|
||
|
|
<form method="POST" action="./api/upload_messages" hidden>
|
||
|
|
<input type="file" name="file">
|
||
|
|
|
||
|
|
</form>
|
||
|
|
<button onclick="download_messages()" class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
|
||
|
|
<i class="material-icons">save</i>
|
||
|
|
</button>-->
|
||
|
|
<br>
|
||
|
|
<form id="upload_file" method="POST" action="./api/uploadUser" hidden>
|
||
|
|
<input type="hidden" name="uid" id="uid" value="me">
|
||
|
|
<input type="submit" value="Send">
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
<script src="./js/mainscript.js"></script>
|
||
|
|
<script defer>
|
||
|
|
var pgs = ['me'{{ for user in users }} ,'{{ user.hash }}' {{end }}];
|
||
|
|
var curUser='me';
|
||
|
|
|
||
|
|
init_ws();
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<script src="./js/material.min.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|