Skip to content

Instantly share code, notes, and snippets.

@emb03
Last active May 13, 2019 15:04
Show Gist options
  • Save emb03/cd5db38f7b3322ed434d911bb032f904 to your computer and use it in GitHub Desktop.
Save emb03/cd5db38f7b3322ed434d911bb032f904 to your computer and use it in GitHub Desktop.
Drupal 8 angularjs tabbed UI with json
<!-- 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" style="background-image: url('{{ file_url(node.field_image.entity.fileuri) }}')"></div>
</div>
</div>
</div>
{# End page-banner #}
<!-- contain -->
<div class="container" id="main-container" ng-app="appPS" ng-init="prefixSuffixes">
{# Main content #}
<div class="row">
<div class="col-md-12">{{ page.title_bar }}</div>
</div>
<div class="row content-wrapper" ng-controller="prefixSuffixCtrl">
{# Left-side bar #}
<div class="col-md-9">
<div class="row padding-left0">
<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>
{# content goes here #}
<div class="row">
<div class="col-md-12">
<ul style="list-style-type:none; float:right;" <li><a href="#" onclick="window.open('https://planning.lacity.org/dcpapi/general/prefixsuffix/active/pdf/');
window.open('https://planning.lacity.org/dcpapi/general/prefixsuffix/active/csv/')">Active Codes </a></li>
<li><a href="#" onclick="window.open('https://planning.lacity.org/dcpapi/general/prefixsuffix/inactive/pdf/');
window.open('https://planning.lacity.org/dcpapi/general/prefixsuffix/inactive/csv/')">Inactive Codes </a></li>
</ul>
<ul id="list-horizontal" class="padding-left0">
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(taba)}" ng-click="onClickTab(tab)">
<a href="#" ng-click="setFilter(tab)" ng-class="{active : filt === tab}">{[{tab}]}</a>
<span style="padding-left: 5px;">|</span>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12 table-responsive ps-tab tab-1" ng-class="{'fadein active': currentTab=='Active Prefixes' || currentTab=='All'}" ng-if="PrefixActive" ng-show="visible===true | json">
<h5>Active Prefixes</h5>
<table class="table table-hover">
<colgroup>
<col class="col-md-2">
<col class="col-md-4">
<col class="col-md-3">
</colgroup>
<thead>
<tr >
<th>Prefix</th>
<th>Description</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in PrefixActive track by $index">
<td>{[{ item.prefix }]}</td>
<td>{[{ item.desc }]}</td>
<td>{[{ item.note }]}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12 table-responsive ps-tab tab-2" ng-class="{'fadein active': currentTab=='Active Suffixes' || currentTab=='All'}" ng-if="SuffixActive" ng-show="visible===true | json">
<h5>Active Suffixes</h5>
<table class="table table-hover">
<colgroup>
<col class="col-md-2">
<col class="col-md-4">
<col class="col-md-3">
</colgroup>
<thead>
<tr>
<th>Suffix</th>
<th>Description</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in SuffixActive track by $index ">
<td>{[{ item.suffix }]}</td>
<td>{[{ item.desc }]}</td>
<td>{[{ item.note }]}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12 table-responsive ps-tab tab-3" ng-class="{'fadein active': currentTab=='Inactive Prefixes' || currentTab=='All'}" ng-if="PrefixInactive" ng-show="visible===true | json">
<h5>Inactive Prefixes</h5>
<table class="table table-hover">
<colgroup>
<col class="col-md-2">
<col class="col-md-4">
<col class="col-md-3">
</colgroup>
<thead>
<tr >
<th>Prefix</th>
<th>Description</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in PrefixInactive track by $index">
<td>{[{ item.prefix }]}</td>
<td>{[{ item.desc }]}</td>
<td>{[{ item.note }]}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12 table-responsive ps-tab tab-4" ng-class="{'fadein active': currentTab=='Inactive Suffixes' || currentTab=='All'}" ng-if="SuffixInactive" ng-show="visible===true | json">
<h5>Inactive Suffixes</h5>
<table class="table table-hover">
<colgroup>
<col class="col-md-2">
<col class="col-md-4">
<col class="col-md-3">
</colgroup>
<thead>
<tr>
<th>Suffix</th>
<th>Description</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in SuffixInactive track by $index ">
<td>{[{ item.suffix }]}</td>
<td>{[{ item.desc }]}</td>
<td>{[{ item.note }]}</td>
</tr>
</tbody>
</table>
<div></div>
</div>
{# End Left-side bar #}
</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>
</div>
</div>
{# End Right-side bar #}
</div>
{# End container #}
{# End Right-side bar #}
<!-- // .container -->
{# End container #}
<!-- footer section -->
{{ attach_library ('cpv3/jsonp-array') }}
{{ attach_library ('cpv3/prefix-suffix-report') }}
{{ attach_library ('cpv3/angular-js') }}
{% include directory ~ '/partials/footer.html.twig' %}
var app = angular.module('appPS', ['ngSanitize', 'ngRoute', 'ngAnimate', 'ui.bootstrap', 'angular-toArrayFilter'])
.service('prefixSuffixService', function($http) {
this.getRecord = function() {
return $http.get("https://planning.lacity.org/dcpapi/general/prefixsuffix/data");
}
})
.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
app.controller('prefixSuffixCtrl', ['$scope', '$http', '$filter', 'prefixSuffixService', function($scope, $http, $filter, prefixSuffixService) {
prefixSuffixService.getRecord().then(function(response) {
$scope.prefixSuffixes = response.data
// splits json arrays into their own scopes
for (var k in response.data) {
$scope[k] = response.data[k]
}
//console.log($scope.PrefixActive)
// console.log($scope.SuffixActive)
// console.log($scope.PrefixInactive)
// console.log($scope.SuffixInactive)
$scope.filt = 'All'
$scope.setFilter = function(tab) {
$scope.filt = tab
}
$scope.isActiveTab = function(taba) {
return (taba)
}
$scope.currentTab = $scope.isActiveTab;
$scope.tabs = ['All', 'Active Prefixes', 'Active Suffixes', 'Inactive Prefixes', 'Inactive Suffixes'];
// console.log($scope.tabs)
// console.log("output of tabs scope")
})
$scope.onClickTab = (function(taba) {
$http.get("https://planning.lacity.org/dcpapi/general/prefixsuffix/data").then(function(response, data, status) {
// splits json arrays into their own scopes
for (var k in response.data) {
$scope[k] = response.data[k]
}
// console.log($scope.PrefixActive)
// console.log($scope.SuffixActive)
// console.log($scope.PrefixInactive)
// console.log($scope.SuffixInactive)
$scope.currentTab == taba;
if (taba == 'All') {
$scope.currentTab = ('All')
console.log('All')
console.log('This is current tab: ' + $scope.currentTab)
if ($scope.prefixSuffix !== $scope.currentTab) {
// alert("All");
$scope.visible = true
//console.log('is visible')
$scope.PrefixActive
$scope.SuffixActive
$scope.SuffixInactive
$scope.PrefixInactive
} else {
$scope.visible = false;
// console.log('is not visible')
}
}
if (taba == 'Active Prefixes') {
$scope.PrefixActive
$scope.currentTab = ('Active Prefixes')
console.log('Active Prefixes')
console.log('This is current tab: ' + $scope.currentTab)
if ($scope.PrefixActive !== $scope.currentTab) {
// alert("Active Perfixes");
$scope.visible = true
$scope.prefixSuffixes = false
$scope.SuffixActive = false
$scope.SuffixInactive = false
$scope.PrefixInactive = false
$scope.PrefixActive
// console.log('is visible')
// console.log($scope.PrefixActive)
} else {
$scope.visible = false;
// console.log('is not visible')
}
}
if (taba == 'Active Suffixes') {
$scope.SuffixActive
$scope.currentTab = ('Active Suffixes')
// console.log('Active Suffixes')
// console.log('This is current tab: ' + $scope.currentTab)
if ($scope.SuffixActive !== $scope.currentTab) {
//alert("Active Suffixes");
$scope.visible = true
$scope.prefixSuffixes = false
$scope.PrefixActive = false
$scope.SuffixInactive = false
$scope.PrefixInactive = false
$scope.SuffixActive
// console.log('is visible')
} else {
$scope.visible = false;
}
}
if (taba == 'Inactive Prefixes') {
$scope.PrefixInactive
$scope.currentTab = ('Inactive Prefixes')
// console.log('Inactive Prefixes')
if ($scope.PrefixActive !== $scope.currentTab) {
// alert("Inactive Perfixes");
$scope.visible = true
$scope.prefixSuffixes = false
$scope.PrefixActive = false
$scope.SuffixActive = false
$scope.SuffixInactive = false
$scope.PrefixInactive
// console.log('is visible')
} else {
$scope.visible = false;
}
}
if (taba == 'Inactive Suffixes') {
$scope.SuffixInactive
$scope.currentTab = ('Inactive Suffixes')
// console.log('Inactive Suffixes');
if ($scope.SuffixInactive !== $scope.currentTab) {
// alert("Inactive Suffixes");
$scope.visible = true
$scope.prefixSuffixes = false
$scope.PrefixActive = false
$scope.SuffixActive = false
$scope.PrefixInactive = false
$scope.SuffixInactive
} else {
$scope.visible = false;
}
}
})
})
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment