Untitled
unknown
plain_text
2 years ago
2.8 kB
1
Indexable
Never
Warsztaty JS cz.2 Analiza nowych klas thisWidget.dom.input = thisWidget.dom.wrapper.querySelector(select.widgets.datePicker.input); thisWidget.initPlugin(); initPlugin(){ const thisWidget = this; thisWidget.minDate = new Date(); thisWidget.maxDate = utils.addDays(thisWidget.minDate, settings.datePicker.maxDaysInFuture); // eslint-disable-next-line no-undef flatpickr(thisWidget.dom.input, { defaultDate: thisWidget.minDate, minDate: thisWidget.minDate, maxDate: thisWidget.maxDate, locale: { firstDayOfWeek: 1 }, disable: [ function(date) { return (date.getDay() === 1); } ], onChange: function(selectedDates, dateStr) { thisWidget.value = dateStr; }, }); } DatePicker – pozostałe metody set value(value){ const thisWidget = this; const newValue = thisWidget.parseValue(value); if (newValue != thisWidget.correctValue && thisWidget.isValid(value)) { thisWidget.correctValue = newValue; thisWidget.announce(); } thisWidget.renderValue(); } parseValue(value){ return parseInt(value); } isValid(value){ return !isNaN(value); } renderValue(){ const thisWidget = this; thisWidget.dom.wrapper.innerHTML = thisWidget.value; } Wysyłka danych na serwer { "date": data wybrana w datePickerze "hour": godzina wybrana w hourPickerze (w formacie HH:ss) "table": numer wybranego stolika (lub null jeśli nic nie wybrano) "duration": liczba godzin wybrana przez klienta "ppl": liczba osób wybrana przez klienta "starters": [], "phone": numer telefonu z formularza, "address": adres z formularza } Dodajemy stronę główną Dla ambitnych class Carousel { constructor(element) { const thisCarousel = this; this.render(element); this.initPlugin(); } render(element) { // save element ref to this obj } initPlugin() { // use plugin to create carousel on thisCarousel.element } } Publikujemy stronę w internecie Przygotowanie projektu do publikacji url: '//localhost:3131', url: '//' + window.location.hostname + (window.location.hostname=='localhost' ? ':3131' : ''), /* global require, process */ const jsonServer = require('json-server'); const server = jsonServer.create(); const router = jsonServer.router('dist/db/app.json'); const middlewares = jsonServer.defaults({ static: 'dist', noCors: true }); const port = process.env.PORT || 3131; server.use(middlewares); server.use(router); server.listen(port); Rozwijamy projekt (dla ambitnych) body { background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); }