Commit 362cfb056dc4688d77976dbc9fd4a22e55bc7619
1 parent
8bc4d0271d
Exists in
master
and in
1 other branch
Flag cards and back to top
Showing 2 changed files with 127 additions and 75 deletions Side-by-side Diff
scripts/CardListController.js
View file @
362cfb0
| ... | ... | @@ -7,7 +7,6 @@ |
| 7 | 7 | |
| 8 | 8 | $http.get('/api/sections/' + sectionId + '/flashcards/?hidden=yes'). |
| 9 | 9 | success(function(data) { |
| 10 | - console.log(data); | |
| 11 | 10 | $scope.cards = data; |
| 12 | 11 | }). |
| 13 | 12 | error(function(err) { |
| ... | ... | @@ -79,6 +78,20 @@ |
| 79 | 78 | }); |
| 80 | 79 | }; |
| 81 | 80 | |
| 81 | + // unpull card | |
| 82 | + $scope.flag = function(card) { | |
| 83 | + $http.post('/api/flashcards/' + card.id + '/report/'). | |
| 84 | + success(function(data) { | |
| 85 | + console.log(card.text + ' reported'); | |
| 86 | + | |
| 87 | + // local change for display purposes | |
| 88 | + Materialize.toast('Card Flagged', 3000, 'rounded'); | |
| 89 | + }). | |
| 90 | + error(function(err) { | |
| 91 | + console.log('no hide for you'); | |
| 92 | + }); | |
| 93 | + }; | |
| 94 | + | |
| 82 | 95 | // toggle button text from show to hide |
| 83 | 96 | $(function() { |
| 84 | 97 | $('#showHidden').click(function() { |
| 85 | 98 | |
| ... | ... | @@ -92,7 +105,29 @@ |
| 92 | 105 | $(document).off('keydown'); |
| 93 | 106 | }); |
| 94 | 107 | |
| 108 | + // Tooltips! | |
| 109 | + $(document).ready(function(){ | |
| 110 | + $('.tooltipped').tooltip({delay: 50}); | |
| 95 | 111 | |
| 112 | + //back to top | |
| 113 | + var offset = 300; | |
| 114 | + var duration = 300; | |
| 115 | + $(window).scroll(function() { | |
| 116 | + if ($(this).scrollTop() > offset) { | |
| 117 | + $('.back-to-top').fadeIn(duration); | |
| 118 | + } else { | |
| 119 | + $('.back-to-top').fadeOut(duration); | |
| 120 | + } | |
| 121 | + }); | |
| 122 | + | |
| 123 | + jQuery('.back-to-top').click(function(event) { | |
| 124 | + event.preventDefault(); | |
| 125 | + jQuery('html, body').animate({scrollTop: 0}, duration); | |
| 126 | + return false; | |
| 127 | + }) | |
| 128 | + }); | |
| 129 | + | |
| 130 | + // to display day of the week badges | |
| 96 | 131 | $scope.dayofweek = function(item) { |
| 97 | 132 | var date = new Date(item.material_date); |
| 98 | 133 | switch(date.getDay()) { |
templates/cardlist.html
View file @
362cfb0
| 1 | -<div class="row"> | |
| 2 | - <a class="btn" id="showHidden" ng-click="show = !show" style="margin-top: 15px">Show Hidden</a> | |
| 1 | +<body> | |
| 2 | + <div class="row"> | |
| 3 | + <a class="btn" id="showHidden" ng-click="show = !show" style="margin-top: 15px">Show Hidden</a> | |
| 3 | 4 | |
| 4 | - <div class="input-field col s4 right"> | |
| 5 | - <i class="mdi-action-search prefix"></i> | |
| 6 | - <input id="search" type="text" class="validate" ng-model="searchText"/> | |
| 7 | - <label for="search">Search</label> | |
| 5 | + <div class="input-field col s4 right"> | |
| 6 | + <i class="mdi-action-search prefix"></i> | |
| 7 | + <input id="search" type="text" class="validate" ng-model="searchText"/> | |
| 8 | + <label for="search">Search</label> | |
| 9 | + </div> | |
| 8 | 10 | </div> |
| 9 | -</div> | |
| 10 | 11 | |
| 11 | -<div class="row"> | |
| 12 | - <form> | |
| 13 | - <div class="col s12"> | |
| 14 | - <div class="col s2"> | |
| 15 | - <input type="checkbox" class="filled-in" id="weekOneCheck" ng-model="filter['week1']"/> | |
| 16 | - <label for="weekOneCheck">Week One</label> | |
| 12 | + <div class="row"> | |
| 13 | + <form> | |
| 14 | + <div class="col s12"> | |
| 15 | + <div class="col s2"> | |
| 16 | + <input type="checkbox" class="filled-in" id="weekOneCheck" ng-model="filter['week1']"/> | |
| 17 | + <label for="weekOneCheck">Week One</label> | |
| 18 | + </div> | |
| 19 | + <div class="col s2"> | |
| 20 | + <input type="checkbox" class="filled-in" id="weekTwoCheck" ng-model="filter['week2']"/> | |
| 21 | + <label for="weekTwoCheck">Week Two</label> | |
| 22 | + </div> | |
| 23 | + <div class="col s2"> | |
| 24 | + <input type="checkbox" class="filled-in" id="weekThreeCheck" ng-model="filter['week3']"/> | |
| 25 | + <label for="weekThreeCheck">Week Three</label> | |
| 26 | + </div> | |
| 27 | + <div class="col s2"> | |
| 28 | + <input type="checkbox" class="filled-in" id="weekFourCheck" ng-model="filter['week4']"/> | |
| 29 | + <label for="weekFourCheck">Week Four</label> | |
| 30 | + </div> | |
| 31 | + <div class="col s2"> | |
| 32 | + <input type="checkbox" class="filled-in" id="weekFiveCheck" ng-model="filter['week5']"/> | |
| 33 | + <label for="weekFiveCheck">Week Five</label> | |
| 34 | + </div> | |
| 17 | 35 | </div> |
| 18 | - <div class="col s2"> | |
| 19 | - <input type="checkbox" class="filled-in" id="weekTwoCheck" ng-model="filter['week2']"/> | |
| 20 | - <label for="weekTwoCheck">Week Two</label> | |
| 36 | + <div class="col s12"> | |
| 37 | + <div class="col s2"> | |
| 38 | + <input type="checkbox" class="filled-in" id="weekSixCheck" ng-model="filter['week6']"/> | |
| 39 | + <label for="weekSixCheck">Week Six</label> | |
| 40 | + </div> | |
| 41 | + <div class="col s2"> | |
| 42 | + <input type="checkbox" class="filled-in" id="weekSevenCheck" ng-model="filter['week7']"/> | |
| 43 | + <label for="weekSevenCheck">Week Seven</label> | |
| 44 | + </div> | |
| 45 | + <div class="col s2"> | |
| 46 | + <input type="checkbox" class="filled-in" id="weekEightCheck" ng-model="filter['week8']"/> | |
| 47 | + <label for="weekEightCheck">Week Eight</label> | |
| 48 | + </div> | |
| 49 | + <div class="col s2"> | |
| 50 | + <input type="checkbox" class="filled-in" id="weekNineCheck" ng-model="filter['week9']"/> | |
| 51 | + <label for="weekNineCheck">Week Nine</label> | |
| 52 | + </div> | |
| 53 | + <div class="col s2"> | |
| 54 | + <input type="checkbox" class="filled-in" id="weekTenCheck" ng-model="filter['week10']"/> | |
| 55 | + <label for="weekTenCheck">Week Ten</label> | |
| 56 | + </div> | |
| 21 | 57 | </div> |
| 22 | - <div class="col s2"> | |
| 23 | - <input type="checkbox" class="filled-in" id="weekThreeCheck" ng-model="filter['week3']"/> | |
| 24 | - <label for="weekThreeCheck">Week Three</label> | |
| 25 | - </div> | |
| 26 | - <div class="col s2"> | |
| 27 | - <input type="checkbox" class="filled-in" id="weekFourCheck" ng-model="filter['week4']"/> | |
| 28 | - <label for="weekFourCheck">Week Four</label> | |
| 29 | - </div> | |
| 30 | - <div class="col s2"> | |
| 31 | - <input type="checkbox" class="filled-in" id="weekFiveCheck" ng-model="filter['week5']"/> | |
| 32 | - <label for="weekFiveCheck">Week Five</label> | |
| 33 | - </div> | |
| 34 | - </div> | |
| 35 | - <div class="col s12"> | |
| 36 | - <div class="col s2"> | |
| 37 | - <input type="checkbox" class="filled-in" id="weekSixCheck" ng-model="filter['week6']"/> | |
| 38 | - <label for="weekSixCheck">Week Six</label> | |
| 39 | - </div> | |
| 40 | - <div class="col s2"> | |
| 41 | - <input type="checkbox" class="filled-in" id="weekSevenCheck" ng-model="filter['week7']"/> | |
| 42 | - <label for="weekSevenCheck">Week Seven</label> | |
| 43 | - </div> | |
| 44 | - <div class="col s2"> | |
| 45 | - <input type="checkbox" class="filled-in" id="weekEightCheck" ng-model="filter['week8']"/> | |
| 46 | - <label for="weekEightCheck">Week Eight</label> | |
| 47 | - </div> | |
| 48 | - <div class="col s2"> | |
| 49 | - <input type="checkbox" class="filled-in" id="weekNineCheck" ng-model="filter['week9']"/> | |
| 50 | - <label for="weekNineCheck">Week Nine</label> | |
| 51 | - </div> | |
| 52 | - <div class="col s2"> | |
| 53 | - <input type="checkbox" class="filled-in" id="weekTenCheck" ng-model="filter['week10']"/> | |
| 54 | - <label for="weekTenCheck">Week Ten</label> | |
| 55 | - </div> | |
| 56 | - </div> | |
| 57 | - </form> | |
| 58 | -</div> | |
| 58 | + </form> | |
| 59 | + </div> | |
| 59 | 60 | |
| 60 | -<div class="list" style="padding: 0px 15px"> | |
| 61 | - <ul class="collection" | |
| 62 | - ng-repeat="(weeknum, week_cards) in cards | filter:searchText | filter:filterByDate | groupBy: 'material_week_num'"> | |
| 63 | - <li class="collection-header"><h3>Week {{weeknum}}</h3></li> | |
| 64 | - <li class="collection-item" ng-click="expand = !expand" ng-repeat="card in week_cards" ng-show="show || !card.is_hidden"> | |
| 65 | - <div>{{card.text}} | |
| 66 | - <span class="badge">{{dayofweek(card)}}</span> | |
| 67 | - <p class="right-align" ng-show="expand"> | |
| 68 | - <a href="" ng-click="pull(card)" ng-show="!card.is_in_deck"><i | |
| 69 | - class="mdi-content-add-circle-outline small"></i></a> | |
| 70 | - <a href="" ng-click="unpull(card)" ng-show="card.is_in_deck"><i | |
| 71 | - class="mdi-content-remove-circle-outline small"></i></a> | |
| 72 | - <a href="" ng-click="hide(card)" ng-show="!card.is_hidden"><i | |
| 73 | - class="mdi-action-delete small"></i></a> | |
| 74 | - <a href="" ng-click="unhide(card)" ng-show="card.is_hidden"><i | |
| 75 | - class="mdi-image-remove-red-eye small"></i></a> | |
| 76 | - </p> | |
| 77 | - </div> | |
| 78 | - </li> | |
| 79 | - </ul> | |
| 80 | -</div> | |
| 61 | + <div class="list" style="padding: 0px 15px"> | |
| 62 | + <ul class="collection" | |
| 63 | + ng-repeat="(weeknum, week_cards) in cards | filter:searchText | filter:filterByDate | groupBy: 'material_week_num'"> | |
| 64 | + <li class="collection-header"><h3>Week {{weeknum}}</h3></li> | |
| 65 | + <li class="collection-item" ng-click="expand = !expand" ng-repeat="card in week_cards" ng-show="show || !card.is_hidden"> | |
| 66 | + <div>{{card.text}} | |
| 67 | + <span class="badge">{{dayofweek(card)}}</span> | |
| 68 | + <p class="right-align" ng-show="expand"> | |
| 69 | + <a href="" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Add to Deck" ng-click="pull(card)" ng-show="!card.is_in_deck"> | |
| 70 | + <i class="mdi-content-add-circle-outline small"></i></a> | |
| 71 | + <a href="" ng-click="unpull(card)" ng-show="card.is_in_deck"><i | |
| 72 | + class="mdi-content-remove-circle-outline small tooltipped" | |
| 73 | + data-position="bottom" data-delay="50" | |
| 74 | + data-tooltip="Remove from Deck"></i></a> | |
| 75 | + <a href="" ng-click="hide(card)" ng-show="!card.is_hidden"><i | |
| 76 | + class="mdi-action-delete small tooltipped" | |
| 77 | + data-position="bottom" data-delay="50" | |
| 78 | + data-tooltip="Hide"></i></a> | |
| 79 | + <a href="" ng-click="unhide(card)" ng-show="card.is_hidden"><i | |
| 80 | + class="mdi-image-remove-red-eye small tooltipped" | |
| 81 | + data-position="bottom" data-delay="50" | |
| 82 | + data-tooltip="Unhide"></i></a> | |
| 83 | + <a href="" ng-click="flag(card)"><i | |
| 84 | + class="mdi-content-flag small"></i></a> | |
| 85 | + </p> | |
| 86 | + </div> | |
| 87 | + </li> | |
| 88 | + </ul> | |
| 89 | + </div> | |
| 90 | + | |
| 91 | + | |
| 92 | + <div class="fixed-action-btn back-to-top" style="bottom: 45px; right: 24px; display: none;"> | |
| 93 | + <a class="btn-floating btn-large"> | |
| 94 | + <i class="mdi-editor-publish medium"></i> | |
| 95 | + </a> | |
| 96 | + </div> | |
| 97 | +</body> |