diff --git a/ChatService/public/index.html b/ChatService/public/index.html
index 0f1e333b902fab1104436240ba0a76beb3861687..a14a942a9615139e8592f8046cf9b6257f568f53 100644
--- a/ChatService/public/index.html
+++ b/ChatService/public/index.html
@@ -1,19 +1,4 @@
<!DOCTYPE html>
-<!--
-Copyright (c) 2016 Google Inc.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
<html>
<head>
<meta charset=utf-8 />
@@ -24,89 +9,37 @@ limitations under the License.
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <link rel="stylesheet" href="style/main.css">
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style/chatstyle.css">
<script src="//cdn.bootcss.com/angular.js/1.4.3/angular.min.js"></script>
<link rel="manifest" href="/manifest.json">
</head>
-<body>
-<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
-
- <!-- Header section containing title -->
- <header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
- <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
- <div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
- <h3>Firebase Cloud Messaging</h3>
- </div>
- </div>
- </header>
-
- <main class="mdl-layout__content mdl-color--grey-100">
- <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
-
- <!-- Container for the Table of content -->
- <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
- <div class="mdl-card__supporting-text mdl-color-text--grey-600">
- <!-- div to display the generated Instance ID token -->
- <div id="token_div" style="display: none;">
- <h4>Instance ID Token</h4>
- <p id="token" style="word-break: break-all;"></p>
- <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"
- onclick="deleteToken()">Delete Token</button>
- </div>
- <!-- div to display the UI to allow the request for permission to
- notify the user. This is shown if the app has not yet been
- granted permission to notify. -->
- <div id="permission_div" style="display: none;">
- <h4>Needs Permission</h4>
- <p id="token"></p>
- <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"
- onclick="requestPermission()">Request Permission</button>
- </div>
- <!-- div to display messages received by this app. -->
- <div id="messages"></div>
- </div>
- </div>
-
- </div>
- </main>
+<body style="width: 510px; height: 500px; margin: 0 auto;">
<div class="container">
- <div class="row">
-
+ <div class="row">
<div class="col-sm-8">
<div class="chatbody">
- <div class="panel panel-primary">
+ <div class="panel panel-primary">
<div class="panel-body msg_container_base">
-
<div class="row msg_container base_sent">
<div class="col-md-10 col-xs-10">
<div class="messages msg_sent">
<p>that mongodb thing looks good, huh?
tiny master db, and huge document store</p>
- <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
</div>
</div>
- <div class="col-md-2 col-xs-2 avatar">
- <!-- <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive "> -->
- </div>
</div>
<div class="row msg_container base_receive">
- <div class="col-md-2 col-xs-2 avatar">
- <!-- <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive "> -->
- </div>
<div class="col-md-10 col-xs-10">
<div class="messages msg_receive">
<p>that mongodb thing looks good, huh?
tiny master db, and huge document store</p>
- <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
</div>
</div>
</div>
-
</div>
-
<div class="panel-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." style="width:85%" />
@@ -116,11 +49,9 @@ limitations under the License.
</div>
</div>
</div>
-
- </div>
- </div>
+ </div>
+ </div>
</div>
-</div>
<!-- Import and configure the Firebase SDK -->
<!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
@@ -146,10 +77,25 @@ limitations under the License.
// Retrieve Firebase Messaging object.
const messaging = firebase.messaging();
// [END get_messaging_object]
+ messaging.requestPermission()
+ .then(function() {
+ console.log('Notification permission granted.');
+ })
+ .catch(function(err) {
+ console.log('Unable to get permission to notify.', err);
+ });
- // IDs of divs that display Instance ID token UI or request permission UI.
- const tokenDivId = 'token_div';
- const permissionDivId = 'permission_div';
+ messaging.getToken()
+ .then(function(currentToken) {
+ if (currentToken) {
+ console.log(currentToken);
+ } else {
+ console.log('No Instance ID token available. Request permission to generate one.');
+ }
+ })
+ .catch(function(err) {
+ console.log('An error occurred while retrieving token. ', err);
+ });
// [START refresh_token]
// Callback fired if Instance ID token is updated.
@@ -157,19 +103,10 @@ limitations under the License.
messaging.getToken()
.then(function(refreshedToken) {
console.log('Token refreshed.');
- // Indicate that the new Instance ID token has not yet been sent to the
- // app server.
- setTokenSentToServer(false);
- // Send Instance ID token to app server.
- sendTokenToServer(refreshedToken);
- // [START_EXCLUDE]
- // Display new Instance ID token and clear UI of all previous messages.
- resetUI();
- // [END_EXCLUDE]
+ // Indicate that the new Instance ID token has not yet been sent to the app server.
})
.catch(function(err) {
console.log('Unable to retrieve refreshed token ', err);
- showToken('Unable to retrieve refreshed token ', err);
});
});
// [END refresh_token]
@@ -188,116 +125,6 @@ limitations under the License.
});
// [END receive_message]
- function resetUI() {
- clearMessages();
- showToken('loading...');
- // [START get_token]
- // Get Instance ID token. Initially this makes a network call, once retrieved
- // subsequent calls to getToken will return from cache.
- messaging.getToken()
- .then(function(currentToken) {
- if (currentToken) {
- sendTokenToServer(currentToken);
- updateUIForPushEnabled(currentToken);
- } else {
- // Show permission request.
- console.log('No Instance ID token available. Request permission to generate one.');
- // Show permission UI.
- updateUIForPushPermissionRequired();
- setTokenSentToServer(false);
- }
- })
- .catch(function(err) {
- console.log('An error occurred while retrieving token. ', err);
- showToken('Error retrieving Instance ID token. ', err);
- setTokenSentToServer(false);
- });
- }
- // [END get_token]
-
- function showToken(currentToken) {
- // Show token in console and UI.
- var tokenElement = document.querySelector('#token');
- tokenElement.textContent = currentToken;
- }
-
- // Send the Instance ID token your application server, so that it can:
- // - send messages back to this app
- // - subscribe/unsubscribe the token from topics
- function sendTokenToServer(currentToken) {
- if (!isTokenSentToServer()) {
- console.log('Sending token to server...');
- // TODO(developer): Send the current token to your server.
- setTokenSentToServer(true);
- } else {
- console.log('Token already sent to server so won\'t send it again ' +
- 'unless it changes');
- }
-
- }
-
- function isTokenSentToServer() {
- return window.localStorage.getItem('sentToServer') == 1;
- }
-
- function setTokenSentToServer(sent) {
- window.localStorage.setItem('sentToServer', sent ? 1 : 0);
- }
-
- function showHideDiv(divId, show) {
- const div = document.querySelector('#' + divId);
- if (show) {
- div.style = "display: visible";
- } else {
- div.style = "display: none";
- }
- }
-
- function requestPermission() {
- console.log('Requesting permission...');
- // [START request_permission]
- messaging.requestPermission()
- .then(function() {
- console.log('Notification permission granted.');
- // TODO(developer): Retrieve an Instance ID token for use with FCM.
- // [START_EXCLUDE]
- // In many cases once an app has been granted notification permission, it
- // should update its UI reflecting this.
- resetUI();
- // [END_EXCLUDE]
- })
- .catch(function(err) {
- console.log('Unable to get permission to notify.', err);
- });
- // [END request_permission]
- }
-
- function deleteToken() {
- // Delete Instance ID token.
- // [START delete_token]
- messaging.getToken()
- .then(function(currentToken) {
- messaging.deleteToken(currentToken)
- .then(function() {
- console.log('Token deleted.');
- setTokenSentToServer(false);
- // [START_EXCLUDE]
- // Once token is deleted update UI.
- resetUI();
- // [END_EXCLUDE]
- })
- .catch(function(err) {
- console.log('Unable to delete token. ', err);
- });
- // [END delete_token]
- })
- .catch(function(err) {
- console.log('Error retrieving Instance ID token. ', err);
- showToken('Error retrieving Instance ID token. ', err);
- });
-
- }
-
// Add a message to the messages element.
function appendMessage(payload) {
const messagesElement = document.querySelector('#messages');
@@ -310,26 +137,6 @@ limitations under the License.
messagesElement.appendChild(dataElement);
}
- // Clear the messages element of all children.
- function clearMessages() {
- const messagesElement = document.querySelector('#messages');
- while (messagesElement.hasChildNodes()) {
- messagesElement.removeChild(messagesElement.lastChild);
- }
- }
-
- function updateUIForPushEnabled(currentToken) {
- showHideDiv(tokenDivId, true);
- showHideDiv(permissionDivId, false);
- showToken(currentToken);
- }
-
- function updateUIForPushPermissionRequired() {
- showHideDiv(tokenDivId, false);
- showHideDiv(permissionDivId, true);
- }
-
- resetUI();
</script>
</body>
</html>
diff --git a/views/chat.html b/views/chat.html
deleted file mode 100644
index fd7fdb8c47b095f62329d2593fe2e57d546eee30..0000000000000000000000000000000000000000
--- a/views/chat.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-<link rel="stylesheet" href="chatstyle.css">
-<script src="//cdn.bootcss.com/angular.js/1.4.3/angular.min.js"></script>
-<div class="container">
- <div class="row">
-
- <div class="col-sm-8">
- <div class="chatbody">
- <div class="panel panel-primary">
- <div class="panel-body msg_container_base">
-
- <div class="row msg_container base_sent">
- <div class="col-md-10 col-xs-10">
- <div class="messages msg_sent">
- <p>that mongodb thing looks good, huh?
- tiny master db, and huge document store</p>
- <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
- </div>
- </div>
- <div class="col-md-2 col-xs-2 avatar">
- <!-- <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive "> -->
- </div>
- </div>
-
- <div class="row msg_container base_receive">
- <div class="col-md-2 col-xs-2 avatar">
- <!-- <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive "> -->
- </div>
- <div class="col-md-10 col-xs-10">
- <div class="messages msg_receive">
- <p>that mongodb thing looks good, huh?
- tiny master db, and huge document store</p>
- <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
- </div>
- </div>
- </div>
-
- </div>
-
- <div class="panel-footer">
- <div class="input-group">
- <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." style="width:85%" />
- <span class="input-group-btn">
- <button class="btn btn-primary btn-sm" id="btn-chat"><i class="fa fa-send fa-1x" aria-hidden="true"></i></button>
- </span>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-</div>
\ No newline at end of file
diff --git a/views/chatstyle.css b/views/chatstyle.css
deleted file mode 100644
index 809d5d07dd09c8cb23759c77dc2e24f236b12171..0000000000000000000000000000000000000000
--- a/views/chatstyle.css
+++ /dev/null
@@ -1,165 +0,0 @@
-.chatperson{
- display: block;
- border-bottom: 1px solid #eee;
- width: 100%;
- display: flex;
- align-items: center;
- white-space: nowrap;
- overflow: hidden;
- margin-bottom: 15px;
- padding: 4px;
-}
-.chatperson:hover{
- text-decoration: none;
- border-bottom: 1px solid orange;
-}
-.namechat {
- display: inline-block;
- vertical-align: middle;
-}
-.chatperson .chatimg img{
- width: 40px;
- height: 40px;
- background-image: url('http://i.imgur.com/JqEuJ6t.png');
-}
-.chatperson .pname{
- font-size: 18px;
- padding-left: 5px;
-}
-.chatperson .lastmsg{
- font-size: 12px;
- padding-left: 5px;
- color: #ccc;
-}
-
-body{
- height:400px;
- position: fixed;
- bottom: 0;
-}
-.col-md-2, .col-md-10{
- padding:0;
-}
-.panel{
- margin-bottom: 0px;
-}
-.chat-window{
- bottom:0;
- position:fixed;
- float:right;
- margin-left:10px;
-}
-.chat-window > div > .panel{
- border-radius: 5px 5px 0 0;
-}
-.icon_minim{
- padding:2px 10px;
-}
-.msg_container_base{
- background: #e5e5e5;
- margin: 0;
- padding: 0 10px 10px;
- max-height:300px;
- overflow-x:hidden;
-}
-.top-bar {
- background: #666;
- color: white;
- padding: 10px;
- position: relative;
- overflow: hidden;
-}
-.msg_receive{
- padding-left:0;
- margin-left:0;
-}
-.msg_sent{
- padding-bottom:20px !important;
- margin-right:0;
-}
-.messages {
- background: white;
- padding: 10px;
- border-radius: 2px;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
- max-width:100%;
-}
-.messages > p {
- font-size: 13px;
- margin: 0 0 0.2rem 0;
- }
-.messages > time {
- font-size: 11px;
- color: #ccc;
-}
-.msg_container {
- padding: 10px;
- overflow: hidden;
- display: flex;
-}
-img {
- display: block;
- width: 100%;
-}
-.avatar {
- position: relative;
- width:50px;
-}
-.base_receive > .avatar:after {
- content: "";
- position: absolute;
- top: 0;
- right: 0;
- width: 0;
- height: 0;
- border: 5px solid #FFF;
- border-left-color: rgba(0, 0, 0, 0);
- border-bottom-color: rgba(0, 0, 0, 0);
-}
-
-.base_sent {
- justify-content: flex-end;
- align-items: flex-end;
-}
-.base_sent > .avatar:after {
- content: "";
- position: absolute;
- bottom: 0;
- left: 0;
- width: 0;
- height: 0;
- border: 5px solid white;
- border-right-color: transparent;
- border-top-color: transparent;
- box-shadow: 1px 1px 2px rgba(black, 0.2); // not quite perfect but close
-}
-
-.msg_sent > time{
- float: right;
-}
-
-
-
-.msg_container_base::-webkit-scrollbar-track
-{
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
- background-color: #F5F5F5;
-}
-
-.msg_container_base::-webkit-scrollbar
-{
- width: 12px;
- background-color: #F5F5F5;
-}
-
-.msg_container_base::-webkit-scrollbar-thumb
-{
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
- background-color: #555;
-}
-
-.btn-group.dropup{
- position:fixed;
- left:0px;
- bottom:0;
-}
\ No newline at end of file