summary refs log tree commit diff
path: root/webclient
diff options
context:
space:
mode:
authorMark Haines <mark.haines@matrix.org>2014-08-27 16:54:12 +0100
committerMark Haines <mark.haines@matrix.org>2014-08-27 16:54:12 +0100
commit1d95e78759cc1307d15d6cc6388f52063e833355 (patch)
tree0307617989016019bfd1d41a15b22499d02091ef /webclient
parentadd _get_room_member, fix datastore methods (diff)
parentAdded RestServlet for /rooms/$roomid/initialSync (diff)
downloadsynapse-1d95e78759cc1307d15d6cc6388f52063e833355.tar.xz
Merge branch 'develop' into storage_transactions
Diffstat (limited to 'webclient')
-rw-r--r--webclient/app-controller.js6
-rw-r--r--webclient/app.css58
-rw-r--r--webclient/app.js1
-rw-r--r--webclient/components/matrix/matrix-service.js56
-rw-r--r--webclient/home/home-controller.js67
-rw-r--r--webclient/home/home.html9
-rw-r--r--webclient/index.html4
-rw-r--r--webclient/recents/recents-controller.js70
-rw-r--r--webclient/recents/recents-filter.js47
-rw-r--r--webclient/recents/recents.html56
-rw-r--r--webclient/room/room-controller.js3
-rw-r--r--webclient/room/room.html6
12 files changed, 306 insertions, 77 deletions
diff --git a/webclient/app-controller.js b/webclient/app-controller.js
index f210119e21..5d3fa6ddc8 100644
--- a/webclient/app-controller.js
+++ b/webclient/app-controller.js
@@ -37,7 +37,11 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
         mPresence.start();
     }
     
-    $scope.go = function(url) {
+    /**
+     * Open a given page.
+     * @param {String} url url of the page
+     */
+    $scope.goToPage = function(url) {
         $location.url(url);
     };
     
diff --git a/webclient/app.css b/webclient/app.css
index dfa17fae62..8abdd1cb44 100644
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -342,6 +342,64 @@ h1 {
     top: 0;
 }
 
+/*** Recents ***/
+.recentsTable {
+    max-width: 480px;
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+
+.recentsTable tr {
+    width: 100%;
+}
+.recentsTable td {
+    vertical-align: text-top;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.recentsRoom {
+    cursor: pointer;
+}
+
+.recentsRoom:hover {
+    background-color: #f8f8ff;
+}
+
+.recentsRoomSelected {
+    background-color: #eee;
+}
+
+.recentsRoomName {
+    font-size: 16px;
+    padding-top: 7px;
+    width: auto;
+}
+
+.recentsRoomSummaryTS {
+    color: #888;
+    font-size: 12px;
+    width: 7em;
+    text-align: right;
+}
+
+.recentsRoomSummary {
+    color: #888;
+    font-size: 12px;
+    padding-bottom: 5px;
+}
+
+/*** Recents in the room page ***/
+#roomRecentsTableWrapper {
+    float: left;
+    max-width: 320px;
+    margin-right: 20px;
+    height: 100%;
+    overflow-y: auto;
+}
+
 /*** Profile ***/
 
 .profile-avatar {
diff --git a/webclient/app.js b/webclient/app.js
index 6cd50c5e54..1d5503ebc0 100644
--- a/webclient/app.js
+++ b/webclient/app.js
@@ -20,6 +20,7 @@ var matrixWebClient = angular.module('matrixWebClient', [
     'LoginController',
     'RoomController',
     'HomeController',
+    'RecentsController',
     'SettingsController',
     'UserController',
     'matrixService',
diff --git a/webclient/components/matrix/matrix-service.js b/webclient/components/matrix/matrix-service.js
index 2286485605..2feddac5d8 100644
--- a/webclient/components/matrix/matrix-service.js
+++ b/webclient/components/matrix/matrix-service.js
@@ -97,7 +97,7 @@ angular.module('matrixService', [])
         // Create a room
         create: function(room_id, visibility) {
             // The REST path spec
-            var path = "/rooms";
+            var path = "/createRoom";
 
             return doRequest("POST", path, undefined, {
                 visibility: visibility,
@@ -106,11 +106,20 @@ angular.module('matrixService', [])
         },
 
         // List all rooms joined or been invited to
-        rooms: function(from, to, limit) {
+        rooms: function(limit, feedback) {
             // The REST path spec
+
             var path = "/initialSync";
 
-            return doRequest("GET", path);
+            var params = {};
+            if (limit) {
+                params.limit = limit;
+            }
+            if (feedback) {
+                params.feedback = feedback;
+            }
+
+            return doRequest("GET", path, params);
         },
 
         // Joins a room
@@ -124,7 +133,8 @@ angular.module('matrixService', [])
 
             path = path.replace("$room_alias", room_alias);
 
-            return doRequest("PUT", path, undefined, {});
+            // TODO: PUT with txn ID
+            return doRequest("POST", path, undefined, {});
         },
 
         // Invite a user to a room
@@ -154,7 +164,7 @@ angular.module('matrixService', [])
 
         // Retrieves the room ID corresponding to a room alias
         resolveRoomAlias:function(room_alias) {
-            var path = "/matrix/client/api/v1/ds/room/$room_alias";
+            var path = "/matrix/client/api/v1/directory/room/$room_alias";
             room_alias = encodeURIComponent(room_alias);
 
             path = path.replace("$room_alias", room_alias);
@@ -234,7 +244,7 @@ angular.module('matrixService', [])
 
         // get a list of public rooms on your home server
         publicRooms: function() {
-            var path = "/public/rooms"
+            var path = "/publicRooms"
             return doRequest("GET", path);
         },
         
@@ -405,6 +415,40 @@ angular.module('matrixService', [])
             config.version = configVersion;
             localStorage.setItem("config", JSON.stringify(config));
         },
+
+
+        /****** Room aliases management ******/
+
+        /**
+         * Enhance data returned by rooms() and publicRooms() by adding room_alias
+         *  & room_display_name which are computed from data already retrieved from the server.
+         * @param {Array} data the response of rooms() and publicRooms()
+         * @returns {Array} the same array with enriched objects
+         */
+        assignRoomAliases: function(data) {
+            for (var i=0; i<data.length; i++) {
+                var alias = this.getRoomIdToAliasMapping(data[i].room_id);
+                if (alias) {
+                    // use the existing alias from storage
+                    data[i].room_alias = alias;
+                    data[i].room_display_name = alias;
+                }
+                else if (data[i].aliases && data[i].aliases[0]) {
+                    // save the mapping
+                    // TODO: select the smarter alias from the array
+                    this.createRoomIdToAliasMapping(data[i].room_id, data[i].aliases[0]);
+                    data[i].room_display_name = data[i].aliases[0];
+                }
+                else if (data[i].membership == "invite" && "inviter" in data[i]) {
+                    data[i].room_display_name = data[i].inviter + "'s room"
+                }
+                else {
+                    // last resort use the room id
+                    data[i].room_display_name = data[i].room_id;
+                }
+            }
+            return data;
+        },
         
         createRoomIdToAliasMapping: function(roomId, alias) {
             localStorage.setItem(MAPPING_PREFIX+roomId, alias);
diff --git a/webclient/home/home-controller.js b/webclient/home/home-controller.js
index 867ae522a6..e8e91eede7 100644
--- a/webclient/home/home-controller.js
+++ b/webclient/home/home-controller.js
@@ -16,12 +16,11 @@ limitations under the License.
 
 'use strict';
 
-angular.module('HomeController', ['matrixService', 'mFileInput', 'mFileUpload', 'eventHandlerService'])
-.controller('HomeController', ['$scope', '$location', 'matrixService', 'mFileUpload', 'eventHandlerService', 'eventStreamService', 
-                               function($scope, $location, matrixService, mFileUpload, eventHandlerService, eventStreamService) {
+angular.module('HomeController', ['matrixService', 'eventHandlerService', 'RecentsController'])
+.controller('HomeController', ['$scope', '$location', 'matrixService', 'eventHandlerService', 'eventStreamService', 
+                               function($scope, $location, matrixService, eventHandlerService, eventStreamService) {
 
     $scope.config = matrixService.config();
-    $scope.rooms = {};
     $scope.public_rooms = [];
     $scope.newRoomId = "";
     $scope.feedback = "";
@@ -32,72 +31,18 @@ angular.module('HomeController', ['matrixService', 'mFileInput', 'mFileUpload',
     };
     
     $scope.goToRoom = {
-        room_id: "",
+        room_id: ""
     };
 
     $scope.joinAlias = {
-        room_alias: "",
-    };
-    
-    $scope.$on(eventHandlerService.MEMBER_EVENT, function(ngEvent, event, isLive) {
-        var config = matrixService.config();
-        if (event.state_key === config.user_id && event.content.membership === "invite") {
-            console.log("Invited to room " + event.room_id);
-            // FIXME push membership to top level key to match /im/sync
-            event.membership = event.content.membership;
-            // FIXME bodge a nicer name than the room ID for this invite.
-            event.room_display_name = event.user_id + "'s room";
-            $scope.rooms[event.room_id] = event;
-        }
-    });
-    
-    var assignRoomAliases = function(data) {
-        for (var i=0; i<data.length; i++) {
-            var alias = matrixService.getRoomIdToAliasMapping(data[i].room_id);
-            if (alias) {
-                // use the existing alias from storage
-                data[i].room_alias = alias;
-                data[i].room_display_name = alias;
-            }
-            else if (data[i].aliases && data[i].aliases[0]) {
-                // save the mapping
-                // TODO: select the smarter alias from the array
-                matrixService.createRoomIdToAliasMapping(data[i].room_id, data[i].aliases[0]);
-                data[i].room_display_name = data[i].aliases[0];
-            }
-            else if (data[i].membership == "invite" && "inviter" in data[i]) {
-                data[i].room_display_name = data[i].inviter + "'s room"
-            }
-            else {
-                // last resort use the room id
-                data[i].room_display_name = data[i].room_id;
-            }
-        }
-        return data;
+        room_alias: ""
     };
 
     var refresh = function() {
-        // List all rooms joined or been invited to
-        matrixService.rooms(1,true).then(
-            function(response) {
-                var data = assignRoomAliases(response.data.rooms);
-                $scope.feedback = "Success";
-                for (var i=0; i<data.length; i++) {
-                    $scope.rooms[data[i].room_id] = data[i];
-                }
-
-                var presence = response.data.presence;
-                for (var i = 0; i < presence.length; ++i) {
-                    eventHandlerService.handleEvent(presence[i], false);
-                }
-            },
-            function(error) {
-                $scope.feedback = "Failure: " + error.data;
-            });
         
         matrixService.publicRooms().then(
             function(response) {
-                $scope.public_rooms = assignRoomAliases(response.data.chunk);
+                $scope.public_rooms = matrixService.assignRoomAliases(response.data.chunk);
             }
         );
 
diff --git a/webclient/home/home.html b/webclient/home/home.html
index 4084f4c388..d38b843d83 100644
--- a/webclient/home/home.html
+++ b/webclient/home/home.html
@@ -23,13 +23,8 @@
         </form>
     </div>
     
-    <h3>My rooms</h3>
-    
-    <div class="rooms" ng-repeat="(rm_id, room) in rooms">
-        <div>
-            <a href="#/room/{{ room.room_alias ? room.room_alias : rm_id }}" >{{ room.room_display_name }}</a> {{room.membership === 'invite' ? ' (invited)' : ''}}
-        </div>
-    </div>
+    <h3>Recents</h3>
+        <div ng-include="'recents/recents.html'"></div>
     <br/>
 
     <h3>Public rooms</h3>
diff --git a/webclient/index.html b/webclient/index.html
index 6031036e9a..16f0e8ac5f 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -19,6 +19,8 @@
     <script src="app-filter.js"></script>
     <script src="home/home-controller.js"></script>
     <script src="login/login-controller.js"></script>
+    <script src="recents/recents-controller.js"></script>
+    <script src="recents/recents-filter.js"></script>
     <script src="room/room-controller.js"></script>
     <script src="room/room-directive.js"></script>
     <script src="settings/settings-controller.js"></script>
@@ -37,7 +39,7 @@
     <header id="header">
         <!-- Do not show buttons on the login page -->
         <div id="header-buttons" ng-hide="'/login' == location ">
-            <button ng-click='go("settings")'>Settings</button>
+            <button ng-click='goToPage("settings")'>Settings</button>
             <button ng-click="logout()">Log out</button>
         </div>
     </header>
diff --git a/webclient/recents/recents-controller.js b/webclient/recents/recents-controller.js
new file mode 100644
index 0000000000..8f8b08d5bd
--- /dev/null
+++ b/webclient/recents/recents-controller.js
@@ -0,0 +1,70 @@
+/*
+ Copyright 2014 matrix.org
+ 
+ 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.
+ */
+
+'use strict';
+
+angular.module('RecentsController', ['matrixService', 'eventHandlerService'])
+.controller('RecentsController', ['$scope', 'matrixService', 'eventHandlerService', 'eventStreamService', 
+                               function($scope,  matrixService, eventHandlerService, eventStreamService) {
+    $scope.rooms = {};
+
+    // $scope of the parent where the recents component is included can override this value
+    // in order to highlight a specific room in the list
+    $scope.recentsSelectedRoomID;
+
+    $scope.$on(eventHandlerService.MEMBER_EVENT, function(ngEvent, event, isLive) {
+        var config = matrixService.config();
+        if (event.state_key === config.user_id && event.content.membership === "invite") {
+            console.log("Invited to room " + event.room_id);
+            // FIXME push membership to top level key to match /im/sync
+            event.membership = event.content.membership;
+            // FIXME bodge a nicer name than the room ID for this invite.
+            event.room_display_name = event.user_id + "'s room";
+            $scope.rooms[event.room_id] = event;
+        }
+    });
+    
+    var refresh = function() {
+        // List all rooms joined or been invited to
+        matrixService.rooms(1, false).then(
+            function(response) {
+                var data = matrixService.assignRoomAliases(response.data.rooms);
+                for (var i=0; i<data.length; i++) {
+                    $scope.rooms[data[i].room_id] = data[i];
+
+                    // Create a shortcut for the last message of this room
+                    if (data[i].messages && data[i].messages.chunk && data[i].messages.chunk[0]) {
+                        $scope.rooms[data[i].room_id].lastMsg = data[i].messages.chunk[0];
+                    }
+                }
+
+                var presence = response.data.presence;
+                for (var i = 0; i < presence.length; ++i) {
+                    eventHandlerService.handleEvent(presence[i], false);
+                }
+            },
+            function(error) {
+                $scope.feedback = "Failure: " + error.data;
+            }
+        );
+    };
+
+    $scope.onInit = function() {
+        refresh();
+    };
+    
+}]);
+
diff --git a/webclient/recents/recents-filter.js b/webclient/recents/recents-filter.js
new file mode 100644
index 0000000000..45653fca96
--- /dev/null
+++ b/webclient/recents/recents-filter.js
@@ -0,0 +1,47 @@
+/*
+ Copyright 2014 matrix.org
+ 
+ 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.
+ */
+
+'use strict';
+
+angular.module('RecentsController')
+.filter('orderRecents', function() {
+    return function(rooms) {
+
+        // Transform the dict into an array
+        // The key, room_id, is already in value objects
+        var filtered = [];
+        angular.forEach(rooms, function(value, key) {
+            filtered.push( value );
+        });
+
+        // And time sort them
+        // The room with the lastest message at first
+        filtered.sort(function (a, b) {
+            // Invite message does not have a body message nor ts
+            // Puth them at the top of the list
+            if (undefined === a.lastMsg) {
+                return -1;
+            }
+            else if (undefined === b.lastMsg) {
+                return 1;
+            }
+            else {
+                return b.lastMsg.ts - a.lastMsg.ts;
+            }
+        });
+        return filtered;
+    };
+});
\ No newline at end of file
diff --git a/webclient/recents/recents.html b/webclient/recents/recents.html
new file mode 100644
index 0000000000..6fda6c5c6b
--- /dev/null
+++ b/webclient/recents/recents.html
@@ -0,0 +1,56 @@
+<div ng-controller="RecentsController" data-ng-init="onInit()">
+    <table class="recentsTable">
+        <tbody ng-repeat="(rm_id, room) in rooms | orderRecents" 
+               ng-click="goToPage('room/' + (room.room_alias ? room.room_alias : room.room_id) )" 
+               class ="recentsRoom" 
+               ng-class="{'recentsRoomSelected': (room.room_id === recentsSelectedRoomID)}">
+            <tr>
+                <td class="recentsRoomName">
+                    {{ room.room_display_name }}
+                </td>
+                <td class="recentsRoomSummaryTS">
+                    {{ (room.lastMsg.ts) | date:'MMM d HH:mm' }}
+                </td>
+            </tr>
+
+            <tr>
+                <td colspan="2" class="recentsRoomSummary">
+
+                    <div ng-show="room.membership === 'invite'" >
+                        {{ room.inviter }} invited you
+                    </div>
+
+                    <div ng-hide="room.membership === 'invite'" ng-switch="room.lastMsg.type" >
+                         <div ng-switch-when="m.room.member">
+                            {{ room.lastMsg.user_id }}
+                            {{ {"join": "joined", "leave": "left", "invite": "invited"}[room.lastMsg.content.membership] }}
+                            {{ room.lastMsg.content.membership === "invite" ? (room.lastMsg.state_key || '') : '' }}
+                        </div>
+
+                        <div ng-switch-when="m.room.message">
+                            <div ng-switch="room.lastMsg.content.msgtype">
+                                <div ng-switch-when="m.text">
+                                    {{ room.lastMsg.user_id }} :
+                                    <span ng-bind-html="(room.lastMsg.content.body) | linky:'_blank'">
+                                    </span>
+                                </div>
+
+                                <div ng-switch-when="m.image">
+                                    {{ room.lastMsg.user_id }} sent an image
+                                </div>
+
+                                <div ng-switch-default>
+                                    {{ room.lastMsg.content }}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div ng-switch-default>
+                            {{ room.lastMsg }}
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index f49deaa489..641ccddce7 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -327,6 +327,9 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
     var onInit2 = function() {
         eventHandlerService.reInitRoom($scope.room_id); 
 
+        // Make recents highlight the current room
+        $scope.recentsSelectedRoomID = $scope.room_id;
+
         // Join the room
         matrixService.join($scope.room_id).then(
             function() {
diff --git a/webclient/room/room.html b/webclient/room/room.html
index c167819f15..236ca0a89b 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -7,7 +7,11 @@
     <div id="roomName">
         {{ room_alias || room_id }}
     </div>
-    
+
+    <div id="roomRecentsTableWrapper">
+        <div ng-include="'recents/recents.html'"></div>
+    </div>
+
     <div id="usersTableWrapper">
         <table id="usersTable">
             <tr ng-repeat="member in members | orderMembersList">