https://uba.co2-rechner.de/js/app.js

1import { Emissions, Bookmark } from "./main.js";
2
3// import { Bookmark } from "./main.js";
4
5
6const alpineReplaceColon = (subject, replacement) => ({ name, value }) => {
7    
8    if (name.startsWith(subject)) {
9        name = name.replace(subject, replacement);
10    }
11
12    return { name, value };
13};
14
15
16document.addEventListener('alpine:init', async () => {
17
18    /** 
19     * prefix 'x-' mit 'data-x-'
20     * Hintergrund: Attribute mit 'x-' sind nicht W3C konform
21     */    
22    Alpine.prefix('data-x-');
23
24    /** 
25     * Ersetze ":"" mit "." 
26     * Hintergrund: Attribute mit : sind nicht W3C konform
27     * https://github.com/alpinejs/alpine/discussions/3397
28     */      
29    const alpineReplacements = [
30        { pattern: 'data-x-bind.class', replacement: 'bind:class' },
31        { pattern: 'data-x-on.input', replacement: 'on:input' },
32        { pattern: 'data-x-on.input.debounce', replacement: 'on:input.debounce' },
33        { pattern: 'data-x-on.click', replacement: 'on:click"' },
34    ];
35
36    alpineReplacements.forEach(alpineReplacement => {
37
38        Alpine.mapAttributes(
39            alpineReplaceColon(alpineReplacement.pattern, Alpine.prefixed(alpineReplacement.replacement))
40        )  
41    });
42
43/*     
44    Alpine.mapAttributes(
45        alpineReplaceColon("data-x-bind.class", Alpine.prefixed("bind:class"))
46    );    
47
48    Alpine.mapAttributes(
49        alpineReplaceColon("data-x-on.input", Alpine.prefixed("on:input"))
50    );     
51  
52    Alpine.mapAttributes(
53        alpineReplaceColon("data-x-on.input.debounce", Alpine.prefixed("on:input.debounce"))
54    );  
55
56    Alpine.mapAttributes(
57        alpineReplaceColon("data-x-on.click", Alpine.prefixed("on:click"))
58    );    
59    */  
60   
61    await Alpine.data('emissionApp', () =>  ({
62
63        app: {},
64        section: '',
65        loading: false,
66        cars: [],
67        flights: [],
68        bookmarkID: '',
69
70        async init() {
71
72            // Aufruf mit bookmark
73            if( js_bookmark_id !== null ) {
74                
75                console.log('Load bookmark ...');
76                
77                sessionStorage.clear();
78
79                // Get bookmarked data
80                // Write to storage
81                await Bookmark.get(js_bookmark_id);
82                
83                // Check data from bookmarked_data
84                const checkBookmarkData = getStorageItem('data');
85                const checkedBookmark = await Bookmark.check(checkBookmarkData, js_bookmark_id);
86
87                if(checkedBookmark) {
88                    
89                    // Use bookmarked data to recalc emissions
90                    // Write to storage
91                    await Emissions.calc('recalc');
92
93                } else {
94
95                    sessionStorage.clear();
96
97                }
98            }
99
100            if(!window.getStorageItem('data')) {
101
102                console.log('Init...');
103
104                // Use default values to calc emissions
105                // Write to storage
106                await Emissions.calc('init');
107
108                console.log('section:' + this.section);
109
110            }
111
112            this.app = getStorage();
113
114            return;
115        },
116
117        async setCalculator() {
118            if(this.app.data.application == 2) {
119                console.log('change application')
120                await Emissions.calc('init');
121            }
122        },
123
124        async setHaushalt() {
125            await Emissions.calc('init', "", "", "", "haushalt");
126
127            let data = getStorageItem('data') ?? {};
128            data.consumption.persons = data.haushalt.persons = this.app.data.haushalt.persons;
129            data.living.persons = 1;
130
131            setStorage('data', data)
132            await Emissions.calc('recalc', "", "", "", "haushalt");
133            this.app = getStorage();
134        },
135
136        async updateApp(action = "", index = "") {
137
138            console.log('Update...');
139
140            this.section = document.getElementById('js-section').value;
141            
142            await Emissions.calc('update', this.section, action, index);
143
144            this.app = getStorage();
145
146            // return;
147        },
148
149        // travel: Fahrzeug editieren
150        async updateCar(action = "", carIndex = "") {
151
152            console.log('Update car...');
153            
154
155            if(action == 'delete_car') {
156
157                console.log('Delete car...');
158
159                let carID = document.getElementById('car-id-' + carIndex);
160
161                carID.classList.replace('animateIn', 'animateOut');
162
163                await sleep(200);
164            }
165
166            await this.updateApp(action, carIndex);
167            
168            this.cars = this.app.data.travel.cars;
169
170            return;
171        },
172
173        // travel: Kreuzfahrten editieren ule 20251110
174        async updateCruiseSea(action = "", cruiseIndex = "") {
175
176            console.log('Update cruise...');
177
178            await this.updateApp(action, cruiseIndex );
179            
180            this.cruises = this.app.data.cruises;
181
182            return;
183        },
184
185         // travel: Carsharing und Train ule 20251112
186        async updateTravel(action = "", travelIndex = "") {
187
188            console.log('Update Travel...');
189
190            await this.updateApp(action, travelIndex );
191            
192            this.travels = this.app.data.travels;
193
194            return;
195        },
196
197         // Flights: ule 20251113
198        async updateFlights(action = "", flightIndex = "") {
199
200            console.log('Update flights...');
201
202            await this.updateApp(action, flightIndex );
203            
204            this.flights_hh = this.app.data.flights_hh;
205
206            return;
207        },
208
209         // Ernährung: ule 20251113
210        async updateFoods(action = "", foodIndex = "") {
211
212            console.log('Update foods...');
213
214            await this.updateApp(action, foodIndex );
215            
216            this.foods = this.app.data.foods;
217
218            return;
219        },
220
221        // flight: Flüge editieren
222        async updateFlight(action = "", flightIndex = "") {
223
224            console.log('Update flight...' + action);
225
226            if(action == "add_flight") {
227
228                let flightStartID = document.getElementById('data_flight_start_id');
229                let flightStartIDvalue = flightStartID.value;
230
231                let flightDestID = document.getElementById('data_flight_dest_id');
232                let flightDestIDvalue = flightDestID.value;
233    
234                // TODO: Modales Fenster
235                if(flightStartIDvalue == "") {
236                    
237                    flightStartID.focus();
238
239                    alert(js_txt_mandatory);
240                    return;
241                }
242
243                if(flightDestIDvalue == "") {
244                
245                    flightDestID.focus();
246
247                    alert(js_txt_mandatory);
248                    return;
249                }              
250            }
251
252            if(action == 'delete_flight') {
253
254                let flightID = document.getElementById('flight-id-' + flightIndex);
255
256                flightID.classList.add('animateOut');
257
258                await sleep(200);
259            }
260
261            await this.updateApp(action, flightIndex);
262
263            this.flights = this.app.data.flight.flights;
264
265            if(action == "add_flight") {
266                await clickHandler();
267            }
268
269            // return;
270        },
271
272        // consumption: Haustiere editieren
273        async updateAnimal(action = "", animalIndex = "") {
274
275            console.log('Update animal...');
276            
277            if(action == 'delete_animal') {
278
279                console.log('Delete animal...');
280
281                let carID = document.getElementById('animal-id-' 

281+ animalIndex);
282
283                carID.classList.replace('animateIn', 'animateOut');
284
285                await sleep(200);
286            }
287
288            await this.updateApp(action, animalIndex);
289            
290            this.animals = this.app.data.consumption.animals;
291
292            return;
293        },
294
295
296        async resetApp() {
297
298            console.log('Reset...');
299
300            sessionStorage.clear();
301
302            await Emissions.calc('init');
303
304            this.app = getStorage();
305
306            return;
307        },
308
309        async saveBookmark() {
310
311            console.log('Save bookmark...');
312            
313            let storageData = getStorageItem('data');
314            let emission = getStorageItem('emission');
315            let emissionSelf = getStorageItem('emissionSelf');
316            let emissionOther = getStorageItem('emissionOther');
317
318            await Bookmark.save(storageData, emission, emissionSelf, emissionOther);
319
320            this.bookmarkID = getStorageItem('bookmarkID');
321
322            return;
323        }
324         
325    }))
326      
327});