cQe9SVDs

1;(function ($) {
2    'use strict'
3    // used to save on api calls
4    var localData;
5    var arrOmschrijving;
6
7    // api call to get all stations
8    var getStations = function () {
9        $.ajax({
10            url: 'https://api.delijn.be/DLKernOpenData/v1/beta/haltes?',
11            beforeSend: function (xhrObj) {
12                // Request headers
13                xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "727c47a565384106a99a6e1b09e24675");
14            },
15            type: 'get',
16            data: {
17
18                lang: 'nl',
19                format: 'json'
20            },
21            dataType: 'json',
22            success: function (data) {
23                console.log(data);
24                var arr = [];
25                for (let i of data.haltes) {
26                    arr.push(i.omschrijving);
27                }
28
29                Array.prototype.contains = function (v) {
30                    for (var i = 0; i < this.length; i++) {
31                        if (this[i] === v) return true;
32                    }
33                    return false;
34                };
35                // verwijder duplicates uit array
36                Array.prototype.unique = function () {
37                    var array = [];
38                    for (var i = 0; i < this.length; i++) {
39                        if (!array.contains(this[i])) {
40                            array.push(this[i]);
41                        }
42                    }
43                    return array;
44                }
45
46                console.log(arr.unique().sort());
47                arrOmschrijving = arr.unique().sort();
48/*
49                for (let val of arrOmschrijving) {
50                    $('#departure').append('<option value="' + val + '">' + val + '</option>');
51                    $('#destination').append('<option value="' + val + '">' + val + '</option>');
52                }
53                */
54
55            },
56            error: function (err) {
57                console.log('error');
58                console.log(err);
59            }
60        });
61    };
62
63    // formatting numbers from stackoverflow: https://stackoverflow.com/questions/8043026/how-to-format-numbers-by-prepending-0-to-single-digit-numbers
64    // sets the time select box for each half hour
65    var initTime = function () {
66        for (var i = 0; i < 24; i++) {
67            $('#time').append('<option value="' + ("0" + i).slice(-2) + ':00">' + ("0" + i).slice(-2) + ':00</option>');
68            $('#time').append('<option value="' + ("0" + i).slice(-2) + ':30">' + ("0" + i).slice(-2) + ':30</option>');
69        }
70    };
71
72    // api call to get the connections for a specific date, time, destination and departure
73    var getConnections = function (departure, destination, time, date) {
74        console.log('vraag de api iets');
75        $.ajax({
76            url: 'https://api.delijn.be/DLKernOpenData/v1/beta/haltes?"',
77            beforeSend: function (xhrObj) {
78                // Request headers
79                xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "727c47a565384106a99a6e1b09e24675");
80            },
81            type: 'get',
82            data: {
83
84                from: departure,
85                to: destination,
86                time: time,
87                date: date,
88                format: 'json',
89                lang: 'nl'
90            },
91            dataType: 'json',
92            success: function (data) {
93                localData = data;
94                $('#details').html('');
95                $('#details').html('<h2>Ritten van ' + data.connection[0].departure.halte + ' naar ' + data.connection[0].arrival.halte + '</h2>');
96                var i = 1;
97                for (var val of data.connection) {
98                    console.log(val);
99                    console.log(val.departure.time);
100                    var departureTime = new Date(val.departure.time * 1000);
101                    var arrivalTime = new Date(val.arrival.time * 1000);
102                    console.log(departureTime.getTime());
103                    $('#details').append('<div class="w3-third"><h3>Rit ' + i +
104                        '</h3><ul><li>Vertrektijd: ' + departureTime.getHours() + ':' + departureTime.getMinutes() +
105                        '</li><li>Aankomsttijd: ' + arrivalTime.getHours() + ':' + arrivalTime.getMinutes() +
106                        '</li><li>Duur: ' + (val.duration / 60) +
107                        ' min</li><li>Spoor: ' + val.departure.platform +
108                        '</li></ul><button class="w3-btn overviewbtn" data-id="' + (i - 1) + '">Overzicht Rit ' + i +
109                        '</button></div>');
110                    i++;
111                }
112            },
113            error: function (err) {
114                console.log('error');
115                console.log(err);
116                $('#details').html('');
117                $('#details').html('<h2>Geen verbinding gevonden</h2>');
118            }
119        });
120    };
121
122    // function to show the details of a specific ride
123    var getDetails = function (id) {
124        $('#departureDetail').html('');
125        $('#arrivalDetail').html('');
126        var val = localData.connection[id];
127        var departureTime = new Date(val.departure.time * 1000);
128        var arrivalTime = new Date(val.arrival.time * 1000);
129        $('#departureDetail').data('id', id);
130        $('#overviewDetails').prepend('<h3>Rit ' + (id + 1) + '</h3>')
131        $('#departureDetail').append('<h4>Vertrek</h4><ul><li>' + val.departure.station +
132            '</li><li>Vertrektijd: ' + departureTime.getHours() + ':' + departureTime.getMinutes() +
133            '<li>Vertrekdag: ' + departureTime.getDate() +
134
135            '</li></li><li>Duur: ' + (val.duration / 60) +
136            ' min</li><li>Spoor: ' + val.departure.platform +
137            '</li><li>Vertraging: ' + (val.departure.delay / 60) + ' min</li></ul>');
138        $('#arrivalDetail').append('<h4>Aankomst</h4><ul><li>' + val.arrival.station +
139            '</li><li>Aankomsttijd: ' + arrivalTime.getHours() + ':' + arrivalTime.getMinutes() +
140            '</li><li>Spoor: ' + val.arrival.platform +
141            '</li><li>Vertraging: ' + val.arrival.delay + ' min</li></ul>');
142        if (val.vias != '') {
143            console.log(val.vias);
144            $('#overviewDetails').append('<div><h4>Via ' + val.vias.via[0].station + '</h4></div>');
145        }
146        console.log($('#departureDetail').data("id"));
147    };
148
149    // shows all the rides in localstorage
150    var showLocalStorage = function () {
151
152        for (var key in localStorage) {
153            var val = JSON.parse(localStorage.getItem(key));
154            var departureTime = new Date(val.departure.time * 1000);
155            var arrivalTime = new Date(val.arrival.time * 1000);
156
157
158            $('#storageOverview').append('<div class="w3-third"><h3>Rit ' +
159                '</h3><ul><li>Vertrektijd: ' + departureTime.getHours() + ':' + departureTime.getMinutes() +
160                '</li><li>Aankomsttijd: ' + arrivalTime.getHours() + ':' + arrivalTime.getMinutes() +
161                '</li><li>Duur: ' + (val.duration / 60) +
162                ' min</li><li>Spoor: ' + val.departure.platform +
163                '</li></ul></div>');
164        }
165    };
166
167    $(document).ready(function () {
168        //initializes the datepicker
169        $('#datepicker').datepicker({dateFormat: 'dd/mm/yy'});
170        initTime();
171        getStations();
172        // select2 is a js library in the directory vendor which makes a searchable select box
173        $('#departure').select2();
174        $('#destination').select2();
175        $('#time').select2();
176        // submits the form and queries the api
177        $('#submit').on('click', function (e) {
178            e.preventDefault();
179            console.log($('#datepicker').val().replace('/20', '').replace('/', ''));
180            if ($('#datepicker').val().replace('/', '').replace('/20', '') == '') {
181                console.log('maak hier een foutmelding van');
182            } else {
183                console.log('go');
184                $('#display').css('display', 'block');
185                getConnections($('#departure').val(), $('#destination').val(), $('#time').val().replace(':', ''), $('#datepicker').val().replace('/20', '').replace('/', ''));
186            }
187        });
188        // initalizes and shows the detailed information for a specific ride
189        $('#details').on('click', '.overviewbtn', function (e) {
190            e.preventDefault();
191            $('#overview').css('display', 'block');
192            getDetails($(this).data("id"));
193        });
194
195        /*   $('#departure').keyup(function () {
196                   $('#result').html('');
197                   var searchField = $('#search').val();
198                   var expression = new RegExp(searchField, "i");
199                   $.getJSON('data.json', function (data) {
200                       $.each(data,function (key, value) {
201                           if(value.name.search(expression) != -1 || value.location.search(expression) != -1){
202
203                               $('#result').append('')
204                               $('#departure').append('<option value.omschriving="' + val + '">' + val + '</option>');
205                               $('#destination').append('<option value="' + val + '">' + val + '</option>');
206                           }
207                       })
208
209                   })
210
211               })
212               */
213        $('#departure').on('keyup', function (e) {
214
215            alert("check keyup functie" + String.fromCharCode(e.which));
216            e.preventDefault();
217            var filterValue = $('#departure').val().toLowerCase();
218
219            for (let omschrijving of arrOmschrijving) {
220              let omschrijvingL =  omschrijving.val().toLowerCase()
221
222                if (omschrijvingL.contains(filterValue)) {
223
224                        $('#departure').append('<option value="' + omschrijving + '">' + omschrijving + '</option>');
225                        $('#destination').append('<option value="' + omschrijving + '">' + omschrijving + '</option>');
226
227
228
229                }
230            }
231        });
232
233        // closes the specific ride information
234        $('.close').on('click', function (e) {
235            e.preventDefault();
236            $('#overview').css('display', 'none');
237            $('#storage').css('display', 'none');
238        });
239        // saves the specific ride information
240        $('.button-save').on('click', function (e) {
241            e.preventDefault();
242            $('#overview').css('display', 'none');
243            var val = localData.connection[$('#departureDetail').data("id")];
244
245            var name = 'Rit van ' + val.departure.halte + ' naar ' + val.arrival.halte + ' vertrek ' + val.departure.time;
246            localStorage.setItem(name, JSON.stringify(val));
247            console.log(localStorage);
248            $('#save').css('display', 'block');
249        });
250        // shows the stored information
251        $('#save').on('click', function (e) {
252            e.preventDefault();
253            $('#storage').css('display', 'block');
254            showLocalStorage();
255        });
256    });
257})(jQuery);