Skip to content

Commit

Permalink
Merge pull request #175 from mapbox/feature_descriptor
Browse files Browse the repository at this point in the history 
Fantastic Features
  • Loading branch information
@ingalls
ingalls committed Jul 17, 2019
2 parents 1db9300 + c5af072 commit e083151
Show file tree
Hide file tree
Showing 13 changed files with 692 additions and 433 deletions.
2 changes: 1 addition & 1 deletion web/dist/assembly.e8ba7458.css → web/dist/assembly.a18c4902.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion web/dist/index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html class="h-full" lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Hecate UI | Mapbox</title><link rel="shortcut icon" type="image/png" href="/admin/favicon.692d1453.ico"><link href="/admin/assembly.e8ba7458.css" rel="stylesheet"><script async defer src="/admin/assembly.4e53fc76.js"></script><script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script><link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" rel="stylesheet"><link rel="stylesheet" href="/admin/mapbox-gl-geocoder.45e809d1.css" type="text/css"><script src="/admin/main.c69d0ed1.js"></script></head><body class="h-full"> <div id="app" class="h-full relative"> </div> </body></html>
<!DOCTYPE html><html class="h-full" lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Hecate UI | Mapbox</title><link rel="shortcut icon" type="image/png" href="/admin/favicon.692d1453.ico"><link href="/admin/assembly.a18c4902.css" rel="stylesheet"><script async defer src="/admin/assembly.4e53fc76.js"></script><script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script><link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" rel="stylesheet"><link rel="stylesheet" href="/admin/mapbox-gl-geocoder.45e809d1.css" type="text/css"><script src="/admin/main.a8db3c0a.js"></script></head><body class="h-full"> <div id="app" class="h-full relative"> </div> </body></html>
34 changes: 20 additions & 14 deletions web/dist/main.c69d0ed1.js → web/dist/main.a8db3c0a.js
View file

Large diffs are not rendered by default.

77 changes: 45 additions & 32 deletions web/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<template>

<div class='viewport-full relative scroll-hidden'>
<!-- Map -->
<div id="map" class='h-full bg-darken10 viewport-twothirds viewport-full-ml absolute top left right bottom'></div>
Expand Down Expand Up @@ -47,16 +48,16 @@
</div>

<template v-if='panel === "deltas"'>
<deltas :map='map' v-on:user='modal = "user"; user_id = $event'/>
<deltas :map='map' v-on:error='handler($event)' v-on:user='modal = "user"; user_id = $event'/>
</template>
<template v-else-if='panel === "bounds"'>
<bounds :map='map' :panel='panel'/>
<bounds :map='map' v-on:error='handler($event)' :panel='panel'/>
</template>
<template v-else-if='panel === "styles"'>
<styles :credentials='credentials' v-on:style='modal = "style"; style_id = $event'/>
<styles :credentials='credentials' v-on:error='handler($event)' v-on:style='modal = "style"; style_id = $event'/>
</template>
<template v-else-if='feature'>
<feature :map='map' :id='feature' v-on:close='feature = false'/>
<feature :schema='schema' :map='map' :id='feature' v-on:error='handler($event)' v-on:close='feature = false'/>
</template>
</div>

Expand All @@ -72,8 +73,9 @@
</div>
</div>

<!-- Modal Opaque -->
<!-- Modal/Error Opaque -->
<div v-if='modal' class='absolute top left bottom right z2 bg-black opacity75' style="pointer-events: none;"></div>
<div v-if='error.title' class='absolute top left bottom right z4 bg-black opacity75' style="pointer-events: none;"></div>

<!--Modals here-->
<template v-if='modal === "login"'>
Expand All @@ -95,14 +97,18 @@
<self :auth='auth' v-on:close='modal = false' />
</template>
<template v-else-if='modal === "settings"'>
<settings v-on:close='settings_close' :auth='auth'/>
<settings v-on:error='handler($event)' v-on:close='settings_close' :auth='auth'/>
</template>
<template v-else-if='modal === "query"'>
<query :auth='auth' v-on:close='modal = false' :credentials='credentials' />
</template>
<template v-else-if='modal === "style"'>
<stylem v-on:close='modal = false' :style_id='style_id' :credentials='credentials' :map='map' />
</template>

<template v-if='error.title'>
<err :title='error.title' :body='error.body' v-on:close='error.title = ""'/>
</template>
</div>
</template>

Expand All @@ -112,6 +118,7 @@ import mapboxglgeo from '@mapbox/mapbox-gl-geocoder';
// === Components ===
import Foot from './components/Foot.vue';
import Err from './components/Error.vue';
// === Panels ===
import Deltas from './panels/Deltas.vue';
Expand All @@ -133,6 +140,10 @@ export default {
data: function() {
return {
auth: false,
error: {
title: '',
body: ''
},
credentials: {
map: { key: 'pk.eyJ1IjoiaW5nYWxscyIsImEiOiJjam42YjhlMG4wNTdqM2ttbDg4dmh3YThmIn0.uNAoXsEXts4ljqf2rKWLQg' },
authed: false,
Expand Down Expand Up @@ -264,12 +275,14 @@ export default {
panel: false, //Store the current panel view (Deltas, Styles, Bounds, etc)
layers: [], //Store list of GL layer names so they can be easily removed
feature: false, //Store the id of a clicked feature
schema: false, //Store the JSON Schema for features
user_id: false, //Store the id of a user for viewing more info
style_id: false, //Store the id of the current style - false for generic style
modal: false
}
},
components: {
err: Err,
self: Self,
user: User,
foot: Foot,
Expand All @@ -286,16 +299,18 @@ export default {
mounted: function(e) {
mapboxgl.accessToken = this.credentials.map.key;
this.getSchema();
this.getSelf((err, user) => {
if (err || !user) {
this.getSettings();
this.getLayers();
this.getAuth();
} else {
this.credentials.authed = true;
this.credentials.username = user.username;
this.credentials.uid = user.id;
this.getSettings();
this.getLayers();
this.getAuth();
}
});
Expand Down Expand Up @@ -345,7 +360,6 @@ export default {
},
watch: {
panel: function() {
console.error(this.panel);
if (this.panel !=='bounds') {
this.map.gl.getSource('hecate-bounds').setData({
type: 'Feature',
Expand All @@ -355,43 +369,43 @@ export default {
}
},
methods: {
handler: function(err) {
if (!err) return;
console.error('ERROR HANDLER', err);
this.error.title = err.title ? err.title : 'Error';
this.error.body = err.body ? err.body : err.message;
},
settings_close: function() {
this.modal = false;
this.getSettings();
this.getLayers();
},
getSettings: function() {
fetch(`${window.location.protocol}//${window.location.host}/api/meta/layers`, {
method: 'GET',
credentials: 'same-origin'
}).then((response) => {
return response.json();
}).then((layers) => {
if (!layers) return;
getLayers: function() {
window.hecate.meta.get('layers', (err, layers) => {
if (err) return this.handler(err);
if (!layers) return;
this.map.baselayers = layers;
}).catch((err) => {
console.error(err);
});
},
getAuth: function() {
fetch(`${window.location.protocol}//${window.location.host}/api/auth`, {
method: 'GET',
credentials: 'same-origin'
}).then((response) => {
return response.json();
}).then((auth) => {
if (!auth) return;
window.hecate.auth.get((err, auth) => {
if (err) return this.handler(err);
this.auth = auth;
}).catch((err) => {
console.error(err);
});
},
setBaseLayer(layer_idx) {
if (isNaN(layer_idx)) return;
this.map.gl.setStyle(this.map.baselayers[layer_idx].url);
},
getSchema: function() {
window.hecate.schema.get((err, schema) => {
if (err) return this.handler(err);
this.schema = schema;
});
},
getSelf: function(cb) {
fetch(`${window.location.protocol}//${window.location.host}/api/user/info`, {
credentials: 'same-origin'
Expand All @@ -406,15 +420,14 @@ export default {
}).then((user) => {
if (cb) return cb(null, user);
}).catch((err) => {
console.error(err);
if (err) return this.handler(err);
if (cb) return cb(err);
});
},
logout: function(reload) {
this.credentials.authed = false;
console.error('LOGOUT');
fetch(`${window.location.protocol}//${window.location.host}/api/user/session`, {
method: 'DELETE',
credentials: 'same-origin'
Expand Down
38 changes: 38 additions & 0 deletions web/src/components/Error.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<template>
<div class='absolute top left bottom right z5' style="pointer-events: none;">
<div class='flex-parent flex-parent--center-main flex-parent--center-cross h-full' style="pointer-events: auto;">
<div class="flex-child px12 py12 w600 h80 bg-white round-ml shadow-darken10">
<div class='grid w-full col'>
<div class='col--12'>
<h3 v-if='!title' class='w-full py6 txt-m txt-bold align-center'>Uh Oh!</h3>
<h3 v-else class='w-full py6 txt-m txt-bold align-center' v-text='title'></h3>
</div>

<div class='col--12 py12' v-text='body'></div>

<div class='col--12 py12'>
<div class='grid grid--gut12'>
<div class='col col--6'></div>
<div class='col col--6'>
<button class='btn round w-full' @click="close">Ok</button>
</div>
</div>
</div>
</div>
</div>
<div>
</div>
</template>

<script>
export default {
name: 'err',
render: h => h(App),
methods: {
close: function() {
this.$emit('close');
}
},
props: ['title', 'body']
}
</script>
58 changes: 58 additions & 0 deletions web/src/components/Key.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<template>
<div>
<div class="w-full txt-s" style="text-align: center;">Version: <span v-text="feature.version"></span></div>
<table class='table txt-xs'>
<thead><tr><th>Key</th><th>Value</th></tr></thead>
<tbody>
<tr v-for="prop in Object.keys(feature.properties)">
<template v-if='schema && schema.properties && schema.properties[prop] && schema.properties[prop].description'>
<td @click="popup(schema.properties[prop].description)" class="cursor-pointer txt-underline-on-hover" v-text="prop">
</template>
<template v-else>
<td v-text="prop">
</template>

<!-- element: (Array) -->
<td v-if="Array.isArray(feature.properties[prop])">
<template v-for="element in feature.properties[prop]" style="border-bottom: dotted;">
<!-- element: Array: (Object) -->
<template v-if="typeof element === 'object' && !Array.isArray(element)">
<tr v-for="key in Object.keys(element)">
<td v-text="key"></td>
<td v-text="element[key]"></td>
</tr>
</template>
<!-- element: Array: (String) -->
<template v-else>
<td v-text="element"></td>
</template>
<!-- element: Array: (Array, Number) -->
<template v-else>
<td v-text="JSON.stringify(element)"></td>
</template>

<div style="border-bottom: solid #CBCBCB 1px;"></div>
</template>
</td>
<!-- element: (String) -->
<td v-else-if="typeof feature.properties[prop] === 'string'" v-text="feature.properties[prop]"></td>
<!-- element: (Object, Number) -->
<td v-else v-text="JSON.stringify(feature.properties[prop])"></td>
</tr>
</tbody>
</table>
</div>
</template>

<script>
export default {
name: 'key',
render: h => h(App),
methods: {
popup: function(description) {
this.$emit('error', description);
}
},
props: ['feature', 'schema']
}
</script>

0 comments on commit e083151

Please sign in to comment.