Commit af967d44 authored by Eugene Shen's avatar Eugene Shen

Implement multi-room messaging

Add font, remove unused JIO Mapping Storage,
split chat box into contacts and chats tabs,
only send join and leave notifications to others,
add message colours, change styles with favicons,
declare new WebRTC gadgets for every room connection,
create new room with their own names for each client,
manage more query values in parent gadget with less code,
generate Dropbox link to stuff URL queries as state info,
prepare parseParams to handle new connections from the panel,
strip whitespaces, delete "my_", remove line breaks with CSS,
understand how queues in .ready() block .declareService() forever,
and finally, use flexbox CSS to completely overhaul look and feel.
parent 01b24062
body {
padding: 20px;
}
error {
color: orange;
}
h3 {
color: brown;
}
p {
h4 {
margin: 0;
color: red;
}
img {
max-width: 100%;
max-height: 100%;
label {
display: block;
}
input[type="text"] {
width: 360px;
}
.chat {
border: 1px solid;
width: 680px;
height: 360px;
.radio-item {
display: inline-block;
}
textarea {
display: block;
}
.chat-box {
display: flex;
width: 100%;
height: 80vh;
}
.chat-left-panel {
display: flex;
flex-direction: column;
flex: 1;
padding: 20px;
border: 1.5px solid;
box-sizing: border-box;
}
.chat-right-panel {
display: flex;
flex-direction: column;
flex: 2;
padding: 20px;
border: 1.5px solid;
box-sizing: border-box;
}
.contact-list {
flex: 1;
padding: 0;
overflow: auto;
}
.chat-list {
flex: 1;
padding: 0;
overflow: auto;
}
li {
list-style-type: none;
}
img {
max-width: 100%;
max-height: 100%;
}
.center {
text-align: center;
}
.send-form {
display: flex;
}
.send-form input[type="text"] {
flex: 1;
margin: 0 10px 0 0;
}
.chat-list li {
font-family: "Droid Sans Mono";
font-size: 12px;
}
.contact-list li {
color: blue;
}
.contact-list li:hover {
font-weight: bold;
cursor: pointer;
}
.contact-list li.notify {
font-weight: bold;
color: red;
}
\ No newline at end of file
......@@ -11,74 +11,69 @@
<link rel="stylesheet" href="gadget_erp5_chat.css" />
</head>
<body>
<div data-gadget-url="gadget_jio.html"
data-gadget-scope="storage_gadget"
data-gadget-sandbox="public"></div>
<h1>OfficeJS Chat</h1>
<p class="chat-error">
</p>
<form class="login-form">
<label>Name:</label>
<br />
<input type="text" name="name" required="required" />
<br />
<label>Folder:</label>
<br />
<input type="text" name="folder" required="required" />
<h3>Remote Storage</h3>
<input type="radio" name="remote" value="erp5" required="required" />
<label>ERP5</label>
<br />
<input type="radio" name="remote" value="dav" required="required" />
<label>DAV Storage</label>
<br />
<input type="radio" name="remote" value="dropbox" required="required" />
<label>Dropbox</label>
<br />
<input type="radio" name="remote" value="local" required="required" checked="checked" />
<label>Local is Enough</label>
<br />
<label>
<input type="radio" name="remote" value="erp5" required="required" />
ERP5
</label>
<label>
<input type="radio" name="remote" value="dav" required="required" />
DAV Storage
</label>
<label>
<input type="radio" name="remote" value="dropbox" required="required" />
Dropbox
</label>
<label>
<input type="radio" name="remote" value="local" required="required" checked="checked" />
Local is Enough
</label>
<h3>Storage Configuration</h3>
<a href="https://www.dropbox.com/1/oauth2/authorize?client_id=igeiyv4pkt0y0mm&response_type=token&redirect_uri=https://softinst75770.host.vifib.net/erp5/web_site_module/web_chat/">Dropbox OAuth Link</a>
<br />
<a class="dropbox-link">Dropbox OAuth</a>
<label>Dropbox folder:</label>
<br />
<input type="text" name="dropbox_url" value="/Apps/OfficeJS Chat/.jio_documents" />
<br />
<input type="text" name="remote_dropbox_url" placeholder="/Apps/OfficeJS Chat/.jio_documents" />
<label>ERP5 URL:</label>
<br />
<input type="text" name="erp5_url" value="https://softinst75770.host.vifib.net/erp5/web_site_module/" />
<br />
<input type="text" name="remote_erp5_url" placeholder="https://softinst75770.host.vifib.net/erp5/web_site_module/" />
<label>WebDAV URL:</label>
<br />
<input type="text" name="dav_url" value="https://softinst75722.host.vifib.net/share" />
<br />
<input type="text" name="remote_dav_url" placeholder="https://softinst75722.host.vifib.net/share" />
<label>WebDAV Username:</label>
<br />
<input type="text" name="dav_user" value="eyqs" />
<br />
<input type="text" name="remote_dav_user" placeholder="eyqs" />
<label>WebDAV Password:</label>
<br />
<input type="text" name="dav_pass" value="Aoeuidhtns" />
<input type="text" name="remote_dav_pass" placeholder="correct horse battery staple" />
<h3>Default WebRTC Configuration</h3>
<label>Automatically connect to own room:
<input type="checkbox" name="auto" />
</label>
<label>Default storage:</label>
<input type="text" name="auth" placeholder="dropbox" />
<label>Dropbox folder:</label>
<input type="text" name="auth_dropbox_url" placeholder="/Apps/OfficeJS Chat" />
<label>ERP5 URL:</label>
<input type="text" name="auth_erp5_url" placeholder="https://softinst75770.host.vifib.net/erp5/webrtc_rooms_module/" />
<br />
<input type="submit" value="Login!" />
</form>
<form class="room-form">
<h3>Join Rooms</h3>
<input type="text" name="room" required="required" />
<br />
<input type="submit" name="host" value="Create a new room!" />
<input type="submit" name="guest" value="Join an existing room!" />
</form>
<div data-gadget-url="gadget_jio.html"
data-gadget-scope="storage_gadget"
data-gadget-sandbox="public"></div>
<div data-gadget-url="gadget_erp5_chat_webrtc.html"
data-gadget-scope="webrtc_gadget"
data-gadget-sandbox="public" class="webrtc-panel"></div>
<div data-gadget-url="gadget_erp5_chat_panel.html"
data-gadget-scope="chat_gadget"
data-gadget-sandbox="public" class="chat-panel"></div>
</body>
</html>
\ No newline at end of file
......@@ -7,21 +7,29 @@
<script src="rsvp.js"></script>
<script src="renderjs.js"></script>
<script src="jiodev.js"></script>
<script src="jio_mappingstorage.js"></script>
<script src="gadget_global.js" ></script>
<script src="fast_priority_queue.js"></script>
<script src="gadget_erp5_chat_panel.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" />
</head>
<body>
<h3>Chat List</h3>
<div class="chat">
<div class="chat-box">
<div class="chat-left-panel">
<h4 class="center">Contacts</h4>
<ul class="contact-list"></ul>
<form class="manage-form">
<input type="submit" name="sync" value="Synchronize!" />
<input type="submit" name="contact" value="Add new contact!" />
</form>
</div>
<div class="chat-right-panel">
<h4 class="chat-title center"></h4>
<ul class="chat-list"></ul>
<form class="send-form">
<input type="text" name="content" />
<input type="submit" name="send" value="Send!" />
</form>
</div>
</div>
<form class="send-form">
<input type="text" name="content" />
<input type="submit" value="Send!" />
</form>
<form class="sync-form">
<input type="submit" value="Synchronize!" />
</form>
</body>
</html>
\ No newline at end of file
......@@ -7,59 +7,44 @@
<script src="rsvp.js"></script>
<script src="renderjs.js"></script>
<script src="adapter.js"></script>
<script src="gadget_global.js" ></script>
<script src="gadget_global.js"></script>
<script src="gadget_erp5_chat_webrtc.js"></script>
</head>
<body>
<p class="webrtc-error">
</p>
<h3 class="webrtc-heading"></h3>
<p class="error"></p>
<form class="auth-form">
<input type="radio" name="auth" value="erp5" required="required" />
<label>ERP5, URL:</label>
<br />
<input type="text" name="erp5_url" value="https://softinst75770.host.vifib.net/erp5/webrtc_rooms_module/" />
<br />
<input type="radio" name="auth" value="dropbox" required="required" />
<label>Dropbox, Folder:</label>
<br />
<input type="text" name="dropbox_url" value="/Apps/OfficeJS Chat" />
<br />
<label>
<input type="radio" name="auth" value="erp5" required="required" />
ERP5, URL:
<input type="text" name="erp5_url" placeholder="https://softinst75770.host.vifib.net/erp5/webrtc_rooms_module/" />
</label>
<label>
<input type="radio" name="auth" value="dropbox" required="required" />
Dropbox, Folder:
<input type="text" name="dropbox_url" placeholder="/Apps/OfficeJS Chat" />
</label>
<input type="submit" value="Authenticate!" />
</form>
<form class="host-offer-form">
<label>
Paste your guest's offer in this box:
</label>
<br />
<label>Paste your guest's offer in this box:</label>
<textarea rows="10" cols="80" name="send"></textarea>
<br />
<input type="submit" value="Paste it!" />
</form>
<form class="host-answer-form">
<p>
This is your answer. Send it to your guest!
</p>
<p class="receive">
</p>
<p>This is your answer. Send it to your guest!</p>
<p class="receive"></p>
</form>
<form class="guest-offer-form">
<p>
This is your new offer. Send it to your host!
</p>
<p class="receive">
</p>
<p>This is your new offer. Send it to your host!</p>
<p class="receive"></p>
<input type="submit" value="I sent it to my host." />
</form>
<form class="guest-answer-form">
<label>
Now, paste your host's answer in this box:
</label>
<br />
<label>Now, paste your host's answer in this box:</label>
<textarea rows="10" cols="80" name="send"></textarea>
<br />
<input type="submit" value="Paste it!" />
</form>
</body>
......
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="Web Script" module="erp5.portal_type"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_Access_contents_information_Permission</string> </key>
<value>
<tuple>
<string>Anonymous</string>
<string>Assignee</string>
<string>Assignor</string>
<string>Associate</string>
<string>Auditor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Add_portal_content_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Change_local_roles_Permission</string> </key>
<value>
<tuple>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Modify_portal_content_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_View_Permission</string> </key>
<value>
<tuple>
<string>Anonymous</string>
<string>Assignee</string>
<string>Assignor</string>
<string>Associate</string>
<string>Auditor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>categories</string> </key>
<value>
<tuple>
<string>classification/collaborative/team</string>
<string>contributor/person_module/1</string>
</tuple>
</value>
</item>
<item>
<key> <string>content_md5</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>jio_mappingstorage.js</string> </value>
</item>
<item>
<key> <string>description</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>jio_mappingstorage_js</string> </value>
</item>
<item>
<key> <string>language</string> </key>
<value> <string>en</string> </value>
</item>
<item>
<key> <string>portal_type</string> </key>
<value> <string>Web Script</string> </value>
</item>
<item>
<key> <string>short_title</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string>JIO Mapping Storage JS</string> </value>
</item>
<item>
<key> <string>version</string> </key>
<value> <string>001</string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
web_page_module/adapter_js
web_page_module/fast_priority_queue_js
web_page_module/gadget_erp5_chat*
web_page_module/jio_mappingstorage_js
web_site_module/web_chat/**
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment