create base components and examples for map listing. see #41

web/client/api/GeoStoreDAO.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var axios = require('axios');
+
+/**
+ * API for local config
+ */
+var Api = {
+    getData: function(id, geoStoreBase) {
+        var url = geoStoreBase || "/rest/geostore/";
+        url += "data/" + id;
+        return axios.get(url).then(function(response) {
+            // render map
+            return response.data;
+        });
+    },
+    getResourcesByCategory: function(category, query, params, geoStoreBase) {
+        var url = geoStoreBase || "/rest/geostore/";
+        var q = query || "*";
+        url += "extjs/search/category/" + category + "/*" + q + "*/";
+        return axios.get(url, params).then(function(response) {return response.data; });
+    }
+};
+
+module.exports = Api;

web/client/components/MapManager/MapItem.jsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var React = require('react');
+var BootstrapReact = require('react-bootstrap');
+var ListGroupItem = BootstrapReact.ListGroupItem;
+
+var MapItem = React.createClass({
+    propTypes: {
+        id: React.PropTypes.number,
+        name: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
+        description: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
+        attributes: React.PropTypes.object,
+        glyphicon: React.PropTypes.string
+    },
+    render: function() {
+        return (
+           <ListGroupItem header={this.props.name}>{this.props.description}</ListGroupItem>
+        );
+    }
+});
+
+module.exports = MapItem;

web/client/components/MapManager/MapList.jsx

@@ -0,0 +1,34 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+ var React = require('react');
+var BootstrapReact = require('react-bootstrap');
+var ListGroup = BootstrapReact.ListGroup;
+var Panel = BootstrapReact.Panel;
+var MapItem = require('./MapItem');
+
+var MapList = React.createClass({
+    propTypes: {
+        panelProps: React.PropTypes.object,
+        data: React.PropTypes.array
+    },
+    getInitialState: function() {
+        return {maps: this.props.data};
+    },
+    renderMaps: function(maps) {
+        if (maps) {
+            return this.state.maps.map(function(map) {
+                return <MapItem key={map.id} {...map} />;
+            });
+        }
+    },
+    render: function() {
+        return (<Panel {...this.props.panelProps}><ListGroup>{this.renderMaps(this.state.maps)}</ListGroup></Panel>);
+    }
+});
+
+module.exports = MapList;

web/client/components/MapManager/__tests__/MapItem-test.jsx

@@ -0,0 +1,46 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var React = require('react/addons');
+var MapItem = require('../MapItem.jsx');
+var expect = require('expect');
+
+describe('This test for MapItem', () => {
+    afterEach((done) => {
+        React.unmountComponentAtNode(document.body);
+        document.body.innerHTML = '';
+        setTimeout(done);
+    });
+
+    // test DEFAULTS
+    it('creates the component with defaults', () => {
+        const mapItem = React.render(<MapItem/>, document.body);
+        expect(mapItem).toExist();
+
+        const mapItemDom = React.findDOMNode(mapItem);
+        expect(mapItemDom).toExist();
+
+        expect(mapItemDom.className).toBe('list-group-item');
+        const headings = mapItemDom.getElementsByClassName('list-group-item-heading');
+        expect(headings.length).toBe(0);
+    });
+    // test DEFAULTS
+    it('creates the component with data', () => {
+        const testName = "test";
+        const testDescription = "testDescription";
+        const mapItem = React.render(<MapItem name={testName} description={testDescription}/>, document.body);
+        expect(mapItem).toExist();
+
+        const mapItemDom = React.findDOMNode(mapItem);
+        expect(mapItemDom).toExist();
+
+        expect(mapItemDom.className).toBe('list-group-item');
+        const headings = mapItemDom.getElementsByClassName('list-group-item-heading');
+        expect(headings.length).toBe(1);
+        expect(headings[0].innerHTML).toBe(testName);
+    });
+});

web/client/components/MapManager/__tests__/MapList-test.jsx

@@ -0,0 +1,70 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var React = require('react/addons');
+var MapList = require('../MapList.jsx');
+var expect = require('expect');
+
+describe('This test for MapList', () => {
+    afterEach((done) => {
+        React.unmountComponentAtNode(document.body);
+        document.body.innerHTML = '';
+        setTimeout(done);
+    });
+
+    // test DEFAULTS
+    it('creates the component with defaults', () => {
+        const mapList = React.render(<MapList/>, document.body);
+        expect(mapList).toExist();
+
+        const dom = React.findDOMNode(mapList);
+        expect(dom).toExist();
+        // check body existence
+        const panelBody = dom.getElementsByClassName('panel-body');
+        expect(panelBody.length).toBe(1);
+        // check missing header
+        const headings = dom.getElementsByClassName('panel-heading');
+        expect(headings.length).toBe(0);
+    });
+
+    it('checks properties', () => {
+        const testTitle = "testTitle";
+        const mapList = React.render(<MapList panelProps={{header: testTitle}}/>, document.body);
+        expect(mapList).toExist();
+
+        const dom = React.findDOMNode(mapList);
+        expect(dom).toExist();
+        // check body
+        const panelBody = dom.getElementsByClassName('panel-body');
+        expect(panelBody.length).toBe(1, "Panel Body Missing");
+
+        // check header
+        const headings = dom.getElementsByClassName('panel-heading');
+        expect(headings.length).toBe(1, "Panel Heading Missing");
+        expect(headings[0].innerHTML).toBe(testTitle, "Panel Heading Incorrect");
+    });
+
+    it('checks data', () => {
+        var map1 = {id: 1, name: "a", description: "description"};
+        var map2 = {id: 2, name: "b", description: "description"};
+        const mapList = React.render(<MapList data={[map1, map2]}/>, document.body);
+        expect(mapList).toExist();
+        const dom = React.findDOMNode(mapList);
+        expect(dom).toExist();
+
+        // check body
+        const panelBody = dom.getElementsByClassName('panel-body');
+        expect(panelBody.length).toBe(1, "Panel Body Missing");
+
+        // check list
+        const list = panelBody[0].getElementsByTagName("ul");
+        expect(list.length).toBe(1, " list missing");
+
+        // check child number
+        expect(list[0].childNodes.length).toBe(2);
+    });
+});

web/client/examples/manager/app.jsx

@@ -0,0 +1,16 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var React = require('react');
+
+var MapList = require('../../components/MapManager/MapList');
+
+var GeoStoreApi = require('../../api/GeoStoreDAO');
+GeoStoreApi.getResourcesByCategory("MAP", "*", {start: 0, limit: 20}).then( function(data) {
+    React.render(
+        <MapList data={data.results} panelProps={{header: "Maps", collapsible: true, defaultExpanded: true }} totalCount={data.totalCount}/>, document.getElementById("mapList"));
+});

web/client/examples/manager/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>MapStore 2 Viewer</title>
+        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+        <link rel="stylesheet" href="https://bootswatch.com/lumen/bootstrap.min.css">
+        <!--script src="https://code.jquery.com/jquery-1.11.3.js"></script>
+
+        <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script-->
+
+        <style>
+
+        #aboutContainer {
+            z-index: 10;
+            top: 0px;
+            right: 0px;
+            position: absolute;
+            margin: 8px;
+        }
+        </style>
+    </head>
+    <body>
+        <div id="mapContainer"></div>
+        <div id="mapList"></div>
+        <div id="aboutContainer"></div>
+        <script src="../../dist/mapstore-commons.js"></script>
+        <script src="../../dist/manager.js"></script>
+    </body>
+</html>

web/client/examples/viewer/index.html

@@ -29,6 +29,7 @@
     <body>
         <div id="mapContainer"></div>
         <div id="aboutContainer"></div>
+        <script src="../../dist/mapstore-commons.js"></script>
         <script src="../../dist/viewer.js"></script>
     </body>
 </html>

webpack.config.js

@@ -1,4 +1,5 @@
 var path = require("path");
+var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
 var rewriteUrl = function(replacePath) {
     return function(req, opt) {  // gets called with request and proxy object
         var queryIndex = req.url.indexOf('?');
@@ -7,12 +8,18 @@ var rewriteUrl = function(replacePath) {
     };
 };
 module.exports = {
-    entry: path.join(__dirname, "web", "client", "examples", "viewer", "app"),
+    entry: {
+        viewer: path.join(__dirname, "web", "client", "examples", "viewer", "app"),
+        manager: path.join(__dirname, "web", "client", "examples", "manager", "app")
+    },
     output: {
       path: path.join(__dirname, "web", "client", "dist"),
         publicPath: "/dist/",
-        filename: "viewer.js"
+        filename: "[name].js"
     },
+    plugins: [
+       new CommonsChunkPlugin("commons", "mapstore-commons.js")
+    ],
     resolve: {
       extensions: ["", ".js", ".jsx"]
     },