SYWEB-12: Add a 'Room Info' button which displays all state content.

Content displayed in a modal dialog. Currently only read-only.

webclient/app-filter.js

@@ -76,6 +76,17 @@ angular.module('matrixWebClient')
         return filtered;
     };
 })
+.filter('stateEventsFilter', function($sce) {
+    return function(events) {
+        var filtered = {};
+        angular.forEach(events, function(value, key) {
+            if (value && typeof(value.state_key) === "string") {
+                filtered[key] = value;
+            }
+        });
+        return filtered;
+    };
+})
 .filter('unsafe', ['$sce', function($sce) {
     return function(text) {
         return $sce.trustAsHtml(text);

webclient/room/room-controller.js

@@ -1017,6 +1017,15 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
         });
     };
 
+    $scope.openRoomInfo = function() {
+        var modalInstance = $modal.open({
+            templateUrl: 'roomInfoTemplate.html',
+            controller: 'RoomInfoController',
+            size: 'lg',
+            scope: $scope
+        });
+    };
+
 }])
 .controller('EventInfoController', function($scope, $modalInstance) {
     console.log("Displaying modal dialog for >>>> " + JSON.stringify($scope.event_selected));
@@ -1026,4 +1035,14 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
         console.log("Redact event >> " + JSON.stringify($scope.event_selected));
         $modalInstance.close("redact");
     };
+})
+.controller('RoomInfoController', function($scope, $modalInstance, $filter) {
+    console.log("Displaying room info.");
+
+    $scope.submitState = function(eventType, content) {
+        console.log("Submitting " + eventType + " with " + content);
+    }
+
+    $scope.dismiss = $modalInstance.dismiss;
+
 });

webclient/room/room.html

@@ -13,6 +13,34 @@
         </div>
     </script>
 
+    <script type="text/ng-template" id="roomInfoTemplate.html">
+        <div class="modal-body">
+            <table id="roomInfoTable">
+                <tr>
+                <th>
+                    Event Type
+                </th>
+                <th>
+                    Content
+                </th>
+                </tr>
+                <tr ng-repeat="(key, event) in events.rooms[room_id] | stateEventsFilter">
+                    <td>
+                        <pre>{{ key }}</pre>
+                    </td>
+                    <td>
+                        <pre>{{ event.content | json }}</pre>
+                    </td>
+                </tr>
+            </table>
+        </div>
+        <div class="modal-footer">
+            <button ng-click="dismiss()" type="button" class="btn">
+                Close
+            </button>
+        </div>
+    </script>
+
     <div id="roomHeader">
         <a href ng-click="goToPage('/')"><img src="img/logo-small.png" width="100" height="43" alt="[matrix]"/></a>
         <div class="roomHeaderInfo">
@@ -216,6 +244,9 @@
                         >
                     Video Call
                 </button>
+                <button ng-click="openRoomInfo()">
+                    Room Info
+                </button>
             </div>
         
             {{ feedback }}