adjustments for the beta version

Syncano-Community · Apr 5, 2017 · 9dfff89 · 9dfff89
1 parent 2e1c0a1
commit 9dfff89
Show file tree

Hide file tree

Showing 13 changed files with 205 additions and 121 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -14,7 +14,8 @@
         "semi": [
             2,
             "always"
-        ]
+        ],
+        no-undef: 1
     },
     "env": {
         "es6": true,

diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+syncano/.dist
+syncano/.bundles
+syncano/**/scripts/.bundles
diff --git a/index.html b/index.html
diff --git a/js/api.js b/js/api.js
diff --git a/syncano/chat/package.json b/syncano/chat/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "syncano-server": "0.7.2-43"
+  }
+}
diff --git a/syncano/chat/scripts/send_message.js b/syncano/chat/scripts/send_message.js
@@ -0,0 +1,7 @@
+import { channel, response } from 'syncano-server';
+
+const { username, text, room, token } = ARGS;
+
+channel.publish(`realtime.${token}`, { text, username })
+  .then(res => response(JSON.stringify(res), 200, 'application/json'))
+  .catch(err => response(JSON.stringify(err), 400, 'application/json'))
diff --git a/syncano/chat/socket.yml b/syncano/chat/socket.yml
@@ -0,0 +1,15 @@
+name: chat
+version: 0.0.1
+description: |
+  Realtime Chat Socket. It exposes two endpoints:
+  - send_message
+  - listen
+endpoints:
+  send_message:
+    file: scripts/send_message.js
+  realtime:
+    channel: realtime.{token}
+hosting:
+  staging:
+    src: ../web
+    cname: null
diff --git a/syncano/chat/yarn.lock b/syncano/chat/yarn.lock
@@ -0,0 +1,51 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+babel-runtime@^6.11.6:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
+[email protected]:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/buffer-to-arraybuffer/-/buffer-to-arraybuffer-0.0.4.tgz#f3e5e3f6f2632c71e7cdebe76ed1718fad421d4c"
+
+core-js@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
+
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  dependencies:
+    iconv-lite "~0.4.13"
+
+iconv-lite@~0.4.13:
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
+
+is-stream@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+
+[email protected]:
+  version "2.0.0-alpha.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.0.0-alpha.3.tgz#8031bded671c806e4604c16b27ab1973b4fe88cc"
+  dependencies:
+    babel-runtime "^6.11.6"
+    buffer-to-arraybuffer "0.0.4"
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
+regenerator-runtime@^0.10.0:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.3.tgz#8c4367a904b51ea62a908ac310bf99ff90a82a3e"
+
+[email protected]:
+  version "0.7.2-43"
+  resolved "https://registry.yarnpkg.com/syncano-server/-/syncano-server-0.7.2-43.tgz#ef7cb009ee10992b800aaf7f40a60c62e6728ecc"
+  dependencies:
+    node-fetch "2.0.0-alpha.3"
diff --git a/syncano/syncano.yml b/syncano/syncano.yml
diff --git a/img/syncano_logo_white.svg → web/img/syncano_logo_white.svg b/img/syncano_logo_white.svg → web/img/syncano_logo_white.svg
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,71 @@
+<head>
+  <title>Syncano Messenger</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+  <link rel="stylesheet" href="stylesheets/index.css" type="text/css" />
+  <script src="./js/syncano-client.min.js"></script>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      var s = new SyncanoClient('meadow-summer-5566');
+      var username = 'User ' + (Date.now()).toString().slice(-3);
+      var messageContent = document.getElementById('messageContent');
+      var sendMessageButton = document.getElementById('sendMessageButton');
+      var messageList = document.getElementById('messageList');
+
+      function handleMessage(message) {
+        var messageEl = '<li class="message">'
+            + '<span class="username">' + message.payload.username + '</span>'
+            + '<span class="message-body">' + message.payload.text + '</span>'
+            + '</li>';
+        messageList.innerHTML += messageEl;
+        scrollToLastMessage();
+      }
+
+      function scrollToLastMessage() {
+        var lastMessage = messageList.lastElementChild;
+        lastMessage.scrollIntoView({ behavior: 'smooth' });
+      }
+
+      function sendMessage(username) {
+        var text = messageContent.value;
+        if (text != '') {
+          s.post('chat/send_message', { text, username, room: 'chat', token: 'token' });
+          messageContent.value = '';
+        }
+      }
+
+      sendMessageButton.addEventListener('click', sendMessage);
+      messageContent.onkeypress = function(event) {
+        if (event.charCode === 13) {
+          sendMessage(username);
+          return false;
+        }
+      };
+
+      s.subscribe('chat/realtime', { token: 'token' }, message => {
+        handleMessage(message);
+      });
+    });
+  </script>
+</head>
+<body>
+  <div id="chatPage">
+    <div>
+      <div id="header">
+        <img src="img/syncano_logo_white.svg" alt="Syncano Logo">
+      </div>
+      <div id="messageListContainer">
+        <ul id="messageList">
+        </ul>
+      </div>
+      <div id="footer">
+          <div class="send-messages">
+            <div class="message-container"><textarea id="messageContent" rows="1" placeholder="Message..." tabindex="1"></textarea></div>
+            <div class="btn">
+              <a href="#" id="sendMessageButton">Send Message</a>
+              <a href="#" id="sendMessageButtonMobile">&#9166;</a>
+            </div>
+          </div>
+      </div>
+    </div>
+  </div>
+</body>
diff --git a/web/js/syncano-client.min.js b/web/js/syncano-client.min.js
diff --git a/stylesheets/index.css → web/stylesheets/index.css b/stylesheets/index.css → web/stylesheets/index.css
@@ -1,20 +1,28 @@
+html {
+  height: 100%;
+}
+
 body {
   font-family: true, Avenir, sans-serif;
-  margin: 0px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
 }
 
 #messageList {
   display: inline;
+  color: #0B0F15;
 }
 
 #messageListContainer {
-  margin-top: 5vh;
-  max-height: 85vh;
+  height: 82vh;
   overflow: scroll;
 
 }
 #header {
-  background-color: #244273;
+  background-color: #0B0F15;
   left: 0;
   right: 0;
   top: 0;
@@ -31,7 +39,7 @@ body {
 
 .username {
   font-weight: bold;
-  display: block
+  display: block;
 }
 
 .message {
@@ -45,19 +53,21 @@ body {
 }
 
 #footer {
-  padding: 0px 40px 10px 40px;
+  padding: 0px 40px 20px 40px;
 }
 
 .send-messages {
   display: flex;
 }
 #messageContent {
   width: 100%;
-  border: 3px solid #eeeeee;
+  border: 1px solid #0B0F15;
   font-family: Avenir, sans-serif;
   font-size: 1em;
+  font-weight: 100;
   resize: none;
   line-height: 2.5em;
+  padding-left: 10px;
 }
 
 .message-container {
@@ -70,22 +80,46 @@ body {
 
 .btn {
   display: flex;
-  margin: 1px 10px 2px 10px;
+  margin: 0px 10px 2px 10px;
   padding: 10px;
-  border-radius: 2px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
-  background-color: #FFCC01;
-  color: #1D2228;
-  transition: background-color .3s;
+  border-style: solid;
+  border-radius: 6px;
+  border-width: 2px;
+  border-color: #E51148;
+  transition: all .5s;
 }
 
 .btn:hover, .btn:focus {
-  background-color: #eabb00;
+  box-shadow: 0 1px 4px #b90f3b;
+  font-weight: 500;
+}
+
+@media (max-width: 600px) {
+  #sendMessageButton {
+    display: none;
+  }
+
+  .btn {
+    width: 27px;
+    font-size: 16px;
+  }
 }
 
+@media (min-width: 601px) {
+  #sendMessageButtonMobile {
+    display: none;
+  }
+}
 #sendMessageButton {
   margin: auto;
-  color: #1D2228;
+  color: #E51148;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+#sendMessageButtonMobile {
+  margin: auto;
+  color: #E51148;
   text-decoration: none;
   white-space: nowrap;
 }