Activity Table

activity-table.markdown

Activity Table

I followed this tutorial: https://scotch.io/tutorials/sort-and-filter-a-table-using-angular

What I wanted to do was create a table that can be sorted by activity type, season and ratings. Of course this can be modified and perfected. This way a user can find the activity that appeals to them, so for a example if they are looking for a kids friendly activity in winter they can find it.

A Pen by anna on CodePen.

License.

index.html

<div class="container" ng-app="sortApp" ng-controller="mainController">
  
  <div class="alert alert-info">
    <p>Sort Type: {{ sortType }}</p>
    <p>Sort Reverse: {{ sortReverse }}</p>
    <p>Search Query: {{ searchactivity }}</p>
  </div>
  
  <form>
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-addon"><i class="fa fa-search"></i></div>
        <input type="text" class="form-control" placeholder="Search Here" ng-model="searchactivity">
      </div>      
    </div>
  </form>
  
  <table class="table table-bordered table-striped">
    
    <thead>
      <tr>
        <td>
          <a ng-href="" ng-click="sortType = 'name'; sortReverse = !sortReverse">
            Events 
            <span ng-show="sortType == 'name' && !sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="sortType == 'name' && sortReverse" class="fa fa-caret-up"></span>
          </a>
        </td>
        <td>
          <a ng-href="" ng-click="sortType = 'activity'; sortReverse = !sortReverse">
          Activity Type
            <span ng-show="sortType == 'activity' && !sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="sortType == 'activity' && sortReverse" class="fa fa-caret-up"></span>
          </a>
        </td>
        <td>
          <a ng-href="" ng-click="sortType = 'activity'; sortReverse = !sortReverse">
          Month
            <span ng-show="sortType == 'activity' && !sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="sortType == 'activity' && sortReverse" class="fa fa-caret-up"></span>
          </a>
        </td>
        <td>
          <a href="#" ng-click="sortType = 'activity'; sortReverse = !sortReverse">
          User Rating 
            <span ng-show="sortType == 'rating' && !sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="sortType == 'rating' && sortReverse" class="fa fa-caret-up"></span>
          </a>
        </td>
        <td>
          <a href="#" ng-click="sortType = 'activity'; sortReverse = !sortReverse">
          Cost ($)
            <span ng-show="sortType == 'rating' && !sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="sortType == 'rating' && sortReverse" class="fa fa-caret-up"></span>
          </a>
        </td>
      </tr>
    </thead>
    
    <tbody>
      <tr ng-repeat="activity in activities | orderBy:sortType:sortReverse | filter:searchactivity">
        <td><a ng-href="{{activity.link}}" target="_blank"> {{ activity.name }}</a></td>
        <td>{{ activity.activity }}</td>
        <td>{{ activity.month }}</td>
        <td>{{ activity.rating }}</td>
        <td>{{ activity.cost }}</td>
      </tr>
    </tbody>
    
  </table>
  
  
  
</div>

script.js

angular.module('sortApp', [])

.controller('mainController', function($scope) {
  $scope.sortType = 'name'; // set the default sort type
  $scope.sortReverse = false; // set the default sort order
  $scope.searchActivity = ''; // set the default search/filter term

  // create the list of Activities 
  $scope.activities = [{
    name: 'Soul’d Out Music Festival',
    activity: 'Outdoor, music',
    month: 'April 14-20',
    rating: 5,
    cost: 100,
    link: "http://www.souldoutfestival.com/"
  }, {
    name: 'Portland Vegan Beer & Food Festival',
    activity: 'Food & Beverage',
    month: 'September 26',
    rating: 4.6,
    cost: 40,
    link: "http://www.souldoutfestival.com/"
  }, {
    name: 'Craft Fest',
    activity: 'Kid Friendly',
    month: 'December',
    rating: 7,
    cost: 10,
    link: '#'
    
  }, {
    name: 'Pancake Day',
    activity: 'Food & Beverage',
    month: 'October',
    rating: 6,
    cost: 20,
    link: "#"
  }];

});

scripts

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

style.css

/*
  were using Bootstrap and Font Awesome
  http://bootstrapcdn.com
*/

body { padding-top:50px; }

styles

<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />