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%);
}