[#1999] Add new project-editor.js file

akvo/rsr/static/scripts-src/project-editor/project-editor.js

@@ -0,0 +1,169 @@
+/** @jsx React.DOM */
+
+// Akvo RSR is covered by the GNU Affero General Public License.
+// See more details in the license.txt file located at the root folder of the
+// Akvo RSR module. For additional details on the GNU license please see
+// < http://www.gnu.org/licenses/agpl.html >.
+
+// DEFAULT VALUES
+var projectId = JSON.parse(document.getElementById("default-values").innerHTML).project_id,
+    i18n = JSON.parse(document.getElementById("translation-texts").innerHTML);
+
+// CSRF TOKEN
+function getCookie(name) {
+    var cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        var cookies = document.cookie.split(';');
+        for (var i = 0; i < cookies.length; i++) {
+            var cookie = cookies[i].trim();
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) == (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+var csrftoken = getCookie('csrftoken');
+
+function apiCall(method, url, data, successCallback, retries) {
+    var xmlHttp = new XMLHttpRequest();
+    var maxRetries = 5;
+
+    xmlHttp.onreadystatechange = function() {
+        if (xmlHttp.readyState == XMLHttpRequest.DONE) {
+            var response = xmlHttp.responseText !== '' ? JSON.parse(xmlHttp.responseText) : '';
+            if (xmlHttp.status >= 200 && xmlHttp.status < 400) {
+                if (method === 'GET' && response.next !== undefined) {
+                    if (response.next !== null) {
+                        var success = function(newResponse) {
+                            var oldResults = response.results;
+                            response.results = oldResults.concat(newResponse.results);
+                            return successCallback(response);
+                        };
+                        apiCall(method, response.next, data, success);
+                    } else {
+                        return successCallback(response);
+                    }
+                } else {
+                    return successCallback(response);
+                }
+            } else {
+                var message = i18n.general_error + ': ';
+                for (var key in response) {
+                    if (response.hasOwnProperty(key)) {
+                         message += response[key] + '. ';
+                    }
+                }
+                showGeneralError(message);
+                return false;
+            }
+        }
+    };
+
+    xmlHttp.onerror = function () {
+        if (retries === undefined) {
+            return apiCall(method, url, data, successCallback, 2);
+        } else if (retries <= maxRetries) {
+            return apiCall(method, url, data, successCallback, retries + 1);
+        } else {
+            showGeneralError(i18n.connection_error);
+            return false;
+        }
+    };
+
+    xmlHttp.open(method, url, true);
+    xmlHttp.setRequestHeader("X-CSRFToken", csrftoken);
+    xmlHttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+    xmlHttp.send(data);
+}
+
+function initApp() {
+    var ProjectEditorApp = React.createClass({displayName: 'ProjectEditorApp',
+        getInitialState: function() {
+            return {
+                title: ''
+            };
+        },
+
+        componentDidMount: function() {
+            // Once the component is mounted, first retrieve all the project's data and update the state.
+            var thisApp = this;
+            var success = function(response) {
+                // TODO: Update state (and check apiCall method).
+                return false;
+            };
+            apiCall('GET', endpoints.base_url + endpoints.project.replace('{project}', projectId), '', success);
+        },
+
+        updateField: function(field, newValue) {
+            // Update a field of the project.
+            var newState = this.state;
+            newState[field] = newValue;
+            this.setState(newState);
+        },
+
+        render: function() {
+            var language = window.location.pathname.substring(0, 3);
+            var projectTitle = this.state.title !== '' ? this.state.title : i18n.no_title;
+            return (
+                React.DOM.h3(null, i18n.project_editor, " ", i18n.of, " ", React.DOM.a( {href:language + '/project/' + projectId + '/', target:"_blank"}, projectTitle))
+            );
+        }
+    });
+
+    ReactDOM.render(
+        React.createElement(ProjectEditorApp),
+        document.querySelector('.project-editor-container')
+    );
+}
+
+var loadJS = function(url, implementationCode, location){
+    //url is URL of external file, implementationCode is the code
+    //to be called from the file, location is the location to
+    //insert the <script> element
+
+    var scriptTag = document.createElement('script');
+    scriptTag.src = url;
+
+    scriptTag.onload = implementationCode;
+    scriptTag.onreadystatechange = implementationCode;
+
+    location.appendChild(scriptTag);
+};
+
+function loadAndRenderReact() {
+    function loadReactDatepicker() {
+        var reactDatepickerSrc = document.getElementById('react-datepicker-compat').src;
+        loadJS(reactDatepickerSrc, initApp, document.body);
+    }
+
+    function loadReactOnclickoutside() {
+        var reactOnclickoutsideSrc = document.getElementById('react-onclickoutside').src;
+        loadJS(reactOnclickoutsideSrc, loadReactDatepicker, document.body);
+    }
+
+    function loadReactTypeahead() {
+        var reactTypeaheadSrc = document.getElementById('react-typeahead').src;
+        loadJS(reactTypeaheadSrc, loadReactOnclickoutside, document.body);
+    }
+
+    function loadReactDOM() {
+        var reactDOMSrc = document.getElementById('react-dom').src;
+        loadJS(reactDOMSrc, loadReactTypeahead, document.body);
+    }
+
+    console.log('No React, load again.');
+    var reactSrc = document.getElementById('react').src;
+    loadJS(reactSrc, loadReactDOM, document.body);
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Check if React is loaded
+    if (typeof React !== 'undefined' && typeof ReactDOM !== 'undefined' && typeof ReactTypeahead !== 'undefined' && typeof DatePicker !== 'undefined') {
+        initApp();
+    } else {
+        loadAndRenderReact();
+    }
+});