Skip to main content

The Conversion: I see UI/X - Part 1

For as much development and blogging that's been happening, I haven't moved the project too far along. In fact, I am behind on my goal of being completed by the end of August.  That said, the new TRIPS application is almost at the top of the development hill - much of the ground work has been developed and the more I work on it, the clearer the vision becomes.

This blog post will revolve around the user interface and experience for the landing and trip templates. Starting with the landing page, a New Trip button needs to be added which routes to the trip template with an id of 0. Remember, a 0 id will inform the saveTrip() code to insert a trip as opposed to updating it.
The new trip button isn't something the user is going to use all the time, but it still needs to be obvious. I initially thought the right side of the filter would be a good place, but the filtering capability may be expanded in the near future with options. So I will start with putting the button on the left side of the page under the instructional text.
 <div style="padding-bottom:10px">  
   <a ui-sref="trip({id: 0})">  
     <button class="btn btn-primary">  
       <i class="fa fa-lg fa-plus-square" aria-hidden="true"></i>  
       Create New Trip  
     </button>  
   </a>  
 </div>
Because the route has already been set up and the trip.js controller is set load an existing or new trip, there isn't much to do. The key is ui-sref="trip({id: 0})" which is simply routing to the /trip route and passing a trip id of 0.

Next, we will switch gears over to the trip.html template and trip.js controller. At the moment, the data from the trip loads directly onto the page for editing. However, it most cases, this information isn't going to be updated once it's set, so there is really no reason to allow editing as a default state...unless of course it's a new trip, in which case we would want the fields to be immediately available for editing.

To achieve this, I've added $scope.editTrip boolean to the trip.js controller with it's default value set to false. If the trip id is 0, a new trip, editTrip is set to true. On the template, I've wrapped the form controls for editing in a div using the ng-if directive: ng-if="editTrip". If editTrip is true, the contents of the div will be included in the DOM. Conversely, if it's false, the block will not be included in the DOM. So now the default trip.html template went from this:
...to this:
Clicking on the edit icon on the right of the page will yield the editing page.
The Save Trip button will call the saveTrip() function in the controller. Cancel Save will call cancelSave().

 <div ng-controller="TripController as ctrlTrip">  
   <h2>{{trip.NAME}} <a class="pull-right" ng-click="setEditTrip(true)"><i class="fa fa-lg fa-pencil-square-o" aria-hidden="true"></i></a><br><small>{{trip.DESTINATION}}</small></h2>  
   <h4>{{trip.TYPE}}</h4>  
   <div ng-if="!editTrip">  
     <div class="list-group">  
       <div class="list-group-item"><i>Purpose</i>: {{trip.PURPOSE}}</div>  
       <div class="list-group-item"><i>Stops and Comments</i>: {{trip.COMMENTS}}</div>  
     </div>  
   </div>  
   <div ng-if="editTrip">  
     <div class="input-group" style="padding-bottom:10px">  
       <span class="input-group-addon" style="width:125px">Name</span>  
       <input class="form-control" ng-model="trip.NAME" style="width:400px">  
     </div>  
     <div class="input-group" style="padding-bottom:10px">  
       <span class="input-group-addon" style="width:125px">Destination</span>  
       <textarea class="form-control" ng-model="trip.DESTINATION" style="width:400px"></textarea>  
     </div>  
     <div class="input-group" style="padding-bottom:10px">  
       <span class="input-group-addon" style="width:125px">Purpose</span>  
       <textarea class="form-control" ng-model="trip.PURPOSE" style="width:400px"></textarea>  
     </div>  
     <div class="input-group" style="padding-bottom:10px">  
       <span class="input-group-addon" style="width:125px">Stops and<br>Comments</span>  
       <textarea class="form-control" ng-model="trip.COMMENTS" style="width:400px"></textarea>  
     </div>  
     <div class="input-group" style="padding-bottom:10px">  
       <span class="input-group-addon" style="width:125px">Trip Type</span>  
       <select class="form-control" style="width:300px" ng-model="trip.TYPE">  
         <option ng-selected="trip.TYPE == tripType.CODE" ng-repeat="tripType in tripTypes" value="{{tripType.CODE}}" >{{tripType.NAME}}</option>  
       </select>  
     </div>  
     <button class="btn btn-primary" ng-click="saveTrip(trip)">Save Trip</button>  
     <button class="btn btn-danger" ng-click="cancelSave()">Cancel Save</button>  
   </div>  
 </div>  


 angular.module('core').controller('TripController',['$scope','dataService','$stateParams','$state', function($scope,dataService,$stateParams,$state){  
   $scope.trip = {};  
   $scope.editTrip = false;  
   if ($stateParams.id == 0){  
     dataService.call('createNewTrip').then(function(data){  
       $scope.trip = data.data;  
       $scope.editTrip = true;  
       console.log($scope.trip)  
     })  
   }  
   if ($stateParams.id > 0){  
     dataService.call('getTrip&_id=' + $stateParams.id).then(function(data){  
       $scope.trip = data.data;  
     })  
   }  
   dataService.call('getTripTypes').then(function(data){  
     $scope.tripTypes = data.data;  
   })  
   $scope.setEditTrip = function(_b){  
     $scope.editTrip = _b;  
   }  
   $scope.saveTrip = function(_trip){  
     dataService.process('saveTrip',_trip).then(function(data){  
       $scope.trip = data.data;  
       $scope.setEditTrip(false);  
       $state.reload('trip',{id: $scope.trip.ID})  
     });  
   }  
   $scope.cancelSave = function(){  
     $state.reload('trip',{id: $scope.trip.ID})  
   }  
 }]);
From a development perspective, there is nothing really tricky happening here. We've added the editTrip boolean value along with a $scope.setEditTrip() function to change the value. Also added is the cancelSave() function which will just reload the route.

The rest of this page will likely be academic now that the styling and navigation paradigm are figured out. Part 2 of this post will deal filling in the rest of the template with sponsors, date and times, waivers, and participants. Stay tuned!

Cheers!

Updated Line Counts
Labels:

Comments

Post a Comment

Popular posts from this blog

The Conversion: MAIN.CFM

Within the current development pattern I have for our portal system, the main.cfm is the starting point for an application. For the most part, this is really boilerplate and serves to get the application off the ground. The way the portal works is that the user lands on the main menu page and provide with a menu of options. Each option is called a function and is assigned a unique id. When the user clicks on a menu option, the page is reloaded with the function id. The process checks to see if the user is actually allowed to have access to the function. It then accordingly looks up the path and displays the page via a . In the case of the TRIPS application, the included file is the main.cfm page for the application. So far the project looks like this: we have the folder structure defined with no files aside from the main.cfm. The main.cfm contains a few javascript includes, the overarching controller for the application as well as the route viewer. The next blog post will foc
Post a Comment
Read more

The Conversion: Trips for Keeps - Part 2

Ack! A few days off work and then updates to other applications that needed to be made has delayed more work on TRIPS. But we're back and ready to continue. In the last post , we started to build out the trip.html template and it's corresponding controller. The dataService was updated with an abstraction that would allow a CFC method to be called and data to be passed.  This post will focus on retrieving that data from the dataService to the CFC method. Before we get started, I thought it would be kind of cool to keep a count of the number of lines of code for the project.  I'm not sure if it will provide any insight, but it might be nice to compare the line count to the number of lines in the Flex application.  Rather than posting the counts on each blog post, I have created a separate post tracking the line count per post . In review, let's take a look at the dataService code that's going to call the Coldfusion function to save the trip information. this.p
Post a Comment
Read more

The Conversion: Introduction

While working as the senior level developer for a small liberal arts college, I've had the luxury of deciding the technology to be used internally for custom applications. When I first started, the college was using Coldfusion 7, HTML, and many MS Access databases. Over the course of the past 11 years, we've moved to Oracle, are on CF11, and utilizing AngularJS / Angular for our front ends.  Coldfusion is still doing the heavy lifting in interfacing with Oracle. During those 11 years, we also found ourselves developing Adobe (now Apache) Flex applications.  Flex was a great tool - easy to develop in and fairly easy to deploy when Flash was ubiquitous. But Flex was not great on mobile platforms.  Hence our move to Angular due to the idea that we wanted to give our users a rich web experience. So over the course of the past two years, we've been either retiring Flex applications altogether due to the direction that some departments have taken (read outside vendor); or ret
Post a Comment
Read more