Skip to content

2. Frontend Development

Jump to bottom Edit New page
Liwei edited this page Jun 10, 2017 · 44 revisions

Page Outline

Frontend Package: https://github.com/OpenISDM/platform-client
All these features below could be demonstrated by choosing frontend branch "ushahidi_plus" and backend branch "ushahidi_plus".

Add Location Button on Beginning Map

  • Revised File:
    ./platform-client/app/common/services/maps.js
    ./platform-client/app/main/posts/views/post-view-map.directive.js
  • Explanation:
    The file "map.js" includes all the functions and settings while creating a map in the website. So we copied and renamed the function "createMap()" to be "createMapIndex()". The function "createMapIndex()" would then be used for creating the beginning map. Following shows the code of the location button.
function createMapIndex(element) { 
...
var userlocate = L.control.locate({
    strings: {
        title: 'Show me where I am.'
    },
    position: 'bottomleft',
    //keepCurrentZoomLevel: true,
    circleStyle: {
        color: '#FF0000',
        fillColor: '#FF0000'
    },
    markerStyle: {
        color: '#FF0000',
        fillColor: '#FF0000'
    },
    locateOptions: {
        maxZoom: 15
    },
}).addTo(map);
userlocate = L.control.locate({
    keepCurrentZoomLevel: false, //keep the same zoom level
    showPopup: true
});
...
}

The file "post-view-map.directive.js" controls the map on the website index. In this file, we replaced "createMap()" to "createMapIndex()".

function activate() { 
...
var createMap = Maps.createMapIndex(element[0].querySelector('#map'))
    .then(function (data) {
    map = data;
});
...
}

Create a New Page on Side-Bar

  • New Folder:
    ./platform-client/app/main/intro/
    includes files: intro-module.js, intro-routes.js, intro.controller.js, intro.html
  • Revised Files:
    ./platform-client/app/main/main-module.js
    ./platform-client/app/common/directives/mode-bar/mode-bar.html
  • Explanation:
    Take TSER project for example. First, create a new folder "intro" and include all the files related to the introduction page. Then, include "intro-module.js" to "main-module.js".
angular.module('ushahidi.main', [
    'ushahidi.posts',
    'ushahidi.activity', 
    'ushahidi.intro', 
    'ushahidi.manage'
]);

require('./posts/posts-module.js');
require('./activity/activity-module.js');
require('./intro/intro-module.js');
require('./manage/manage-module.js');

The file "mode-bar.html" is related to the view of the side-bar. So finally, add a button of the introduction page on side-bar.

<li ng-class="{ active: activeMode === 'intro' }">
    <a ng-href="/intro" class="view-list">
        <svg class="iconic">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/iconic-sprite.svg#book"></use>
        </svg>
        <translate>views.intro</translate>
    </a>
</li>

Launch User Profile after Login

  • Revised Files:
    ./platform-client/app/common/auth/login.directive.js
  • Explanation:
    In file "login.directive.js", add the function "openProfile()". Also, execute "openProfile()" after successfully logging in.
function openProfile() {
    if ($scope.failed == false) {
        ModalService.openTemplate('<account-settings></account-settings>', '', false, false, true, true);
    }
}
function loginSubmit(email, password) {
    $scope.processing = true;
    Authentication
    .login(email, password)
    .then(finishedLogin, clearLoginForm)
//--------------------Open User Profile--------------------//
    .then(openProfile);
//---------------------------------------------------------//
}

Create a New Page on User Profile

  • New Files:
    ./platform-client/app/common/user-profile/vms-profile.directive.js
    ./platform-client/app/common/user-profile/vms-profile.html
  • Revised Files:
    ./platform-client/app/common/user-profile/user-profile-module.js
    ./platform-client/app/common/user-profile/account-settings.html
    ./platform-client/app/common/user-profile/account-settings.directive.js
  • Explanation:
    Take TSER project for example. First, create files "vms-profile.html" and "vms-profile.directive.js" for the new page on the user profile. Then, we should include "vms-profile.directive.js" in "user-profile-module.js".
angular.module('ushahidi.user-profile', [])
.directive('accountSettings', require('./account-settings.directive.js'))
.directive('userProfile', require('./user-profile.directive.js'))
.directive('notifications', require('./notifications.directive.js'))
.directive('vmsProfile', require('./vms-profile.directive.js')) // add new page "vms profile" on user profile
.directive('reportLocation', require('./report-location.directive.js')) // add location tool on user profile
;

Files "account-settings.html" and "account-settings.directive.js" control the view and the setting of the tabs on the user profile. So first add a new tab for a new page in "account-settings.html".

...
<li ng-class="{'active': vmsprofile}">
    <a ng-click="showVMSProfile()" translate>
        user_profile.nav.vmsprofile
    </a>
</li>
...
<div class="modal-body">
    <user-profile ng-show="general"></user-profile>
    <notifications ng-show="notifications"></notifications>
    <vms-profile ng-show="vmsprofile"></vms-profile>
</div>

Then, add a new function for the event of clicking the tab of the new page.

scope.showVMSProfile = function () {
    scope.general = false;
    scope.notifications = false;
    scope.vmsprofile = true;
};

Create a Post at User's Location After Login

  • New Files:
    ./platform-client/app/common/user-profile/report-location.html
    ./platform-client/app/common/user-profile/report-location.directive.js
  • Revised Files
    ./platform-client/app/common/user-profile/user-profile.html
    ./platform-client/app/common/user-profile/user-profile.directive.js
  • Explanation:
    This feature allows users to post their location on the beginning map after logging in the website. After logging in the website, the user profile would launch automatically as we explained in the previous feature. Then, users would fill in their contact information and their location. After saving these information, users would create their location posts on the beginning map.
    Files "report-location.html" and "report-location.directive.js" contain the view and setting of the small map on user profile. To create a post on the beginning map, we would need to use Ushahidi's API. In file "user-profile.directive.js", we could find how to send a request for creating a post.
var reqBody = {
    "username": $rootScope.userEmail.toString(),
    "password": $rootScope.userPassword.toString(), 
    "grant_type": "password",
    "client_id": "ushahidiui",
    "client_secret": "35e7f0bca957836d05ca0492211b0ac707671261",
    "scope": "posts media forms api tags savedsearches sets users stats layers config messages notifications contacts roles permissions csv dataproviders"
};
var Req = {
    method: 'POST', 
    url: 'http://140.109.22.155:3333/oauth/token', 
    headers: {},
    data: JSON.stringify(reqBody)
};
// Get Ushahidi User Access Token
$http(Req).then(
    function(response) { 
        ...
        var post_Req = {
            method: 'POST', 
            url: 'http://140.109.22.155:3333/api/v3/posts', 
            headers: post_reqHead,
            data: JSON.stringify(post_reqBody)
        };
        // Create Post 
        $http(post_Req).then(
            function(response){
                $rootScope.userPostId = response.data.id;
                console.log('!!! Create Post '+$rootScope.userPostId+' !!!');
            }, 
            function(response){
                console.log('!!! Create Post Fail !!!');
            }
        );        
    }, 
...
);
  • Revised Files:
    ./platform-client/app/main/posts/views/mode-context-form-filter.html
  • Explanation:
    The pictures above show that users who are not project manager could only see their own location posts and project managers are allowed to see all the user location posts. So, in this example, we could first set the property of the survey "Management Map" to be "require posts be reviewed". This would allow only project managers could see all the user location posts. Second, we need to hide the survey "Management Map" when users log in and do not be recognized as project manager. So, in file "mode-context-form-filter.html", we add conditions in the survey loop to show "Management Map" while logging in as project manager.
<form class="survey-filter">
    <!-- survey loop -->
    <div class="survey-filter-checkbox init" ng-class="{ checked : (filters.form.indexOf(form.id) !== -1) }" ng-repeat="form in forms" dropdown>
    <!-- The form id of the survey "Management Map" is 7 -->
    <div ng-if="form.id == 7"> 
    <div ng-hide="!hasManageSettingsPermission()">
        ...
    </div>
    </div>
    ...  
</form>

Login with Volunteer Management System (VMS) Account

  • Revised Files:
    ./platform-client/app/common/auth/authentication.service.js
  • Explanation:
    This feature allows users to use their VMS account to login Ushahidi. There are two things we would like to verify. First, check whether the account and password are belong to VMS database. Second, check whether the user of the account have joined the appointed project in VMS.
$http.post(Util.url('/oauth/token'), payload).then(checkProjectMembership, handleRequestError);
checkProjectMembership = function() {
    var credential = {
        "email": username.toString(), 
        "password": password.toString() 
    };
    var Req = {
        method: 'POST', 
        url: 'https://vms-dev.herokuapp.com/api/auth', 
        headers: {
            'Content-Type': 'application/json', 
            'X-VMS-API-Key': '581dba93a4dbafa42a682d36b015d8484622f8e3543623bec5a291f67f5ddff1'
        }, 
        data: JSON.stringify(credential)
    };
    $http(Req).then(
        function(response){
            var vmshead = response.headers();
            var cpmReq = {
                method: 'GET', 
                url: 'https://vms-dev.herokuapp.com/api/attending_projects', 
                headers: {
                    'Content-Type': 'application/json', 
                    'X-VMS-API-Key': '581dba93a4dbafa42a682d36b015d8484622f8e3543623bec5a291f67f5ddff1',
                    'Authorization': vmshead.authorization
                }
            };
            var checkproj = false;
            $http(cpmReq).then(
                function(response){
                    var vmsproj = response.data;
                    for (var i = vmsproj.data.length - 1; i >= 0; i--) {
                        if (vmsproj.data[i].id == 72 || vmsproj.data[i].id == 22) {
                            checkproj = true;
                            break;
                        } 
                    }
                    if (checkproj==false) {
                        Notify.notify("Sorry, you haven't joined this project. Please join this project and login again.");
                        handleRequestError();
                    } else {
                        $http.post(Util.url('/oauth/token'), payload).then(handleRequestSuccess, handleRequestError);
                    }
                }, handleRequestError);
            }, handleRequestError);
};
Add a custom footer
Add a custom sidebar
Clone this wiki locally