https://cykloatlas.cz/cykloatlas/userPage.js

1"use strict";
2
3import { map } from '/cykloatlas/maps.js';
4import {showTrasa, showInfobox, hideInfobox } from '/cykloatlas/maptrasaViewer.js';
5
6
7
8const menu = `
9  <button id="uservylety-load"  type="button" class="btn btn-sm btn-outline-primary"> Načíst výlety </button>
10  <button id="uservylety-clear" type="button" class="btn btn-sm btn-outline-primary"> Smazat výlety </button>
11  <hr>
12  <div id="user-info" class="card-footer">...</div>
13  <div id="uservylety-seznam"> </div>
14`;
15
16
17// zobrazeni seznamu vyletu prihlaseneho uzivatele, mustache template
18var templ_vylety = `
19<div class="list-group mt-3">
20<button type="button" class="list-group-item list-group-item-action">
21<div class="row">
22  <div class="col"> Datum </div>
23  <div class="col"> <img src="/assets/img/ico_power.png" alt="Obtížnost" title="Obtížnost"> </div>
24  <div class="col"> <img src="/assets/img/ico_distance.png" alt="Délka trasy" title="Délka trasy">  </div>
25  <div class="col"> <img src="/assets/img/ico_profile.png" alt="Nastoupané metry" title="Nastoupané metry"> </div>
26  <div class="col"> <img src="/assets/img/ico_bike.png" alt="Typ aktivity" title="Typ aktivity"> </div>
27</div>
28</button>
29{{#vylety}}
30  <button type="button" class="list-group-item list-group-item-action" onclick="show_user_vylet({{id}})" >
31    <div class="row">
32      <div class="col text-danger" > {{id}} / {{nazev}} </div>
33    </div>
34    <div class="row">
35      <div class="col"> {{datum}} </div>
36      <div class="col"> {{obtiznost}} </div>
37      <div class="col"> {{delka}} km </div>
38      <div class="col"> {{vyska}} m </div>
39      <div class="col"> {{aktivita}} </div>
40    </row>
41  </button>
42{{/vylety}}
43</div>
44`;
45
46const currentUser = () => parseInt( $('#login-redkis').attr('data-redkis') );
47
48console.log('user:', currentUser());
49
50
51
52function createUserView(props) {
53  const container = document.createElement('section');
54
55  if( currentUser() > 0) {
56    container.innerHTML = menu;
57
58    const btnLoad = container.querySelector("#uservylety-load");
59    btnLoad.addEventListener('click', props.onLoad);
60
61    const btnClear = container.querySelector("#uservylety-clear");
62    btnClear.addEventListener('click', props.onClear);
63  }
64
65
66  const renderTo = function(idroot) {
67    const root = document.getElementById(idroot);
68    if(root)
69      root.appendChild(container);
70  }
71
72  return {container, renderTo};
73}
74
75
76// ------------------------------------------------------------ export user page
77
78export function createUserPage() {
79
80  const onLoad  = loadUserVylety ;
81
82  const onClear  = () => { console.log("user clear"); clear(); };
83
84  const view = createUserView({onLoad, onClear});
85  return view;
86}
87
88//------------------------------------------------ vylety prihlaseneho uzivatele
89
90var userGroup = L.layerGroup().addTo(map);
91
92function clear() {
93  $('#uservylety-seznam').html('');
94  userGroup.clearLayers();
95  hideInfobox();
96}
97
98var normalLayerStyle = {
99  color: "#3366ff",
100  opacity: 0.8,
101  weight: 3,
102};
103
104function layerclick(obj) {
105  var idvylet = obj.target.options.idvylet;
106  showTrasa(idvylet);
107}
108
109
110window.show_user_vylet = function (idvylet) {
111  // console.log('zoom to vylet:', idvylet);
112  showTrasa(idvylet);
113
114  userGroup.eachLayer(function (layer) {
115    if (layer.options.idvylet == idvylet) {
116      var box = layer.getBounds();
117      // map.fitBounds(box);
118      map.flyToBounds(box);
119    }
120  });
121
122};
123
124
125function data2list(data) {
126  // console.log(data);
127  showInfobox();
128
129  let n = data.length;
130  $("#user-info").html(`Načteno ${n} záznamů.`);
131  $('#uservylety-seznam').mustache(templ_vylety, {'vylety': data  });
132}
133
134
135function data2map(data) {
136  var trasa;
137  data.forEach( function(item) {
138    trasa = JSON.parse(item.trasa);
139    if(trasa) {
140      L.geoJSON(trasa,{
141        clickTolerance:4,
142        idvylet: item.id,
143        nazev: item.nazev,
144        style: normalLayerStyle
145      })
146      .bindPopup(function(layer) {
147        return `${layer.options.idvylet}:${layer.options.nazev}`;
148      })
149      .on('click', layerclick)
150      .addTo(userGroup);
151    }
152  });
153}
154
155
156var loadUserVylety = function () {
157  const userid = currentUser();
158  var url = `/myapi/vyletymaps/${userid}`;
159
160  SULX.getJSON(url)
161    .then((data) => {
162      data2list(data);
163      data2map(data);
164    });

165  $('#user-info').html('Loading ...');
166};