1

Цель: сделать локальный html-документ расписаний Ж/Д для использования на мобильных устройствах. Документ будет включать собственные стили и 20 - 40 станций (для каждой станции модальное окно с таблицей расписания).

Вопрос: возможно ли реализовать обновление таблиц с расписаниями внутри локального документа (либо по одной, либо всех сразу), минимизируя объём трафика, для последующего пересохранения этого html-файла из окна браузера?

2 ответа 2

2

Можно.
Читать файл с помощью input[type='file'] и File API (особо хитрым можно так же заюзать хранилище браузера), а предлагать сохранить новые данные через ссылку.
Как-то так:

class Viewer{
	constructor(){
        // Здесь данные хранятся
	    this.data = null;
	}
	
    /**
     * Ищем элементы и ставим для них слушатели
     */
	init(){
	  	[this.loadBtn, this.saveBtn, this.view, this.empty, this.addRowBtn] = document.querySelectorAll('#load, #save, #addRow, #view, #empty');

	  	this.loadBtn.addEventListener('change', this.loadFile.bind(this));
		this.addRowBtn.addEventListener('click', this.addRow.bind(this));
		this.saveBtn.addEventListener('click', this.saveData.bind(this));
	}
	
    /**
     * Если файл выбран, пробуем читать и парсить из JSON
     * Формат файла: [{id: Number, value: String}...]
     *
     * @param {Event} e Объект события выбора файла
     */
	loadFile(e){
	  let file = e.target.files[0];
	  
	  if(file === undefined) return;
	  
	  let fr = new FileReader();
	  
	  fr.onload = r => {
	    try{
	      this.data = JSON.parse(fr.result);
          
          if(!Array.isArray(this.data))
            this.data = [];
	    }catch(e){
	      throw new Error('The file is broken!');
	    }

	    this.insert();
	  }
	  fr.readAsText(file);
	}

    /**
     * Вставляем данные в таблицу
     */
	insert(){
	  let result = '';
	  
	  this.data.forEach(e => {
	    if(!e.id || !e.value)
	      return;
	    
	    result += `<tr><td>${+e.id}</td><td>${e.value}</td></tr>`;
	  });
      
      if(result === '')
        result = `<tr id='empty'><td rowspan='100%' align='center'>Пусто</td></tr>`;
	  
	  this.view.innerHTML = '<tr><th>ID</th><th>Value</th></tr>' + result;
	}

    /**
     * Добавляем рандомные данные
     */
	addRow(){
      if(this.data === null) return;
      
	  let [ids, wordsLen] = this.data.reduce((a, e) => a[0].push(e.id) && a[1].push(e.value.length) && a, [[], []]),
	      id = 0,
	      value = '',
	      alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';

      // Длина новой строки - от 1-го до средней длины строк (или 20, если длина большая)
      wordsLen = this.rand(1, Math.min(+wordsLen.reduce((a, e) => a += e, 0) / Math.round(wordsLen.length), 20));

      // Ищем уникальный ID
      // Если за 10 циклов на находим - плюём на уникальность и выходим
      let f = 0;
	  do{
	  	id = this.rand();
	  	f++;

	  	if(f === 10)
	  		break;
	  }while(ids.includes(id))

      // Из алфавита вырезаем случайную букву wordsLen раз
	  for(let i = 0; i < wordsLen; i++){
	  	value += alphabet.substr(this.rand(0, alphabet.length - 2), 1);
	  }

      // Обновляем массив данных
	  this.data.push({
	  	id: id,
	  	value: value
	  });
	  
	  this.view.innerHTML += `<tr><td>${id}</td><td>${value}</td></tr>`;
	}

	rand(min = 0, max = 999){return Math.floor(Math.random() * (max - min + 1)) + min;}

    /**
     * Сохранение данных
     *
     * @param {Event} e Объект события клика
     */
	saveData(e){
        if(this.data === null) return;
      
        // Красиво превращаем данные в строку
		let data = JSON.stringify(this.data, null, 2),
			link = document.createElement('A'),
			filename = 'Data.json';
      
	    link.setAttribute('href', 'data:application/octet-stream,' + encodeURIComponent(data));
	    link.setAttribute('download', filename);
	    link.style.display = 'none';
	    document.body.appendChild(link);

	    link.click();

	    link.remove();
	}
}

let viewer = new Viewer();
document.addEventListener('DOMContentLoaded', viewer.init.bind(viewer))
<input type='file' id='load' value='Загрузить данные' /> | <input type='button' id='save' value='Сохранить данные' /><hr />
<table id='view'>
  <tr><th>ID</th><th>Value</th></tr>
  <tr id='empty'><td colspan='100%' align='center'>Пусто</td></tr>
</table>
<hr />
<input type='button' id='addRow' value='Добавить строку' />

Прямой доступ и неявное обращение на чтение/запись к ФС из JS никто не даст, поэтому ручками нужно выбирать и сохранять.

2

Если вы желаете иметь постоянное изменение расписания в реальном времени, то обратите внимание на технологию Гугл GTFS (General Transit Feed Specification). Эта спецификация позволяет предприятиям общественного транспорта предоставлять разработчикам расписания движения с изменениями в режиме реального времени. В указанной документации приведены примеры для применения в Картах Гугл, но вы легко сможете адаптировать эту технику и для стандарта html.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.