Skip to content
Make an interactive scrapbook of your past and future travels.
Ruby HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Updates button display after sliding Mar 11, 2016
bin Initial commit Jan 28, 2016
config Adjusts trips table, creates api/trips controller that serves json Jan 28, 2016
db Adjusts trips table, creates api/trips controller that serves json Jan 28, 2016
lib Initial commit Jan 28, 2016
public Initial commit Jan 28, 2016
vendor/assets
Gemfile adds 12factor gem Feb 8, 2016
Gemfile.lock adds 12factor gem Feb 8, 2016
README.md Update README.md Feb 8, 2016
README.rdoc Initial commit Jan 28, 2016
Rakefile
config.ru Initial commit Jan 28, 2016

README.md

MyTravels

Collect Memories of Your Greatest Adventures...and Plan Your Next One!

MyTravels is a fun application that lets the user manage and view their past and future travels. For each destination, the user can grab a photo, enter a date (either specific or general) and describe their memories or plans depending on whether the trip is in the past or future.

##Technologies Used

MyTravels is built on a Ruby on Rails back end and Angular.js front end.

  • Through ActiveRecord, the back end controller interacts with a PostgreSQL database to create and delete trips for the user.
  • The Angular.js framework allows the application to run on a single page without the need for refreshing. Angular also streamlines the rendering process and allows for conditional form fields and sorting trips.
  • Skeleton CSS is used to align the content within a grid layout, also making the app more mobile friendly.

##Example Code

###Grouping Trips

$scope.updateTrips = function(){
  $scope.pastTrips = [];
  $scope.plannedTrips =[];

  $http.get('api/trips').then(function(response){
    var allTrips = response.data.trips;
    allTrips.forEach(function(trip){
      sortTrip(trip);
    });
  });
};

Within the main Angular controller, this function first ensures that the two trip 'buckets' are empty. The $http service is then used to call the local trips API to get all of the trips. The array that is returned is passed to the following sort function:

function sortTrip(trip){
  if (trip.visited){
    $scope.pastTrips.push(trip);
  } else {
    $scope.plannedTrips.push(trip);
  }
}

###Two Form Paths

The create trip form changes depending on whether the destination is in the past or lies in the future.

<div class="two columns center">
  <label for="">Been There?</label>
  <input type="radio" ng-model="newTrip.visited" ng-click="radioClicked = 1" value=true>
</div>
<div class="two columns center">
  <label for="">Wanna Go!</label>
  <input type="radio" ng-model="newTrip.visited" ng-click="radioClicked = 0" value=false>
</div>
</div>
<!-- Display if past trip -->
<div class="row" ng-show="radioClicked === 1">
<div class="offset-by-two four columns date-field">
    <label for="">When Did You Go?</label>
    <input type="text" ng-model="newTrip.date" placeholder="e.g August 2005, Winter 2008">
</div>
<div class="four columns">
  <label for="">Memories</label>
  <textarea ng-model="newTrip.memories" rows="8" cols="32" placeholder="e.g Ate a sno cone"></textarea>
</div>
</div>

In this example, the Angular directive ng-click is used to set $scope.radioClicked to 1 or 0. That value is then used by ng-show in the following section to display the appropriate fields.

##Additional Features Planned Since this is the first version of the app, there are many ways in which the application could be more robust, including...

  • Making use of an external API to automatically assign a picture and other relevant data to each destination.
  • User authentication to allow users to save their personalized page.
  • New layout that incorporates a 'slider' so future and past sections are stacked vertically with trips scrolling horizontally.
You can’t perform that action at this time.