static/js/SettingsPage.js - master - memoryspeak/MemorySpeakWebClient

static/js/SettingsPage.js
168 строк8 KB
memoryspeak
initial commit: project structure
20 ноя 2025, 21:54
20 ноя 2025, 21:549ddd280
class SettingsPage {

  static theme = 'light';
  static language = 'en';
  static noteTimeFormat = 'source';

  static translator = {
    'en': {
      img: './flags/united_states_of_america_48.png',
      appSettings: 'Application Settings',
      designTheme: 'Design theme',
      light: 'Light',
      dark: 'Dark',
      interfaceLanguage: 'Interface language',
      timeFormat: 'Time format',
      howDisplayDate: 'How to display the date a note was created',
      shortFormat: 'Short format (2 days ago)',
      fullFormat: 'Full format (2 days 3 hours ago)',
      preciseFormat: 'Precise format (2 days 3 hours 15 minutes)',
      fullDateFormat: 'Full date (May 12, 2023)',
      sourceFormat: 'Original format (2023-05-12 14:30)',
      save: 'Save',
      saveSettingsAlertTitle: 'Changing the note creation date format',
      successful: 'Successful'
    },
    'ru': {
      img: './flags/russia_48.png',
      appSettings: 'Настройки приложения',
      designTheme: 'Тема оформления',
      light: 'Светлая',
      dark: 'Тёмная',
      interfaceLanguage: 'Язык интерфейса',
      timeFormat: 'Формат времени',
      howDisplayDate: 'Как отобразить дату создания заметки',
      shortFormat: 'Короткий формат (2 дня назад)',
      fullFormat: 'Полный формат (2 дня 3 часа назад)',
      preciseFormat: 'Точный формат (2 дня 3 часа 15 минут)',
      fullDateFormat: 'Полная дата (12 мая 2023 г.)',
      sourceFormat: 'Исходный формат (2023-05-12 14:30)',
      save: 'Сохранить',
      saveSettingsAlertTitle: 'Изменение формата даты создания заметки',
      successful: 'Успешно'
    }
  };
  
  static draw() {
    document.body.innerHTML += `
    <h4 class="mb-4 mt-3">${this.translator[this.language].appSettings}</h2>
    <form id="settingsForm">
      <!-- Тема оформления -->
      <div class="card mb-3">
        <div class="card-header" style="background:#fffcc8;">${this.translator[this.language].designTheme}</div>
        <div class="card-body d-flex bg-light">
          <span>${this.translator[this.language].light}</span>
          <div class="form-check form-switch ms-3 me-3">
            <input class="form-check-input" type="checkbox" id="settingsThemeSwitch">
            <label class="form-check-label" for="settingsThemeSwitch"></label>
          </div>
          <span>${this.translator[this.language].dark}</span>
        </div>
      </div>

      <!-- Язык интерфейса -->
      <div class="card mb-3">
        <div class="card-header" style="background:#fffcc8;">${this.translator[this.language].interfaceLanguage}</div>
        <div class="card-body bg-light">
          <img id="settingsLanguageFlagImg" style="background-color:transparent;display:inline;height:48px;" title="${this.language}" src="${this.translator[this.language].img}">
          <select class="form-select" id="settingsLanguageSelect">
            <option value="en">English</option>
            <option value="ru">Русский</option>
          </select>
        </div>
      </div>

      <!-- Отображение даты создания заметки -->
      <div class="card mb-3">
        <div class="card-header" style="background:#fffcc8;">${this.translator[this.language].timeFormat}</div>
        <div class="card-body bg-light">
          <p class="card-text text-muted">${this.translator[this.language].howDisplayDate}</p>
          <select class="form-select" id="settingsNoteTimeFormatSelect">
            <option value="short">${this.translator[this.language].shortFormat}</option>
            <option value="full">${this.translator[this.language].fullFormat}</option>
            <option value="precise">${this.translator[this.language].preciseFormat}</option>
            <option value="full_date">${this.translator[this.language].fullDateFormat}</option>
            <option value="source">${this.translator[this.language].sourceFormat}</option>
          </select>
        </div>
      </div>

      <!-- Кнопка сохранения -->
      <button type="submit" class="btn btn-dark mb-3 fw-bold" id="settingsSaveButton" title="Save">
        ${this.translator[this.language].save}
        <span id="settingsSaveSpinner" class="spinner-border spinner-border-sm float-end mt-1 ms-2" role="status" aria-hidden="true" style="display:none;" title="${this.translator[this.language].save}"></span>
      </button>
    </form>
    `;
  };
  
  static handle(urlParams, currentPageName, username, md5password) {
    // set theme
    switch (this.theme) {
      case 'light': document.getElementById('settingsThemeSwitch').checked = false; break;
      case 'dark': document.getElementById('settingsThemeSwitch').checked = true; break;
    };

    // set language
    document.getElementById('settingsLanguageSelect').value = this.language;
    
    // set note time format
    document.getElementById('settingsNoteTimeFormatSelect').value = this.noteTimeFormat;

    // save settings
    document.getElementById('settingsForm').addEventListener('submit', function(event) {
      event.preventDefault();
      
      this.disableElements();
      
      fetch(Strings.apiUrl, {
        method: 'POST',
        headers: {'Content-Type': 'application/json;charset=utf-8'},
        body: JSON.stringify({
          method: 'setsettings',
          username: username,
          md5password: md5password,
          settings_theme: document.getElementById('settingsThemeSwitch').checked ? 'dark' : 'light',
          settings_language: document.getElementById('settingsLanguageSelect').value,
          settings_note_time_format: document.getElementById('settingsNoteTimeFormatSelect').value
        })
      })
      .then(response => response.json())
      .then(data => {
        this.enableElements();
        if (data.exception != undefined) {
          Alert.show('Error', data.exception);
        } else {
          this.theme = document.getElementById('settingsThemeSwitch').checked ? 'dark' : 'light';
          this.language = document.getElementById('settingsLanguageSelect').value;
          document.documentElement.lang = this.language;
          this.noteTimeFormat = document.getElementById('settingsNoteTimeFormatSelect').value;
          Render.reDrawPage(urlParams, 'settings', username, md5password);
          Alert.show(this.translator[this.language].saveSettingsAlertTitle, this.translator[this.language].successful);
        };
      });
    }.bind(this));

    // change language
    document.getElementById('settingsLanguageSelect').addEventListener('change', function(event) {
      event.preventDefault();
      
      this.language = document.getElementById('settingsLanguageSelect').value;
      Render.reDrawPage(urlParams, 'settings', username, md5password);
    }.bind(this));
  };

  static disableElements() {
    document.getElementById('settingsThemeSwitch').disabled = true;
    document.getElementById('settingsLanguageSelect').disabled = true;
    document.getElementById('settingsNoteTimeFormatSelect').disabled = true;
    document.getElementById('settingsSaveSpinner').style.display = "block";
  };
  
  static enableElements() {
    document.getElementById('settingsThemeSwitch').disabled = false;
    document.getElementById('settingsLanguageSelect').disabled = false;
    document.getElementById('settingsNoteTimeFormatSelect').disabled = false;
    document.getElementById('settingsSaveSpinner').style.display = "none";
  };
};