progress. implement chat toggling

This commit is contained in:
Ginger Wong
2020-06-13 20:15:31 -07:00
parent 9b2e4f40c9
commit eb223ed905
5 changed files with 274 additions and 49 deletions

View File

@@ -17,15 +17,37 @@
</head>
<body>
<div id="app-container" class="flex">
<div id="app-container" class="flex no-chat">
<header class="flex">
<h1>
Maybe a header
😈 Owncast
</h1>
<span>💬</span>
<div id="user-options-container" class="flex">
<span id="chat-toggle" class="rounded-full">💬</span>
<div id="user-info">
<div id="user-info-display" title="Click to update user name" class="flex">
<img src="https://robohash.org/username123" id="username-avatar" class="rounded-full" />
<span id="username-display">Random Username 123</span>
</div>
<div id="user-info-change">
<input type="text"
id="username-change-input"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight focus:bg-white"
value="Random Username 123"
maxlength="100"
placeholder="Update username"
>
<button id="button-update-username" class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-1 rounded user-btn">Update</button>
<button id="button-cancel-change" class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn" title="cancel">X</button>
</div>
</div>
</div>
</header>
<div id="main-content-container" class="flex nxo-chat">
<div id="main-content-container" class="flex">
<!-- LEFT CONTAINER SIDE-->
<div class="flex main-cols left-col">
@@ -33,25 +55,13 @@
<video
id="video"
preload="auto"
autoplay
controls
src="https://ia800300.us.archive.org/17/items/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
></video>
</div>
<div id="info">
<div id="stream-info">
{{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.
Heart rate notifications.
Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation.
<br>
If a patients heart rate is above 120 bpm or below 40 bpm while they appear to have been inactive for 10 minutes, the user will receive a notification. Patients can adjust the threshold bpm or turn these notifications on or off. All heart rate notifications — along with date, time, and heart rate — can be viewed in the Health app on iPhone.
<br>
Heart rate notifications.
Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation.
<br>
If a patients heart rate is above 120 bpm or below 40 bpm while they appear to have been inactive for 10 minutes, the user will receive a notification. Patients can adjust the threshold bpm or turn these notifications on or off. All heart rate notifications — along with date, time, and heart rate — can be viewed in the Health app on iPhone.
</div>
</div>
@@ -60,17 +70,12 @@ If a patients heart rate is above 120 bpm or below 40 bpm while they appear t
<div id="chat-container">
<div id="messages-container">
Heart rate notifications.
Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation.— can be viewed in the Health app on iPhone.
<div v-for="(message, index) in messages">
<div class="message flex">
<img
v-bind:src="message.image"
class="message-avatar rounded-full"
/>
<div class="message-content">
<p class="message-author">{{ message.author }}</p>
<p class="message-text"v-html="message.linkedText()"></p>
@@ -79,9 +84,10 @@ Apple Watch checks for unusually high or low heart rates in the background, whic
</div>
</div>
<div id="chat-input-container" class="shadow-md">
<form id="chat-form" class="flex" @submit="submitChatForm">
<input type="hidden" name="inputAuthor" id="inputAuthor" v-model="message.author" />
<div id="message-input-container" class="shadow-md">
<form id="message-form" class="flex" @submit="submitChatForm">
<input type="hidden" name="inputAuthor" id="self-message-author" v-model="message.author" />
<!-- Author -->
<!-- <label class="control-label" for="inputAuthor">Author</label>
@@ -99,15 +105,16 @@ Apple Watch checks for unusually high or low heart rates in the background, whic
placeholder="Message"
v-model="message.body"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 leading-tight focus:bg-white"
>
</textarea>
></textarea>
<div id="message-form-actions" class="flex">
<span id="message-form-warning">X chars left</span>
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
> Send
</button>
</div>
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
>
Send
</button>
</form>
</div>
</div>