@neogrup/nc-zone-map
Version:
Polymer component to display the zone map
183 lines (151 loc) • 5.51 kB
HTML
<!--
@license
Copyright (c) 2017 Neo
-->
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>nc-zone-map demo</title>
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="../node_modules/web-animations-js/web-animations-next-lite.min.js"></script>
<script type="module" src="../nc-zone-map.js"></script>
<style>
body{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<demo-nc-zone-map></demo-nc-zone-map>
<script type="module">
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '@polymer/iron-ajax/iron-ajax.js';
import '@polymer/paper-card/paper-card.js';
class DemoNcZoneMap extends PolymerElement {
static get template() {
return html`
<style>
:host{
display: block;
--app-primary-color: rgb(33, 33, 33);
--app-secondary-color: #253855;
--app-accent-color: #FF9800;
--app-bg-color: #EEEEEE;
--app-scrollbar-color: var(--app-secondary-color);
}
div.content-zone{
height: calc(100vh - 10px);
width: calc(100% - 0px);
padding: 0px;
position: relative;
}
paper-card{
width: calc(100% - 0px);
height: calc(100% - 0px);
}
</style>
<iron-ajax
id="getZoneMap"
url="data/zone"
method="get"
handle-as="json"
last-response="{{dataZoneMap}}"
on-response="_handleGetZoneMapResponse">
</iron-ajax>
<iron-ajax id="getZoneTicketsList"
id="getTickets"
method="get"
url="data/tickets"
handle-as="json"
last-response="{{dataZoneTicketsList}}"
on-response="_handleGetZoneTicketsListResponse">
</iron-ajax>
<div class="content-zone">
<paper-card>
<nc-zone-map
language={{language}}
data="{{zoneMapData}}"
zone-height={{zoneHeight}}
zone-width={{zoneWidth}}
element-list-height="[[dimensionZoneElementList]]"
element-list-width="[[dimensionZoneElementList]]"
editor-mode="{{editorMode}}"
ticket-loading="{{ticketLoading}}"
tickets-list="{{zoneTicketsListData}}"
mode="view"
spots-view-mode="{{spotsViewMode}}"
map-view-mode="{{mapViewMode}}"
multiple-tickets-allowed="{{multipleTicketsAllowed}}"
on-zone-element-selected="_zoneElementSelected"
on-zone-element-selected-to-move="_zoneElementSelectedToMove"
on-zone-element-selected-to-move-end="_zoneElementSelectedToMoveEnd">
</nc-zone-map>
</paper-card>
</div>
`;
}
static get properties() {
return {
language: {
type: String,
value: 'es'
},
elementConf: Object,
elementData: Object,
mapViewMode: {
type: String,
value: 'MAPLIST' //'MAPFIT' //'MAPLIST'
},
spotsViewMode: {
type: String,
value: 'ORDERID' //'DOCID' //'ORDERID'
},
dimensionZoneElementList:{
type: Number,
value: 150
}
}
}
connectedCallback() {
super.connectedCallback();
this.$.getZoneMap.generateRequest();
window.addEventListener('resize', this._appResize.bind(this));
}
_handleGetZoneMapResponse(){
this.$.getZoneTicketsList.generateRequest();
this.zoneMapData = JSON.parse(JSON.stringify(this.dataZoneMap));
let card = this.shadowRoot.querySelector('.content-zone');
if (card.offsetHeight !== 0){
this.zoneHeight = card.offsetHeight;
this.zoneWidth = card.offsetWidth;
}
}
_handleGetZoneTicketsListResponse(){
this.zoneTicketsListData = JSON.parse(JSON.stringify(this.dataZoneTicketsList));
}
_appResize(){
let card = this.shadowRoot.querySelector('.content-zone');
if (card.offsetHeight !== 0){
this.zoneHeight = card.offsetHeight;
this.zoneWidth = card.offsetWidth;
}
//this._itemsGridDataChanged();
}
_zoneElementSelected(element){
console.log('_zoneElementSelected', element);
}
_zoneElementSelectedToMove(element){
console.log('_zoneElementSelectedToMove', element);
}
_zoneElementSelectedToMoveEnd(element){
console.log('_zoneElementSelectedToMoveEnd', element);
}
}
window.customElements.define('demo-nc-zone-map', DemoNcZoneMap);
</script>
</body>
</html>