<!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 href='https://api.mapbox.com/mapbox-assembly/v0.19.0/assembly.min.css' rel='stylesheet'>
<script async defer src='https://api.mapbox.com/mapbox-assembly/v0.19.0/assembly.js'></script>
<script src='https://unpkg.com/vue'></script>
<script async defer src='https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.16/moment-timezone-with-data.min.js'></script>
<link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.css' type='text/css' />
<script src='./main.js'></script>
</head>
<body class='h-full'>
<div id="app" class="h-full relative">
<div class='viewport-full relative scroll-hidden'>
<div id="map" class='h-full bg-darken10 viewport-twothirds viewport-full-ml absolute top left right bottom'></div>
<div class='absolute top-ml left bottom z1 w-full w240-ml hmax-full px12 py12-ml' style="pointer-events: none;">
<div v-if="feature" class='flex-parent flex-parent--column viewport-third h-auto-ml hmax-full bg-white round-ml shadow-darken10' style="pointer-events:auto;">
<heading :is_authed='credentials.authed' :login_show='login_show' :logout='logout' title='Hecate Deltas'></heading>
<div class='flex-child clearfix px12 py12 bg-gray-faint round-b-ml txt-s'>
<button @click="feature = false" class='btn round bg-gray-light bg-darken25-on-hover color-gray-dark fl'><svg class='icon'><use xlink:href='#icon-arrow-left'/></button>
<div class="px12 py3 txt-bold fl">Feature <span v-text="feature.id"></span></div>
</div>
<div class="flex-child scroll-auto">
<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)">
<td v-text="prop"></td>
<td v-if="Array.isArray(feature.properties[prop])">
<template v-for="element in feature.properties[prop]" style="border-bottom: dotted;">
<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>
<template v-else>
<td v-text="JSON.stringify(element)"></td>
</template>
<div style="border-bottom: solid #CBCBCB 1px;"></div>
</template>
</td>
<td v-else v-text="JSON.stringify(feature.properties[prop])"></td>
</tr>
</tbody>
</table>
</div>
<foot/>
</div>
<div v-else-if="delta" class='flex-parent flex-parent--column viewport-third h-auto-ml hmax-full bg-white round-ml shadow-darken10' style="pointer-events:auto;">
<heading :is_authed='credentials.authed' :login_show='login_show' :logout='logout' title='Hecate Deltas'></heading>
<div class='flex-child clearfix px12 py12 bg-gray-faint round-b-ml txt-s'>
<button @click="delta = false" class='btn round bg-gray-light bg-darken25-on-hover color-gray-dark fl'><svg class='icon'><use xlink:href='#icon-arrow-left'/></button>
<div class="px12 py3 txt-bold fl">Delta <span v-text="delta.id"></span></div>
</div>
<div class="flex-child py12 px12 bg-gray-faint txt-s align-center"><span v-text="delta.props.message ? delta.props.message : '<No Delta Message>'"></span></div>
<div class="flex-child scroll-auto">
<div v-for="(feat, feat_it) in delta.features.features" class="px12 py3 clearfix bg-white bg-darken25-on-hover cursor-pointer">
<span v-if="feat.geometry.type === 'Point'" class="fl py6 px6"><svg class='icon'><use xlink:href='#icon-marker'/></span>
<span v-if="feat.geometry.type === 'MultiPoint'" class="fl px6 py6"><svg class='icon'><use xlink:href='#icon-marker'/></span>
<span v-if="feat.geometry.type === 'LineString'" class="fl px6 py6"><svg class='icon'><use xlink:href='#icon-polyline'/></span>
<span v-if="feat.geometry.type === 'MultiLineString'" class="fl px6 py6"><svg class='icon'><use xlink:href='#icon-polyline'/></span>
<span v-if="feat.geometry.type === 'Polygon'" class="fl px6 py6"><svg class='icon'><use xlink:href='#icon-polygon'/></span>
<span v-if="feat.geometry.type === 'MultiPolygon'" class="fl px6 py6"><svg class='icon'><use xlink:href='#icon-polygon'/></span>
<span class="fl" v-text="feat.id"></span>
<span class="fl px6" v-text="feat.action"></span>
</div>
</div>
<foot/>
</div>
<div v-else-if="panel == 'Bounds'" class='flex-parent flex-parent--column viewport-third h-auto-ml hmax-full bg-white round-ml shadow-darken10' style="pointer-events:auto;">
<heading :is_authed='credentials.authed' :login_show='login_show' :logout='logout' title='Hecate Bounds'></heading>
<div class='flex-child px12 py12 bg-gray-faint round-b-ml txt-s'>
<template><panel v-model="panel"/></template>
<button @click="bounds_refresh" class='btn round bg-gray-light bg-darken25-on-hover color-gray-dark fr'><svg class='icon'><use xlink:href='#icon-refresh'/></button>
</div>
<div class="flex-child scroll-auto">
<div v-if="!bounds.length" class="px12 py3 clearfix bg-white">
<div align="center">No Boundaries</div>
</div>
<div v-for="(bound, bound_it) in bounds" class="w-full py3 clearfix bg-white bg-darken25-on-hover cursor-pointer">
<a v-bind:href="`/api/data/bounds/${bound}`" target="_blank" class="w-full clearfix">
<span class="fl py6 px6"><svg class='icon'><use xlink:href='#icon-database'/></span>
<span class="fl" v-text="bound"></span>
</a>
</div>
</div>
<foot/>
</div>
<div v-else-if="panel == 'Styles'" class='flex-parent flex-parent--column viewport-third h-auto-ml hmax-full bg-white round-ml shadow-darken10' style="pointer-events:auto;">
<heading :is_authed='credentials.authed' :login_show='login_show' :logout='logout' title='Hecate Styles'></heading>
<div class='flex-child px12 py12 bg-gray-faint round-b-ml txt-s'>
<template><panel v-model="panel"/></template>
<button @click="styles_refresh" class='btn round bg-gray-light bg-darken25-on-hover color-gray-dark fr'><svg class='icon'><use xlink:href='#icon-refresh'/></button>
<template v-if="credentials.authed">
<button @click="style_create()" class='fr btn mx6 btn--s round align-center'>New</button>
</template>
</div>
<div class="flex-child scroll-auto">
<div v-if="!styles.length" class="px12 py3 clearfix bg-white">
<div align="center">No Custom Styles</div>
</div>
<div v-for="(style, style_it) in pstyles" class="w-full py3 clearfix bg-white bg-darken25-on-hover cursor-pointer">
<div @click="style_set_modal(style.id)" class="w-full clearfix">
<span class="fl py6 px6"><svg class='icon'><use xlink:href='#icon-lock'/></span>
<div class="fl">
<span v-text="style.username"></span>/<span v-text="style.name"></span>
</div>
</div>
</div>
<div v-for="(style, style_it) in styles" class="w-full py3 clearfix bg-white bg-darken25-on-hover cursor-pointer">
<div @click="style_set_modal(style.id)" class="w-full clearfix">
<span class="fl py6 px6"><svg class='icon'><use xlink:href='#icon-paint'/></span>
<div class="fl">
<span v-text="style.username"></span>/<span v-text="style.name"></span>
</div>
</div>
</div>
</div>
<foot/>
</div>
<div v-else class='flex-parent flex-parent--column viewport-third h-auto-ml hmax-full bg-white round-ml shadow-darken10' style="pointer-events:auto;">
<heading :is_authed='credentials.authed' :login_show='login_show' :logout='logout' title='Hecate Deltas'></heading>
<div class='flex-child px12 py12 bg-gray-faint round-b-ml txt-s'>
<template><panel v-model="panel"/></template>
<button @click="deltas_refresh" class='btn round bg-gray-light bg-darken25-on-hover color-gray-dark fr'><svg class='icon'><use xlink:href='#icon-refresh'/></button>
</div>
<div v-if="!deltas.length" class="px12 py3 clearfix bg-white">
<div align="center">No Deltas</div>
</div>
<div class="flex-child scroll-auto">
<div v-for="delta in deltas" @click="delta_get(delta.id)" class="px12 py12 border-b bg-darken10-on-hover border--gray-light cursor-pointer wfull">
<div class="clearfix">
<div class="fl txt-bold" v-text="delta.username"></div>
<div class="fr txt-em" v-text="moment(delta.created).add(moment().utcOffset(), 'minutes').fromNow()"></div>
</div>
<span v-text="delta.props.message ? delta.props.message : '<No Delta Message>'"></span>
<span class='bg-blue-faint color-blue inline-block px6 py3 my3 my3 txt-xs txt-bold round fr' v-text="delta.id"></span>
</div>
</div>
<foot/>
</div>
</div>
<div v-if='modal.type === "login"' class='absolute top left bottom right z2 bg-black' 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 h300 bg-white round-ml shadow-darken10">
<div class='grid w-full'>
<div class='col col--8'>
<h3 class='fl py6 txt-m txt-bold w-full'>Hecate Login</h3>
</div>
<div class='col col--4'>
<button @click='modal.type = false'class='fr btn round bg-white color-black bg-darken25-on-hover'><svg class='icon'><use xlink:href='#icon-close'/></svg></button>
</div>
<div class='col col--12 py12'>
<label>
Username:
<input v-model='modal.login.username' class='input py12' placeholder='username'/>
</label>
</div>
<div class='col col--12 py12'>
<label>
Password:
<input v-model='modal.login.password' type='password' class='input py12' placeholder='password'/>
</label>
</div>
<div class='col col--12'>
<div class='grid grid--gut12'>
<div class='col col--6 py12'>
<button @click='register_show' class='btn round bg-gray w-full'>Register</button>
</div>
<div class='col col--6 py12'>
<button @click='login' class='btn round w-full'>Login</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if='modal.type === "register"' class='absolute top left bottom right z2 bg-black' 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 h400 bg-white round-ml shadow-darken10">
<div class='grid w-full'>
<div class='col col--8'>
<h3 class='fl py6 txt-m txt-bold w-full'>Hecate Register</h3>
</div>
<div class='col col--4'>
<button @click='modal.type = false'class='fr btn round bg-white color-black bg-darken25-on-hover'><svg class='icon'><use xlink:href='#icon-close'/></svg></button>
</div>
<div class='col col--12 py12'>
<label>
Username:
<input v-model="modal.register.username" class='input py12' placeholder='username'/>
</label>
</div>
<div class='col col--12 py12'>
<label>
Email:
<input v-model='modal.register.email' class='input py12' placeholder='email'/>
</label>
</div>
<div class='col col--12 py12'>
<label>
Password:
<input v-model='modal.register.password' type='password' class='input py12' placeholder='password'/>
</label>
</div>
<div class='col col--12'>
<div class='grid grid--gut12'>
<div class='col col--6 py12'>
<button @click='modal.type = false' class='btn round bg-gray w-full'>Cancel</button>
</div>
<div class='col col--6 py12'>
<button @click='register' class='btn round w-full'>Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if='modal.type === "style_set"' class='absolute top left bottom right z2' 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 h400 bg-white round-ml shadow-darken10">
<div class='grid w-full'>
<div class='col col--11'>
<template v-if="credentials.uid === modal.style_set.uid">
<input class='input my12' v-model="modal.style_set.name" placeholder="Style Name"/>
</template>
<template v-else>
<h3 class='fl py6 txt-m txt-bold fl'><span v-text='`${modal.style_set.username}/${modal.style_set.name}`'></span></h3>
</template>
</div>
<div class='col col--1'>
<button @click='modal.type = false'class='fr btn round bg-white color-black bg-darken25-on-hover'><svg class='icon'><use xlink:href='#icon-close'/></svg></button>
</div>
<div class='col col--12'>
<textarea :readonly="credentials.uid !== modal.style_set.uid" class='textarea w-full h360' v-model="modal.style_set.style" placeholder="Style JSON"></textarea>
</div>
<div class='col col--12'>
<div class='grid grid--gut12'>
<div class='col col--8 py12'>
<template v-if="credentials.authed && credentials.uid !== modal.style_set.uid">
<button @click='style_create(modal.style_set.style, modal.style_set.name)' class='btn round btn--stroke w-full'>Clone & Edit</button>
</template>
<template v-else-if="credentials.authed && modal.style_set.id">
<label class='switch-container my6'>
<input type='checkbox' v-model="modal.style_set.public"/>
<div class='switch mr6'></div>
Public Style
</label>
</template>
</div>
<div class='col col--4 py12'>
<template v-if="credentials.uid === modal.style_set.uid">
<button @click='style_update(modal.style_set.id, modal.style_set.name, JSON.parse(modal.style_set.style))' class='btn round btn--stroke w-full'>Save & Apply Style</button>
</template>
<template v-else>
<button @click='style_set(modal.style_set.id, JSON.parse(modal.style_set.style))' class='btn round btn--stroke w-full'>Apply Style</button>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if='modal.type === "ok"' class='absolute top left bottom right z2 bg-black' 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 h400 bg-white round-ml shadow-darken10">
<div class='grid w-full'>
<div class='col col--8'>
<h3 class='fl py6 txt-m txt-bold w-full' v-text='modal.ok.header'></h3>
</div>
<div class='col col--4'>
<button @click='modal.type = false'class='fr btn round bg-white color-black bg-darken25-on-hover'><svg class='icon'><use xlink:href='#icon-close'/></svg></button>
</div>
<div class='col col--12 py24' v-text='modal.ok.body'></div>
<div class='col col--12'>
<div class='grid grid--gut12'>
<div class='col col--6 py12'></div>
<div class='col col--6 py12'>
<button @click='modal.type = false' class='btn round w-full'>OK</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if='modal.type === "ok"' class='absolute top left bottom right z2 bg-black' 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 h400 bg-white round-ml shadow-darken10">
<div class='grid w-full'>
<div class='col col--8'>
<h3 class='fl py6 txt-m txt-bold w-full' v-text='modal.ok.header'></h3>
</div>
<div class='col col--4'>
<button @click='modal.type = false'class='fr btn round bg-white color-black bg-darken25-on-hover'><svg class='icon'><use xlink:href='#icon-close'/></svg></button>
</div>
<div class='col col--12 py24' v-text='modal.ok.body'></div>
<div class='col col--12'>
<div class='grid grid--gut12'>
<div class='col col--6 py12'></div>
<div class='col col--6 py12'>
<button @click='modal.type = false' class='btn round w-full'>OK</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>