Skip to content

Instantly share code, notes, and snippets.

@emb03

emb03/page--node--locations--hours.html.twig

Last active April 23, 2019 14:43
Show Gist options
  • Save emb03/e800b01623cf14ba2d90f7b0e56c4891 to your computer and use it in GitHub Desktop.
Save emb03/e800b01623cf14ba2d90f7b0e56c4891 to your computer and use it in GitHub Desktop.
Download ZIP
Drupal 8, angularjs, jsonp, $interval, custom filters
Raw
page--node--locations--hours.html.twig
<!-- Fixed navbar -->
{% include directory ~ '/partials/header.html.twig' %}
<!-- page-banner -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="page-title-bg"><img src="{{ theme_base_path }}/images/page-bg.jpg" class="img-responsive " alt="bg"></div>
</div>
</div>
</div><!-- //End page-banner -->
<div class="container" id="main-container" ng-app="appPubCounter" >
<div class="row">
<div class="col-md-12"><h1>{{ node.label }}</h1></div>
</div>
<div class="row content-wrapper padding-bottom60">
{# Left-side bar #}
<div class="col-md-9">
{% if page.content %}
<div class="row padding-left0">
<div class="col-md-12">
{{ page.content }}
</div>
</div>
{% endif %}
<div class="row">
<div class="col-md-12">
<div ng-disabled="enable=='false'">
<center ng-show="loadingText == 'Loading ...'"><i class="fa fa-spinner fa-spin fa-2x fa-fw"></i><span class="sr-only">Loading...</span></center>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6" ng-controller="pubCounterMetroCtrl">
<div class="desc-text">
<h6>Metro Downtown<br >
(Fiqueroa Plaza)</h6>
<div>201 N. Fiqueroa St.<br>
4th Floor<br>
Los Angeles, CA 90012</div>
<strong><a href="https://www.google.com/maps/dir//201+N+Figueroa+St,+Los+Angeles,+CA+90012/@34.0589655,-118.253579,17z/data=!4m8!4m7!1m0!1m5!1m1!1s0x80c2c6533ce33c37:0x4eacbc863fcd7d11!2m2!1d-118.2514289!2d34.0590933" target="_blank">Get Directions</a></strong>
<p>TEL: 213-482-7077<br>
FAX: 213-482-7080</p>
<div class="sub-head"><strong>Main Public Counter - 4th Floor</strong></div>
<div class="hours"><strong>Hours of Operation:</strong></div>
<p style="float:left">Monday<br>
Tuesday<br>
Wednesday<br>
Thursday<br>
Friday</p>
<p style="float:right">7:30am - 4:30pm<br>
7:30am - 4:30pm<br>
7:30am - 4:30pm<br>
9:00am - 4:30pm<br>
7:30am - 4:30pm</p>
</div>
<div class="col-md-12">
<ul class="pub-counters" ng-Repeat="pubCounterMetroService in pubCounterMetroServices | toArray : false | filterWithOr:{queueName:['Planning Check-In','Planning Express']} track by $index">
<li class="pub-header">{[{ pubCounterMetroService.queueName }]}</li>
<li><i class="fa fa-clock-o fa-2x"></i>Current Wait Time<br> {[{ pubCounterMetroService.actualWaitTime | time:'mm' }]}</li>
<li><i class="fa fa-user-circle-o fa-2x"></i>{[{ pubCounterMetroService.numberOfTicketsWaiting }]} Person(s) Waiting</li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-6" ng-controller="pubCounterValleyCtrl">
<div class="desc-text">
<h6>Valley - Van Nuys<br>
(Marvin Braude Building)</h6>
<div>6262 Van Nuys Blvd.<br>
Suite 251<br>
Van Nuys, CA 91401</div>
<strong><a href="https://www.google.com/maps/dir//6262+Van+Nuys+Blvd,+Van+Nuys,+CA/@34.184405,-118.4827583,13z/data=!3m1!4b1!4m8!4m7!1m0!1m5!1m1!1s0x80c29706f2a8165b:0xf8ad98c560f35b7b!2m2!1d-118.4476531!2d34.184339" target="_blank">Get Directions</a></strong>
<p>TEL: 818-374-5050<br>
FAX: 818-374-5075</p>
<div class="sub-head"><strong>Main Public Counter - 2nd Floor</strong></div>
<div class="hours"><strong>Hours of Operation:</strong></div>
<p style="float:left">Monday<br>
Tuesday<br>
Wednesday<br>
Thursday<br>
Friday</p>
<p style="float:right">7:30am - 4:30pm<br>
7:30am - 4:30pm<br>
9:00am - 4:30pm<br>
7:30am - 4:30pm<br>
7:30am - 4:30pm</p>
</div>
<div class="col-md-12">
<ul class="pub-counters" ng-Repeat="pubCounterValleyService in pubCounterValleyServices | toArray : false | filterWithOr:{queueName:['Planning Check-In','Planning Express']} track by $index">
<li class="pub-header">{[{ pubCounterValleyService.queueName }]}</li>
<li><i class="fa fa-clock-o fa-2x"></i>Current Wait Time<br> {[{ pubCounterValleyService.actualWaitTime | time:'mm' }]}</li>
<li><i class="fa fa-user-circle-o fa-2x"></i>{[{ pubCounterValleyService.numberOfTicketsWaiting }]} Person(s) Waiting</li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-6" ng-controller="pubCounterWestlaCtrl">
<div class="desc-text">
<h6>West<br>
Los Angeles</h6>
<div>1828 Sawtelle Blvd.<br>
2nd Floor<br>
West Los Angeles, CA 90025</div>
<strong><a href="https://www.google.com/maps/dir//1828+Sawtelle+Blvd,+Los+Angeles,+CA/@34.0434138,-118.4804847,13z/data=!4m8!4m7!1m0!1m5!1m1!1s0x80c2bb76ac95d6b9:0x40b5edc4d4c6da2f!2m2!1d-118.4453795!2d34.0433477" target="_blank">Get Directions</a></strong> <p>TEL: 310-231-2901<br>
FAX: </p>
<div class="sub-head"><strong>Main Public Counter - 2nd Floor</strong></div>
<div class="hours"><strong>Hours of Operation:</strong></div>
<p style="float:left">Monday<br>
Tuesday<br>
Wednesday<br>
Thursday<br>
Friday</p>
<p style="float:right">7:30am - 4:30pm<br>
7:30am - 4:30pm<br>
9:00am - 4:30pm<br>
7:30am - 4:30pm<br>
7:30am - 4:30pm</p>
</div>
<div class="col-md-12">
<ul class="pub-counters" ng-Repeat="pubCounterWestlaService in pubCounterWestlaServices | toArray : false | filterWithOr:{queueName:['Planning Check-In','Planning Express']} track by $index">
<li class="pub-header">{[{ pubCounterWestlaService.queueName }]}</li>
<li><i class="fa fa-clock-o fa-2x"></i>Current Wait Time<br> {[{ pubCounterWestlaService.actualWaitTime | time:'mm' }]}</li>
<li><i class="fa fa-user-circle-o fa-2x"></i>{[{ pubCounterWestlaService.numberOfTicketsWaiting }]} Person(s) Waiting</li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-6"">
<div class="desc-text">
<h6>Executive Offices</h6>
<div>Los Angeles City Hall<br>
200 N. Spring Street<br>
Suite 525<br>
Los Angeles, CA 90012<br>
<p>TEL: 213-978-1271</p></div>
<div class="hours"><strong>Hours of Operation:</strong></div>
<p style="float:left">Monday<br>
Tuesday<br>
Wednesday<br>
Thursday<br>
Friday</p>
<p style="float:right">8:00am - 5:00pm<br>
8:00am - 5:00pm<br>
8:00am - 5:00pm<br>
8:00am - 5:00pm<br>
8:00am - 5:00pm</p>
</div>
</div>
</div>
{# Right-side bar #}
<div class="col-md-3 sidebar-menu hidden-sm hidden-xs">
<div class="top-bar"></div>
{{ page.side_menu }}
</div>{# End Right-side bar #}
</div>
</div>{# End container #} {# End Right-side bar #} <!-- // .container -->
<!-- footer section -->
{{ attach_library ('cpv3/jsonp-array') }}
{{ attach_library ('cpv3/public-counters') }}
{{ attach_library ('cpv3/angular-js') }}
{% include directory ~ '/partials/footer.html.twig' %}
Raw
publicCounter.js
'use strict';
var app = angular.module('appPubCounter', ['ngRoute', 'ngSanitize', 'ngAnimate', 'ui.bootstrap', 'ngResource', 'angular-toArrayFilter']) .service('pubCounterMetroService', function($http) {
this.getRecord = function () {
return $http.jsonp('https://www.ladbsservices2.lacity.org/LADBS_Services/LADBS/WaitTimes?id=7&json=true?callback', {jsonpCallbackParam: 'callback', 'Cache-Control':'no-cache'})
then(function(data){
$scope.pubCounterMetroServices= response.data
console.log(response.data)
}).catch(function(response) {
// handle errors
console.log("nope")
})}
}).service('pubCounterValleyService', function($http) {
this.getRecord = function () {
return $http.jsonp('https://www.ladbsservices2.lacity.org/LADBS_Services/LADBS/WaitTimes?id=4&json=true?callback', {jsonpCallbackParam: 'callback', 'Cache-Control':'no-cache'})
then(function(data){
$scope.pubCounterValleyServices = response.data
console.log(response.data)
}).catch(function(response) {
// handle errors
console.log("nope");
})}
}).service('pubCounterWestlaService', function($http) {
this.getRecord = function () {
return $http.jsonp('https://www.ladbsservices2.lacity.org/LADBS_Services/LADBS/WaitTimes?id=3&json=true?callback', {jsonpCallbackParam: 'callback', 'Cache-Control':'no-cache'})
then(function(data){
$scope.pubCounterWestlaServices = response.data
console.log(response.data)
}).catch(function(response) {
// handle errors
console.log("nope");
})}
}).config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{[{').endSymbol('}]}')
/*
// Whitelist the JSONP endpoint to show it is trusted
*/
}).config(['$sceDelegateProvider', function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://www.ladbsservices2.lacity.org/LADBS_Services/LADBS/**',
'127.0.0.1'
])
// used to update async calls
}]).config(function ($httpProvider) {
$httpProvider.useApplyAsync(true);
/*
// Custom filter to filter on OR
// https://stackoverflow.com/questions/15868248/how-to-filter-multiple-values-or-operation-in-angularjs #9
*/
}).filter('filterWithOr', function($filter) {
var comparator = function(actual, expected) {
if (angular.isUndefined(actual)) {
return false;
}
if ((actual === null) || (expected === null)) {
return actual === expected;
}
if ((angular.isObject(expected) && !angular.isArray(expected)) || (angular.isObject(actual) && !hasCustomToString(actual))) {
return false;
}
actual = angular.lowercase('' + actual);
if (angular.isArray(expected)) {
var match = false;
expected.forEach(function(e) {
e = angular.lowercase('' + e);
if (actual.indexOf(e) !== -1) {
match = true;
}
})
return match;
} else {
expected = angular.lowercase('' + expected);
return actual.indexOf(expected) !== -1;
}
}
return function(array, expression) {
return $filter('filter')(array, expression, comparator);
}
/*
// Custom filter to format time
// https://stackoverflow.com/questions/25470475/angular-js-format-minutes-in-template #7
*/
}).filter('time', function() {
var conversions = {
'mm': function(value) {
return value * 60;
},
'hh': function(value) {
return value * 3600;
}
}
var padding = function(value, length) {
var zeroes = length - ('' + (value)).length,
pad = '';
while (zeroes-- > 0) pad += '0';
return pad + value;
}
return function(value, unit, format, isPadded) {
var totalSeconds = conversions[unit || 'ss'](value),
hh = Math.floor(totalSeconds / 3600),
mm = Math.floor((totalSeconds % 3600) / 60),
format = format || 'hh:mm';
isPadded = angular.isDefined(isPadded) ? isPadded : true;
hh = isPadded ? padding(hh, 2) : hh;
mm = isPadded ? padding(mm, 2) : mm;
return format.replace(/hh/, hh).replace(/mm/, mm);
}
});
app.controller('pubCounterMetroCtrl', ['$http', '$scope', '$interval', 'pubCounterMetroService', function($http, $scope, $interval, pubCounterMetroService) {
pubCounterMetroService.getRecord()
.then(function(response) {
$scope.pubCounterMetroServices = response.data
// start interval
var interval = $interval(function(){$http.jsonp('https://www.ladbsservices2.lacity.org/LADBS_Services/LADBS/WaitTimes?id=7&json=true?callback', {jsonpCallbackParam: 'callback'})
pubCounterMetroService.getRecord()
.then(function(response) {
$scope.pubCounterMetroServices = response.data
console.log('interval started')
console.log(response.data)
//console.log(response.data)
})
} , 30000)
}).catch(function(response) {
console.log('interval broke')
})
}])
app.controller('pubCounterValleyCtrl', ['$http', '$scope', 'pubCounterValleyService', '$interval', function($http, $scope, pubCounterValleyService, $interval) {
pubCounterValleyService.getRecord()
.then(function(response) {
$scope.pubCounterValleyServices = response.data
// start interval
var interval = $interval(function(){$http.jsonp('https://www.ladbsservices2.lacity.org/LADBS_Services/LADBS/WaitTimes?id=4&json=true?callback', {jsonpCallbackParam: 'callback'})
pubCounterValleyService.getRecord()
.then(function(response) {
$scope.pubCounterValleyServices = response.data
console.log('interval started')
console.log(response.data)
})
} , 30000)
})
}])
app.controller('pubCounterWestlaCtrl', ['$http', '$scope', 'pubCounterWestlaService', '$interval', function($http, $scope, pubCounterWestlaService, $interval) {
pubCounterWestlaService.getRecord()
.then(function(response) {
$scope.pubCounterWestlaServices = response.data
// start interval
var interval = $interval(function(){$http.jsonp('https://www.ladbsservices2.lacity.org/LADBS_Services/LADBS/WaitTimes?id=3&json=true?callback', {jsonpCallbackParam: 'callback'})
pubCounterWestlaService.getRecord()
.then(function(response) {
$scope.pubCounterWestlaServices = response.data
console.log('interval started')
console.log(response.data)
})
} , 30000)
})
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment