Untitled

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