Skip to content

Instantly share code, notes, and snippets.

@pgiraud

pgiraud/adresses.json

Last active April 15, 2016 11:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pgiraud/aad6db2afd43f02aed1b7e2fb50bfdc3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pgiraud/aad6db2afd43f02aed1b7e2fb50bfdc3 to your computer and use it in GitHub Desktop.
Download ZIP
GMF2 results in a grid
Display the source blob
Display the rendered blob
Raw
adresses.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
</head>
<body ng-app="myApp" ng-controller="MainCtrl as ctrl">
<div class="gmf-results-grid">
<button class="close">&times;</button>
<!-- Nav tabs -->
<ul class="nav nav-tabs small" role="tablist">
<li role="presentation" class="active"><a href="#parcelles" aria-controls="parcelles" role="tab" data-toggle="tab">Parcelles cadastrales (20)</a></li>
<li role="presentation"><a href="#adresses" aria-controls="adresses" role="tab" data-toggle="tab">Adresses (3)</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="parcelles">
<div class="table-container">
<div class="table-container-header">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Cadastre <i class="fa fa-sort-down"></i></th>
<th>N° de bien-fonds <i class="text-muted fa fa-sort"></i></th>
<th>Source <i class="text-muted fa fa-sort"></i></th>
<th>Type <i class="text-muted fa fa-sort"></i></th>
<th>Surface RF [m²] <i class="text-muted fa fa-sort"></i></th>
<th>Propriétaire <i class="text-muted fa fa-sort"></i></th>
</tr>
</thead>
</table>
</div>
<div class="table-container-body">
<table class="table table-hover table-bordered">
<tbody>
<tr ng-repeat="row in ctrl.cadastre" ng-click="ctrl.select(row)" ng-class="{active: row.active}">
<td>
{{row.properties.cadastre}}
</td>
<td>
{{row.properties.nummai}}
</td>
<td>
{{row.properties.source}}
</td>
<td>
{{row.properties.typimm}}
</td>
<td>
{{row.properties.srfmai}}
</td>
<td>
<a href>Cliquer ici</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="adresses">
<div class="table-container">
<div class="table-container-header">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>N° cantonal rue <i class="fa fa-sort-down"></i></th>
<th>Adresse <i class="text-muted fa fa-sort"></i></th>
<th>Source <i class="text-muted fa fa-sort"></i></th>
</tr>
</thead>
</table>
</div>
<div class="table-container-body">
<table class="table table-hover table-condensed table-bordered">
<tbody>
<tr ng-repeat="row in ctrl.adresses">
<td>
{{row.properties.covoie}}
</td>
<td>
{{row.properties.nom_adresse}}
</td>
<td>
{{row.properties.source}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="navbar">
<ul class="nav navbar-nav navbar-right">
<li ng-show="ctrl.oneIsSelected()">
<button class="btn btn-link btn-xs" ><i class="fa fa-search-plus"></i> Zoom to</button>
</li>
<li ng-show="ctrl.oneIsSelected()">
<button class="btn btn-link btn-xs" ><i class="fa fa-download"></i> Export as CSV</button>
</li>
<li class="dropdown navbar-link dropup">
<button type="button" class="dropup btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li><a href ng-click="ctrl.selectAll()">All</a></li>
<li><a href ng-click="ctrl.selectNone()">None</a></li>
<li><a href ng-click="ctrl.reverseSelection()">Reverse selection</a></li>
</ul>
</li>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="script.js"></script>
</html>
Display the source blob
Display the rendered blob
Raw
parcelles.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
script.js
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', function($http, $timeout) {
var self = this;
$http({
method: 'GET',
url: 'parcelles.json'
}).then(function successCallback(response) {
self.cadastre = response.data.features;
redraw();
});
$http({
method: 'GET',
url: 'adresses.json'
}).then(function successCallback(response) {
self.adresses = response.data.features;
redraw();
});
this.select = function(row) {
row.active = !row.active;
};
this.selectAll = function() {
self.cadastre.forEach(function(row) {
row.active = true;
});
};
this.selectNone = function() {
self.cadastre.forEach(function(row) {
row.active = false;
});
};
this.reverseSelection = function() {
self.cadastre.forEach(function(row) {
row.active = !row.active;
});
};
this.oneIsSelected = function() {
if (self.cadastre) {
return self.cadastre.some(function(row) {
return row.active;
});
}
return false;
};
});
// Get ScrollBar width(From: http://bootstrap-table.wenzhixin.net.cn/)
var scrollBarWidth = (function () {
var inner = $('<p/>').addClass('fixed-table-scroll-inner'),
outer = $('<div/>').addClass('fixed-table-scroll-outer'),
w1, w2;
outer.append(inner);
$('body').append(outer);
w1 = inner[0].offsetWidth;
outer.css('overflow', 'scroll');
w2 = inner[0].offsetWidth;
if (w1 === w2) {
w2 = outer[0].clientWidth;
}
outer.remove();
return w1 - w2;
})();
// Redraw Header
function redraw() {
$('.tab-pane').each(function() {
var tabPane = $(this);
// code below is courtasy of http://jsfiddle.net/0x3333/f0vfpvLm/4/
var $body = $(tabPane).find(".table-container-body"),
$header = $(tabPane).find(".table-container-header");
var tds = $body.find("table > tbody > tr:first-child > td");
tds.each(function (i) {
var width = $(this).innerWidth(),
lastPadding = (tds.length -1 == i ? scrollBarWidth : 0);
$header.find("th:eq("+i+")").innerWidth(width + lastPadding);
});
});
}
// Listen to Resize Window
$(window).resize(redraw);
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
redraw();
});
Raw
style.css
.table {
font-size: 0.85em;
background-color: white;
}
.table-container {
border: 1px solid #ddd;
border-top: 0;
}
.table-container-header {
overflow: hidden;
width: 100%;
}
.table-container-body {
height: 154px;
overflow: auto;
width: 100%;
}
.table-container table {
margin-bottom: 0px;
table-layout: fixed;
}
.table-container table td,
.table-container table th {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
}
.table-bordered {
border: 0px;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
border-bottom-width: 2px;
}
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
border-top-width: 2px;
}
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
border-bottom-width: 0px;
}
/*Esquerda*/
.table-bordered > thead > tr > th:first-child,
.table-bordered > tbody > tr > th:first-child,
.table-bordered > tfoot > tr > th:first-child,
.table-bordered > thead > tr > td:first-child,
.table-bordered > tbody > tr > td:first-child,
.table-bordered > tfoot > tr > td:first-child {
border-left-width: 0px;
}
/*Direita*/
.table-bordered > thead > tr > th:last-child,
.table-bordered > tbody > tr > th:last-child,
.table-bordered > tfoot > tr > th:last-child,
.table-bordered > thead > tr > td:last-child,
.table-bordered > tbody > tr > td:last-child,
.table-bordered > tfoot > tr > td:last-child {
border-right-width: 0px;
}
/*Topo*/
.table-bordered > thead > tr:first-child > th,
.table-bordered > thead > tr:first-child > td {
border-top-width: 0px;
}
/*Baixo*/
.table-bordered > tfoot > tr:last-child > th,
.table-bordered > tfoot > tr:last-child > td {
border-bottom-width: 0px;
}
.gmf-results-grid table>tbody>tr>td,
.gmf-results-grid table>tbody>tr>th,
.gmf-results-grid table>tfoot>tr>td,
.gmf-results-grid table>tfoot>tr>th,
.gmf-results-grid table>thead>tr>td,
.gmf-results-grid table>thead>tr>th {
padding: 2px;
}
.gmf-results-grid {
padding: 4px;
}
.gmf-results-grid .nav-tabs>li>a {
padding: 2px 7px;
}
th > .fa-sort {
visibility: hidden;
}
th:hover > .fa-sort {
visibility: visible;
}
.gmf-results-grid .navbar {
min-height: 0;
margin-bottom: 0;
margin-right: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment