У меня есть введенные пользователем данные (имя работника, автомобильный 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();
}
});
// Событие: удалить автомобиль .... некоторый код ...