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 { body {
padding: 20px; padding: 20px;
} }
error {
color: orange;
}
h3 { h3 {
color: brown; color: brown;
} }
p { h4 {
margin: 0; margin: 0;
color: red;
} }
img {
max-width: 100%; label {
max-height: 100%; display: block;
} }
input[type="text"] { input[type="text"] {
width: 360px; width: 360px;
} }
.chat { .radio-item {
border: 1px solid; display: inline-block;
width: 680px; }
height: 360px; 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; 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 @@ ...@@ -11,74 +11,69 @@
<link rel="stylesheet" href="gadget_erp5_chat.css" /> <link rel="stylesheet" href="gadget_erp5_chat.css" />
</head> </head>
<body> <body>
<div data-gadget-url="gadget_jio.html"
data-gadget-scope="storage_gadget"
data-gadget-sandbox="public"></div>
<h1>OfficeJS Chat</h1> <h1>OfficeJS Chat</h1>
<p class="chat-error">
</p>
<form class="login-form"> <form class="login-form">
<label>Name:</label> <label>Name:</label>
<br />
<input type="text" name="name" required="required" /> <input type="text" name="name" required="required" />
<br />
<label>Folder:</label> <label>Folder:</label>
<br />
<input type="text" name="folder" required="required" /> <input type="text" name="folder" required="required" />
<h3>Remote Storage</h3> <h3>Remote Storage</h3>
<input type="radio" name="remote" value="erp5" required="required" /> <label>
<label>ERP5</label> <input type="radio" name="remote" value="erp5" required="required" />
<br /> ERP5
<input type="radio" name="remote" value="dav" required="required" /> </label>
<label>DAV Storage</label> <label>
<br /> <input type="radio" name="remote" value="dav" required="required" />
<input type="radio" name="remote" value="dropbox" required="required" /> DAV Storage
<label>Dropbox</label> </label>
<br /> <label>
<input type="radio" name="remote" value="local" required="required" checked="checked" /> <input type="radio" name="remote" value="dropbox" required="required" />
<label>Local is Enough</label> Dropbox
<br /> </label>
<label>
<input type="radio" name="remote" value="local" required="required" checked="checked" />
Local is Enough
</label>
<h3>Storage Configuration</h3> <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> <a class="dropbox-link">Dropbox OAuth</a>
<br />
<label>Dropbox folder:</label> <label>Dropbox folder:</label>
<br /> <input type="text" name="remote_dropbox_url" placeholder="/Apps/OfficeJS Chat/.jio_documents" />
<input type="text" name="dropbox_url" value="/Apps/OfficeJS Chat/.jio_documents" />
<br />
<label>ERP5 URL:</label> <label>ERP5 URL:</label>
<br /> <input type="text" name="remote_erp5_url" placeholder="https://softinst75770.host.vifib.net/erp5/web_site_module/" />
<input type="text" name="erp5_url" value="https://softinst75770.host.vifib.net/erp5/web_site_module/" />
<br />
<label>WebDAV URL:</label> <label>WebDAV URL:</label>
<br /> <input type="text" name="remote_dav_url" placeholder="https://softinst75722.host.vifib.net/share" />
<input type="text" name="dav_url" value="https://softinst75722.host.vifib.net/share" />
<br />
<label>WebDAV Username:</label> <label>WebDAV Username:</label>
<br /> <input type="text" name="remote_dav_user" placeholder="eyqs" />
<input type="text" name="dav_user" value="eyqs" />
<br />
<label>WebDAV Password:</label> <label>WebDAV Password:</label>
<br /> <input type="text" name="remote_dav_pass" placeholder="correct horse battery staple" />
<input type="text" name="dav_pass" value="Aoeuidhtns" />
<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 /> <br />
<input type="submit" value="Login!" /> <input type="submit" value="Login!" />
</form> </form>
<form class="room-form"> <form class="room-form">
<h3>Join Rooms</h3>
<input type="text" name="room" required="required" /> <input type="text" name="room" required="required" />
<br /> <br />
<input type="submit" name="host" value="Create a new room!" /> <input type="submit" name="host" value="Create a new room!" />
<input type="submit" name="guest" value="Join an existing room!" /> <input type="submit" name="guest" value="Join an existing room!" />
</form> </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> </body>
</html> </html>
\ No newline at end of file
...@@ -7,21 +7,29 @@ ...@@ -7,21 +7,29 @@
<script src="rsvp.js"></script> <script src="rsvp.js"></script>
<script src="renderjs.js"></script> <script src="renderjs.js"></script>
<script src="jiodev.js"></script> <script src="jiodev.js"></script>
<script src="jio_mappingstorage.js"></script>
<script src="gadget_global.js" ></script> <script src="gadget_global.js" ></script>
<script src="fast_priority_queue.js"></script> <script src="fast_priority_queue.js"></script>
<script src="gadget_erp5_chat_panel.js"></script> <script src="gadget_erp5_chat_panel.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" />
</head> </head>
<body> <body>
<h3>Chat List</h3> <div class="chat-box">
<div class="chat"> <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> </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> </body>
</html> </html>
\ No newline at end of file
...@@ -7,59 +7,44 @@ ...@@ -7,59 +7,44 @@
<script src="rsvp.js"></script> <script src="rsvp.js"></script>
<script src="renderjs.js"></script> <script src="renderjs.js"></script>
<script src="adapter.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> <script src="gadget_erp5_chat_webrtc.js"></script>
</head> </head>
<body> <body>
<p class="webrtc-error"> <h3 class="webrtc-heading"></h3>
</p> <p class="error"></p>
<form class="auth-form"> <form class="auth-form">
<input type="radio" name="auth" value="erp5" required="required" /> <label>
<label>ERP5, URL:</label> <input type="radio" name="auth" value="erp5" required="required" />
<br /> ERP5, URL:
<input type="text" name="erp5_url" value="https://softinst75770.host.vifib.net/erp5/webrtc_rooms_module/" /> <input type="text" name="erp5_url" placeholder="https://softinst75770.host.vifib.net/erp5/webrtc_rooms_module/" />
<br /> </label>
<input type="radio" name="auth" value="dropbox" required="required" /> <label>
<label>Dropbox, Folder:</label> <input type="radio" name="auth" value="dropbox" required="required" />
<br /> Dropbox, Folder:
<input type="text" name="dropbox_url" value="/Apps/OfficeJS Chat" /> <input type="text" name="dropbox_url" placeholder="/Apps/OfficeJS Chat" />
<br /> </label>
<input type="submit" value="Authenticate!" /> <input type="submit" value="Authenticate!" />
</form> </form>
<form class="host-offer-form"> <form class="host-offer-form">
<label> <label>Paste your guest's offer in this box:</label>
Paste your guest's offer in this box:
</label>
<br />
<textarea rows="10" cols="80" name="send"></textarea> <textarea rows="10" cols="80" name="send"></textarea>
<br />
<input type="submit" value="Paste it!" /> <input type="submit" value="Paste it!" />
</form> </form>
<form class="host-answer-form"> <form class="host-answer-form">
<p> <p>This is your answer. Send it to your guest!</p>
This is your answer. Send it to your guest! <p class="receive"></p>
</p>
<p class="receive">
</p>
</form> </form>
<form class="guest-offer-form"> <form class="guest-offer-form">
<p> <p>This is your new offer. Send it to your host!</p>
This is your new offer. Send it to your host! <p class="receive"></p>
</p>
<p class="receive">
</p>
<input type="submit" value="I sent it to my host." /> <input type="submit" value="I sent it to my host." />
</form> </form>
<form class="guest-answer-form"> <form class="guest-answer-form">
<label> <label>Now, paste your host's answer in this box:</label>
Now, paste your host's answer in this box:
</label>
<br />
<textarea rows="10" cols="80" name="send"></textarea> <textarea rows="10" cols="80" name="send"></textarea>
<br />
<input type="submit" value="Paste it!" /> <input type="submit" value="Paste it!" />
</form> </form>
</body> </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/adapter_js
web_page_module/fast_priority_queue_js web_page_module/fast_priority_queue_js
web_page_module/gadget_erp5_chat* web_page_module/gadget_erp5_chat*
web_page_module/jio_mappingstorage_js
web_site_module/web_chat/** 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