src/UI/WebBundle/Resources/views/Whater/whater_point_map.html.twig line 1

Open in your IDE?
  1. {% extends 'Common/base.html.twig' %}
  2. {% import 'Common/parts/functions.html.twig' as function %}
  4. {% block title %}{{ 'admin.whater_point.map.title'|trans }} | {{ parent() }}{% endblock %}
  8. {% block stylesheets %}
  9. {{ parent() }}
  11. {{ encore_entry_link_tags('select2_styles') }}
  12. {{ encore_entry_link_tags('leaflet_styles') }}
  14. {% endblock stylesheets %}
  16. {% block javascripts %}
  18. {{ parent() }}
  19. {{ encore_entry_script_tags('select2_js') }}
  20. {{ encore_entry_script_tags('leaflet_js') }}
  21. {{ encore_entry_script_tags('wt_whater_point_map') }}
  23. {% endblock javascripts %}
  25. {% block contents %}
  27. <div class="container whater-map" ng-controller="mapWhaterpointsCtrl">
  28. <nav class="mb-2" aria-label="breadcrumb">
  29. <ol class="breadcrumb mb-0">
  30. <li class="breadcrumb-item"><a href="{{path('web_init')}}">Inicio</a></li>
  31. {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
  32. <li class="breadcrumb-item"><a href="{{path('web_app_user_dashboard')}}">Mi cuenta</a></li>
  33. {% endif %}
  34. <li class="breadcrumb-item active" aria-current="page">Mapa</li>
  35. </ol>
  36. </nav>
  38. <div class="mb-2">
  39. <div class="border-bottom mb-3 mx-n3 px-2 mx-lg-n6 px-lg-6">
  40. <div class="row g-3 flex-between-end align-items-center mb-5">
  41. <div class="col-auto me-auto">
  42. <h2 >{{ 'admin.whater_point.map.title'|trans }}</h2>
  43. </div>
  44. <div class="col-auto ms-auto">
  45. {% if is_granted('IS_AUTHENTICATED_FULLY') and (app.user.user.activeRole.type == 'ROLE_ADMIN') %}
  46. <a href="{{ url('web_admin_whater_point_list') }}" class="btn btn-phoenix-secondary mb-2 me-2 mb-sm-0">Listado</a>
  47. {% endif %}
  48. <a href="{{ url('web_app_whater_point_register') }}" class="btn btn-phoenix-secondary mb-2 me-2 mb-sm-0">Nuevo</a>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  54. {{ function.showFlashes() }}
  56. <ul class="nav nav-links mb-3 mb-lg-2 mx-n3">
  57. <li class="nav-item">
  58. <div class="nav-link active text-decoration-underline" id="link-whaterpoints" aria-current="page" ng-click="clickFilterLinkWhaterpoints()">
  59. Mostrar Whaterpoints
  60. </div>
  61. </li>
  62. <li class="nav-item">
  63. <div class="nav-link" id="link-establishments" ng-click="clickFilterLinkEstablishments()">
  64. Mostrar Establecimientos
  65. </div>
  66. </li>
  67. <li class="nav-item">
  68. <div class="nav-link" id="link-distribution-networks" ng-click="clickFilterLinkDistributionNetworks()">
  69. Mostrar Redes de Distribución
  70. </div>
  71. </li>
  72. </ul>
  74. {% set disable_filters = true %}
  75. {% if is_granted('IS_AUTHENTICATED_FULLY') %}
  76. {% set disable_filters = not (app.user.user.activeRole.type == 'ROLE_ADMIN' or app.user.user.whaterOrganization != NULL) %}
  77. <div ng-init="initActiveLicense(1)"></div>
  78. {% endif %}
  79. <div class="row">
  80. <div class="col-6 col-md-4 col-lg-3 mb-1">
  81. <label class="form-label" for="whater_name">Nombre</label>
  82. <input type="text" id="whater_name" class="form-control mb-3" ng-init="initWhaterName()"/>
  83. </div>
  84. <div class="col-6 col-md-4 col-lg-3 mb-1" ng-init="initSelectCountries()">
  85. <label class="form-label" for="whater_country_select">Pais</label>
  86. <select id="whater_country_select" class="form-select mb-3" >
  87. {% for country in countries %}
  88. <option {{country.isoCode3() == "ESP" ? "selected" : ""}} value="{{ country.isoCode3() }}">{{ country.name() }}</option>
  89. {% endfor %}
  90. </select>
  91. </div>
  92. <div class="col-6 col-md-4 col-lg-3 mb-1" ng-init="initSelectTowns()">
  93. <label class="form-label" for="whater_town_select">Ciudad/Municipio</label>
  94. <select id="whater_town_select" class="form-select mb-3"
  95. data-search-town-url="{{ url('web_api_public_zones_town_list', {'list_town[orderParameter]':'name','list_town[orderValue]':'asc','list_town[filterParameter]':'country_iso3,tablesearch'}) }}">
  96. </select>
  97. </div>
  98. <div class="col-6 col-md-4 col-lg-3 mb-1 " >
  99. <label class="form-label">&nbsp;</label>
  100. <div>
  101. <a class="btn btn-link text-900 fs--1"
  102. data-bs-toggle="collapse" href="#advanced_filters" role="button"
  103. aria-expanded="false" aria-controls="advanced_filters" >Filtros Avanzados</a>
  104. </div>
  105. </div>
  106. </div>
  107. <div class="collapse row" id="advanced_filters">
  108. <div class="col-6 col-md-4 col-lg-3 mb-1" ng-init="initSelectWhaterStatus()">
  109. <label class="form-label" for="whater_status_input">Estado del agua</label>
  110. <select placeholder="Estado"
  111. id="whater_status_input"
  112. class="form-select mb-3"
  113. {% if disable_filters %}disabled="disabled"{% endif %} >
  114. <option selected value="ALL">Todos los estados</option>
  115. <option value="WP_STATUS_SUITABLE">Apta para el consumo</option>
  116. <option value="WP_STATUS_WITH_RESTRICTIONS">Apta con restricciones</option>
  117. <option value="WP_STATUS_NOT_SUITABLE">No apta para el consumo</option>
  118. <option value="WP_STATUS_UNKNOWN">Sin datos</option>
  119. </select>
  120. </div>
  121. <div class="col-6 col-md-4 col-lg-3 mb-1 select-whaterpoint-type" ng-init="initSelectWhaterType()">
  122. <label class="form-label" for="whater_type_input">Tipo de agua</label>
  123. <select placeholder="Estado"
  124. id="whater_type_input"
  125. class="form-select mb-3"
  126. {% if disable_filters %}disabled="disabled"{% endif %} >
  127. <option selected value="ALL">Todos los tipos</option>
  128. <option value="WP_TYPE_FOUNTAIN">{{'whaterpoint.type.WP_TYPE_FOUNTAIN' | trans }}</option>
  129. <option value="WP_TYPE_TAP">{{'whaterpoint.type.WP_TYPE_TAP' | trans }}</option>
  130. <option value="WP_TYPE_DEPOSIT">{{'whaterpoint.type.WP_TYPE_DEPOSIT' | trans }}</option>
  131. <option value="WP_TYPE_BOTTLED">{{'whaterpoint.type.WP_TYPE_BOTTLED' | trans }}</option>
  132. <option value="WP_TYPE_SPRING">{{'whaterpoint.type.WP_TYPE_SPRING' | trans }}</option>
  133. <option value="WP_TYPE_TREATED">{{'whaterpoint.type.WP_TYPE_TREATED' | trans }}</option>
  134. </select>
  135. </div>
  136. <div class="col-6 col-md-4 col-lg-3 mb-1 select-establishment-type" style="display:none;" ng-init="initSelectEstablishmentType()">
  137. <label class="form-label" for="establihment_type_input">Tipo de establecimiento</label>
  138. <select placeholder="Estado"
  139. id="establihment_type_input"
  140. class="form-select mb-3 "
  141. {% if disable_filters %}disabled="disabled"{% endif %} >
  142. <option selected value="ALL">Todos los tipos</option>
  143. <option value="ET_COMMERCIAL_ESTABLISHMENT">{{'admin.establishment.tipology.ET_COMMERCIAL_ESTABLISHMENT' | trans }}</option>
  144. <option value="ET_BAR_RESTAURANT_CAFETERIA">{{'admin.establishment.tipology.ET_BAR_RESTAURANT_CAFETERIA' | trans }}</option>
  145. <option value="ET_RESTAURANT_CHAIN">{{'admin.establishment.tipology.ET_RESTAURANT_CHAIN' | trans }}</option>
  146. <option value="ET_PRIORITIZED_BUILDING">{{'admin.establishment.tipology.ET_PRIORITIZED_BUILDING' | trans }}</option>
  147. <option value="ET_INDIVIDUAL_ACCOMMODATION">{{'admin.establishment.tipology.ET_INDIVIDUAL_ACCOMMODATION' | trans }}</option>
  148. <option value="ET_CENTERS">{{'admin.establishment.tipology.ET_CENTERS' | trans }}</option>
  149. <option value="ET_HOTEL_CHAIN">{{'admin.establishment.tipology.ET_HOTEL_CHAIN' | trans }}</option>
  150. <option value="ET_TOURISM_OFFICES">{{'admin.establishment.tipology.ET_TOURISM_OFFICES' | trans }}</option>
  151. <option value="ET_OTHERS">{{'admin.establishment.tipology.type.ET_OTHERS' | trans }}</option>
  152. </select>
  153. </div>
  154. {% if is_granted('IS_AUTHENTICATED_FULLY') and app.user.user.activeRole.type == 'ROLE_ADMIN' %}
  155. <div class="col-6 col-md-4 col-lg-3 mb-1 select-distribution-network-type" style="display:none;" ng-init="initSelectDistributionNetworkType()">
  156. <label class="form-label" for="distribution_network_type_select_type">Tipo de redes de distribución</label>
  157. <select id="distribution_network_type_select_type"
  158. class="form-select mb-3">
  159. <option value="DN_TYPE_EXTERNAL" selected>Externa</option>
  160. <option value="DN_TYPE_INTERMEDIATE">Intermedia</option>
  161. <option value="DN_TYPE_INTERNAL">Interna</option>
  162. </select>
  163. </div>
  164. <div class="col-6 col-md-4 col-lg-3 mb-1 select-distribution-network" ng-init="initSelectDistributionNetwork()">
  165. <label class="form-label" for="distribution_network_select">Red de distribución</label>
  166. <select id="distribution_network_select"
  167. class="form-select mb-3"
  168. data-search-distr-network-url="{{ url('web_api_admin_list_distribution_network', {'list_distribution_network[page]' : 1,'list_distribution_network[limit]' : 40, 'list_distribution_network[filterParameter]':'country_iso3,distribution_network_name','list_distribution_network[orderParameter]':'name','list_distribution_network[orderValue]':'asc','list_distribution_network[filterValue]':'' }) }}">
  169. </select>
  170. </div>
  171. {% endif %}
  172. <div class="col-6 col-md-4 col-lg-3 mb-1" ng-init="initSelectMaxResults()">
  173. <label class="form-label" for="whater_max_results_input">Número máximo de resultados</label>
  174. <select placeholder="Número máximo de resultados"
  175. id="whater_max_results_input"
  176. class="form-select mb-3"
  177. {% if disable_filters %}disabled="disabled"{% endif %} >
  178. <option selected value="10">10 resultados</option>
  179. <option value="100">100 resultados</option>
  180. <option value="500">500 resultados</option>
  181. <option value="1000">1000 resultados</option>
  182. <option value="2000">2000 resultados</option>
  183. <option value="10000">10000 resultados</option>
  184. <option value="100000000">Todos los resultados</option>
  185. </select>
  186. </div>
  187. </div>
  189. <div class="my-4" id="map_div" ng-init="initLeafletMap('{{defaultTown.id}}', '{{defaultTown.latitude}}','{{defaultTown.longitude}}')">
  190. <div class="alert alert-outline-warning alert-dismissible fade show py-2 d-none" role="alert" id="alert-permission-location">
  191. Debe dar permisos al navegador para poder obtener su posicion!
  192. (Mas información en
  193. <a href="https://support.mozilla.org/es/kb/firefox-comparte-mi-ubicacion-con-sitios-web" target="_blank">Firefox</a>,
  194. <a href="https://support.google.com/chrome/answer/142065?hl=es" target="_blank">Chrome</a>)
  195. </div>
  196. <div class="alert alert-outline-warning alert-dismissible fade show py-2 d-none" role="alert" id="alert-location-unavailable">
  197. No se ha encontrado sensor de ubicación en su equipo para localizar su posicion en el mapa!
  198. (Mas información en
  199. <a href="https://support.mozilla.org/es/kb/firefox-comparte-mi-ubicacion-con-sitios-web" target="_blank">Firefox</a>,
  200. <a href="https://support.google.com/chrome/answer/142065?hl=es" target="_blank">Chrome</a>)
  201. </div>
  202. <div id="whater_map_canvas" style="height:500px;width:100%"></div>
  203. <a href="#" id="refresh_map_button" ng-click="refreshMap()" class="btn btn-link text-900 fs--1 me-1 mb-1 mt-2">Actualizar mapa</a>
  204. </div>
  206. <div class="offcanvas offcanvas-bottom" id="offcanvasBottom" tabindex="-1"
  207. aria-labelledby="offcanvasBottomLabel">
  209. <div class="offcanvas-header pb-1" >
  210. <a class="btn btn-primary btn-sm mb-2"
  211. ng-click="showWhaterpoint()" ng-show="mapResultsType == 'whaterpoints'"
  212. role="button" >Ampliar información</a>
  213. <a class="btn btn-primary btn-sm mb-2"
  214. ng-click="showDistributionNetwork()" ng-show="mapResultsType == 'distribution_networks'"
  215. role="button" >Ampliar información</a>
  217. <button class="btn-close text-reset" type="button" data-bs-dismiss="offcanvas"
  218. aria-label="Close"></button>
  219. </div>
  220. <div class="offcanvas-body py-0">
  221. <div class="row" ng-show="mapResultsType == 'whaterpoints'">
  222. <div class="col-6 col-md-4 col-lg-3 mb-2"">
  223. <div class="mb-0 small">Nombre</div>
  224. <div class="mb-0 fs-0" ng-bind-html="selected_whaterpoint.name"></div>
  225. </div>
  226. <div class="col-6 col-md-4 col-lg-3 mb-2">
  227. <div class="mb-0 small">Tipo</div>
  228. <div class="mb-0 fs-0" ng-bind-html="selected_whaterpoint.type"></div>
  229. </div>
  230. <div class="col-6 col-md-4 col-lg-3 mb-2">
  231. <div class="mb-0 small">Localización</div>
  232. <div class="mb-0 fs-0" ng-bind-html="selected_whaterpoint.location_name"></div>
  233. </div>
  234. <div class="col-6 col-md-4 col-lg-3 mb-2">
  235. <div class="mb-0 small">Dirección (<a href="#" ng-click="requestWhaterpointChange()" class="change-ubication small" target="_blank">¿La localización en el mapa es incorrecta? Pulsa aquí.</a>)</div>
  236. <div class="mb-0 fs-0" ng-bind-html="selected_whaterpoint.address"></div>
  237. </div>
  238. <div class="col-6 col-md-4 col-lg-3 mb-2">
  239. <div class="mb-0 small">Información del agua</div>
  240. <div class="mb-0 fs-0" ng-bind-html="selected_whaterpoint.whater_status_text"></div>
  241. </div>
  242. <div class="col-6 col-md-4 col-lg-3 mb-2">
  243. <div class="mb-0 small">Red de Distribución</div>
  244. <div class="mb-0 fs-0" ng-bind-html="selected_whaterpoint.whater_distribution_network_text"></div>
  245. </div>
  246. <div class="col-6 col-md-4 col-lg-3 mb-2">
  247. <div class="mb-0 small">Actualizado él</div>
  248. <div class="mb-0 fs-0" ng-bind-html="selected_whaterpoint.whater_status_at"></div>
  249. </div>
  250. {% if is_granted('IS_AUTHENTICATED_FULLY') and app.user.user.activeRole.type == 'ROLE_ADMIN' %}
  251. <div class="col-6 col-md-4 col-lg-3 mb-2">
  252. <div class="mb-0 small">ID</div>
  253. <div class="mb-0 fs-0" ng-bind-html="selected_whaterpoint.uuid"></div>
  254. </div>
  255. {% endif %}
  256. </div>
  258. <div class="row ng-hide" ng-show="mapResultsType == 'distribution_networks'">
  260. <div class="col-6 col-md-4 col-lg-3 mb-2"">
  261. <div class="mb-0 small">Nombre</div>
  262. <div class="mb-0 fs-0" ng-bind-html="selected_distribution_network.distribution_network.name"></div>
  263. </div>
  264. <div class="col-6 col-md-4 col-lg-3 mb-2"">
  265. <div class="mb-0 small">Tipo</div>
  266. <div class="mb-0 fs-0" ng-bind-html="selected_distribution_network.distribution_network.type_text" ></div>
  267. </div>
  268. <div class="col-6 col-md-4 col-lg-3 mb-2"">
  269. <div class="mb-0 small">Estado</div>
  270. <div class="mb-0 fs-0" ng-bind-html="selected_distribution_network.distribution_network.status_text" ></div>
  271. </div>
  272. </div>
  274. </div>
  275. </div>
  277. </div>
  279. {% endblock contents %}