Сортировка локального хранилища (массив / строка) - PullRequest
0 голосов
/ 17 октября 2019

У меня есть введенные пользователем данные (имя работника, автомобильный Vin, время начала и время окончания), отображаемые под формой после сохранения в локальном хранилище. Я хочу отсортировать имена сотрудников в алфавитном порядке. Где я могу разместить код и как мне написать код.

// Car Class: Represent a Car
class Car{
  constructor(worker, carVin, strTime, endTime){
        this.worker = worker;
        this.carVin = carVin;
        this.strTime = strTime; 
        this.endTime = endTime; 
    }
 }

// Класс пользовательского интерфейса: обрабатывать задачи пользовательского интерфейса

 class UI {
    static displayCars(){
      const cars = Store.getCars();

      cars.forEach((car) => UI.addCarToList(car));
  }
    static addCarToList(car){
      const list = document.querySelector('#car-list');

      const row = document.createElement('tr');

      row.innerHTML = `
      <td>${car.worker}</td>
      <td>${car.carVin}</td>
      <td>${car.strTime}</td>
      <td>${car.endTime}</td>
      <td><a href="#" class="btn btn-danger btn-sm 
      delete">Clear</a></td>`;

      list.appendChild(row);
  }
  static deleteCar(el){
      if(el.classList.contains('delete')){
          el.parentElement.parentElement.remove();
      }
  }
  static showAlert(message, className){
      const div =document.createElement('div');
      div.className = `alert alert-${className}`;
      div.appendChild(document.createTextNode(message));
      const container = document.querySelector('.container');
      const form = document.querySelector('#car-form');
      container.insertBefore(div, form);

      // Vanish in 3 secs
      setTimeout(() => document.querySelector('.alert').remove(),3000);
  }

  static clearFields(){
      document.querySelector('#worker').value = '';
      document.querySelector('#carVin').value = '';
      document.querySelector('#strTime').value = '';
      document.querySelector('#endTime').value = '';
   }

}

// Класс хранения: хранить дескриптор

  class Store{
   static getCars(){
     let cars;
     if(localStorage.getItem('cars') === null){
         cars = [];
      } else {
         cars = JSON.parse(localStorage.getItem('cars'));
     }

      return cars;
    }
    static addCar(car){
       const cars = Store.getCars();
       cars.push(car);
     // using JSON to convert array to string
       localStorage.setItem('cars', JSON.stringify(cars));
    }
  // carvin unique for each car
    static removeCars(carVin){
       const cars = Store.getCars();

       cars.forEach((car, index) => {
         if(car.carVin === carVin) {
             cars.splice(index, 1);
          }
       });
        localStorage.setItem('cars', JSON.stringify(cars));
    }
 }

// Событие: Показать автомобили:

 document.addEventListener('DOMContentLoaded', UI.displayCars);
 //Event: Add a  Car:
 document.querySelector('#car-form').addEventListener('submit',(e) => {
// Prevent actual submit
 e.preventDefault();

// Get form Value
const worker = document.querySelector('#worker').value;
const carVin = document.querySelector('#carVin').value;
const strTime = document.querySelector('#strTime').value;
const endTime = document.querySelector('#endTime').value;

//Validate
if(worker === ''|| carVin === ''|| strTime === '' || endTime === ''){
    UI.showAlert('Please fill all fields', 'danger');   
} else {

    //Instatiate book
    const car = new Car(worker, carVin, strTime, endTime);

    // Add book to list 
    UI.addCarToList(car);

    // Add book to local storage
    Store.addCar(car);

    // Show Success msg
    UI.showAlert('Car Added', 'success');

    //Clear fields
    UI.clearFields();

}

});

// Событие: удалить автомобиль .... некоторый код ...

1 Ответ

0 голосов
/ 17 октября 2019

Может быть, это поможет вам:

// Car Class: Represent a Car
class Car{
  constructor(worker, carVin, strTime, endTime){
        this.worker = worker;
        this.carVin = carVin;
        this.strTime = strTime; 
        this.endTime = endTime; 
    }
 }

class UI {
    static displayCars(){
      const cars = Store.getCars();
      const list = document.querySelector('#car-list'); ///
      list.innerHTML = ""; ///
      cars.forEach((car) => UI.addCarToList(car));
  }
    static addCarToList(car){
      const list = document.querySelector('#car-list');
      const row = document.createElement('tr');
      row.innerHTML = `
      <td>${car.worker}</td>
      <td>${car.carVin}</td>
      <td>${car.strTime}</td>
      <td>${car.endTime}</td>
      <td><a href="#" class="btn btn-danger btn-sm 
      delete">Clear</a></td>`;
      list.appendChild(row);
  }
  static deleteCar(el){
      if(el.classList.contains('delete')){
          el.parentElement.parentElement.remove();
      }
  }
  static showAlert(message, className){
      const div =document.createElement('div');
      div.className = `alert alert-${className}`;
      div.appendChild(document.createTextNode(message));
      const container = document.querySelector('.container');
      const form = document.querySelector('#car-form');
      container.insertBefore(div, form);

      // Vanish in 3 secs
      setTimeout(() => document.querySelector('.alert').remove(),3000);
  }

  static clearFields(){
      document.querySelector('#worker').value = '';
      document.querySelector('#carVin').value = '';
      document.querySelector('#strTime').value = '';
      document.querySelector('#endTime').value = '';
   }

}

class Store{
   static getCars(){
     let cars;
     if(localStorage.getItem('cars') === null){
         cars = [];
      } else {
         cars = JSON.parse(localStorage.getItem('cars'));
     }

      return cars;
    }
    static addCar(car){
       const cars = Store.getCars();
       cars.push(car);
       cars.sort((a,b)=> ( a.worker < b.worker ) ? -1 : ( a.worker > b.worker ) ? 1 : 0 ); ///
       localStorage.setItem('cars', JSON.stringify(cars));
    }
  // carvin unique for each car
    static removeCars(carVin){
       const cars = Store.getCars();

       cars.forEach((car, index) => {
         if(car.carVin === carVin) {
             cars.splice(index, 1);
          }
       });
        localStorage.setItem('cars', JSON.stringify(cars));
    }
 }

 document.addEventListener('DOMContentLoaded', UI.displayCars);
 //Event: Add a  Car:
 document.querySelector('#car-form').addEventListener('submit',(e) => {
// Prevent actual submit
 e.preventDefault();

// Get form Value
const worker = document.querySelector('#worker').value;
const carVin = document.querySelector('#carVin').value;
const strTime = document.querySelector('#strTime').value;
const endTime = document.querySelector('#endTime').value;

//Validate
if(worker === ''|| carVin === ''|| strTime === '' || endTime === ''){
    UI.showAlert('Please fill all fields', 'danger');   
} else {

    //Instatiate book
    const car = new Car(worker, carVin, strTime, endTime);

    // Add book to list 
    // UI.addCarToList(car); ///

    // Add book to local storage
    Store.addCar(car);
    UI.displayCars(); ///

    // Show Success msg
    UI.showAlert('Car Added', 'success');

    //Clear fields
    UI.clearFields();

}
});

Проверьте, и дайте мне знать, если это близко к тому, что вы хотите достичь.

(Мои добавления имеют /// вправая сторона)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...