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

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

  static translator = {
    'en': {
      create: 'Create',
      clear: 'Clear',
      title: 'Title',
      body: 'Body',
      error: 'Error',
      noteSavedButFileTooLarge: 'The note was saved, but the file is too large (max 12 MB)',
      duplicateValue: 'Duplicate value',
      forInputField: 'for input field',
      successfully: 'Successfully',
      noteSaved: 'Note saved'
    },
    'ru': {
      create: 'Создать',
      clear: 'Очистить',
      title: 'Заголовок',
      body: 'Содержание',
      error: 'Ошибка',
      noteSavedButFileTooLarge: 'Заметка сохранена, но файл слишком большой (макс. 12 МБ)',
      duplicateValue: 'Повторяющееся значение',
      forInputField: 'для поля ввода',
      successfully: 'Успешно',
      noteSaved: 'Заметка сохранена'
    }
  };
  
  static newTagClearButtonOnMouseOver = false;
  static newTagClearButtonOnFocus = false;
  
  static newTitleClearButtonOnMouseOver = false;
  static newTitleClearButtonOnFocus = false;
  
  static newBodyClearButtonOnMouseOver = false;
  static newBodyClearButtonOnFocus = false;

  static draw() {
    document.body.innerHTML += `
    <form id="newForm">
      <div class="d-flex justify-content-between mb-3">
        <button type="submit" class="btn btn-dark mt-3 fw-bold" id="newButton">
          ${this.translator[SettingsPage.language].create}
          <span id="newSpinner" class="spinner-border spinner-border-sm float-end mt-1 ms-2" role="status" aria-hidden="true" style="display:none;"></span>
        </button>
        <button type="button" class="btn btn-light mt-3 fw-bold border-dark" id="newClearButton">
          ${this.translator[SettingsPage.language].clear}
        </button>
      </div>

      <div class="form-floating mb-3">
        <input type="text" class="form-control" id="newTagInput" placeholder="#">
        <label for="newTagInput"><a>${Icons.hash_16_black_svg}</a></label>
        <button id="newTagInputClearButton" type="button" class="btn-close position-absolute" aria-label="Clear" title="${this.translator[SettingsPage.language].clear}" style="right:10px;top:18px;display:none;"></button>
      </div>

      <div id="newTagsPanel" class="form-floating mb-3"></div>

      <div class="form-floating mb-3">
        <input type="text" class="form-control" id="newTitleInput" placeholder="${this.translator[SettingsPage.language].title}">
        <label for="newTitleInput">${this.translator[SettingsPage.language].title}</label>
        <button id="newTitleInputClearButton" type="button" class="btn-close position-absolute" aria-label="Clear" title="${this.translator[SettingsPage.language].clear}" style="right:10px;top:18px;display:none;"></button>
      </div>

      <div class="form-floating mb-3">
        <textarea class="form-control" placeholder="Body" id="newBodyInput" style="height: 100px"></textarea>
        <label for="newBodyInput">${this.translator[SettingsPage.language].body}</label>
        <button id="newBodyInputClearButton" type="button" class="btn-close position-absolute" aria-label="Clear" title="${this.translator[SettingsPage.language].clear}" style="right:10px;top:18px;display:none;"></button>
      </div>

      <input type="file" class="form-control" id="newFileInput" multiple>
    </form>
    `;
  };
  
  static handle(urlParams, currentPageName, username, md5password) {
    // handle new form
    document.getElementById('newForm').addEventListener('submit', async function(event) {
      event.preventDefault();
      
      this.disableElements();
      
      // check for empty fields
      if (document.getElementById('newTitleInput').value.trim() == '') {
        this.enableElements();
        document.getElementById('newTitleInput').focus();
        return;
      };
      if (document.getElementById('newBodyInput').value.trim() == '') {
        this.enableElements();
        document.getElementById('newBodyInput').focus();
        return;
      };

      // set note request
      fetch(Strings.apiUrl, {
        method: 'POST',
        headers: {'Content-Type': 'application/json;charset=utf-8'},
        body: JSON.stringify({
          method: 'setnote',
          username: username,
          md5password: md5password,
          tag: Utils.getTagsArray(document.getElementById('newTagInput')),
          title: document.getElementById('newTitleInput').value,
          body: document.getElementById('newBodyInput').value,
          files: await Utils.getFilesArray(document.getElementById('newFileInput'))
        })
      })
      .then(response => response.json())
      .then(data => {
        // update tags panel elements
        TagsPanel.draw('new', document.getElementById('newTagsPanel'), document.getElementById('newTagInput'), username, md5password);
        
        this.enableElements();
        
        if (data.exception != undefined) {
          if (data.exception == "SQLSTATE[08S01]: Communication link failure: 1153 Got a packet bigger than 'max_allowed_packet' bytes") {
            Alert.show(this.translator[SettingsPage.language].error, this.translator[SettingsPage.language].noteSavedButFileTooLarge);
            return;
          };
          if (data.exception == `SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry '${document.getElementById('newTitleInput').value}-1' for key 'title'`) {
            Alert.show(this.translator[SettingsPage.language].error, `${this.translator[SettingsPage.language].duplicateValue} '${document.getElementById('newTitleInput').value}' ${this.translator[SettingsPage.language].forInputField} '${this.translator[SettingsPage.language].title}'`);
            return;
          };
          Alert.show(this.translator[SettingsPage.language].error, data.exception);
        } else {
          Alert.show(this.translator[SettingsPage.language].successfully, this.translator[SettingsPage.language].noteSaved);
        };
      });
    }.bind(this));
    
    // handle clear button
    document.getElementById('newClearButton').addEventListener('click', function(event) {
      event.preventDefault();

      document.getElementById('newTagInput').value = '';
      document.getElementById('newTitleInput').value = '';
      document.getElementById('newBodyInput').value = '';
      document.getElementById('newFileInput').value = '';
    }.bind(this));
    
    // handle new tag input clear button
    document.getElementById('newTagInputClearButton').addEventListener('click', function(event) {
      event.preventDefault();

      document.getElementById('newTagInput').value = '';
    }.bind(this));
    document.getElementById('newTagInputClearButton').addEventListener('mouseover', function(event) {
      event.preventDefault();

      this.newTagClearButtonOnMouseOver = true;
    }.bind(this));
    document.getElementById('newTagInputClearButton').addEventListener('mouseout', function(event) {
      event.preventDefault();

      this.newTagClearButtonOnMouseOver = false;
      if (this.newTagClearButtonOnFocus) return;
      document.getElementById('newTagInputClearButton').style.display = "none";
    }.bind(this));
    // handle new tag input
    document.getElementById('newTagInput').addEventListener('focus', function(event) {
      event.preventDefault();

      this.newTagClearButtonOnFocus = true;
      document.getElementById('newTagInputClearButton').style.display = "block";
    }.bind(this));
    document.getElementById('newTagInput').addEventListener('blur', function(event) {
      event.preventDefault();

      this.newTagClearButtonOnFocus = false;
      if (this.newTagClearButtonOnMouseOver) return;
      document.getElementById('newTagInputClearButton').style.display = "none";
    }.bind(this));
    
    // handle new title input clear button
    document.getElementById('newTitleInputClearButton').addEventListener('click', function(event) {
      event.preventDefault();

      document.getElementById('newTitleInput').value = '';
    }.bind(this));
    document.getElementById('newTitleInputClearButton').addEventListener('mouseover', function(event) {
      event.preventDefault();

      this.newTitleClearButtonOnMouseOver = true;
    }.bind(this));
    document.getElementById('newTitleInputClearButton').addEventListener('mouseout', function(event) {
      event.preventDefault();

      this.newTitleClearButtonOnMouseOver = false;
      if (this.newTitleClearButtonOnFocus) return;
      document.getElementById('newTitleInputClearButton').style.display = "none";
    }.bind(this));
    // handle new title input
    document.getElementById('newTitleInput').addEventListener('focus', function(event) {
      event.preventDefault();

      this.newTitleClearButtonOnFocus = true;
      document.getElementById('newTitleInputClearButton').style.display = "block";
    }.bind(this));
    document.getElementById('newTitleInput').addEventListener('blur', function(event) {
      event.preventDefault();

      this.newTitleClearButtonOnFocus = false;
      if (this.newTitleClearButtonOnMouseOver) return;
      document.getElementById('newTitleInputClearButton').style.display = "none";
    }.bind(this));
    
    // handle new body input clear button
    document.getElementById('newBodyInputClearButton').addEventListener('click', function(event) {
      event.preventDefault();

      document.getElementById('newBodyInput').value = '';
    }.bind(this));
    document.getElementById('newBodyInputClearButton').addEventListener('mouseover', function(event) {
      event.preventDefault();

      this.newBodyClearButtonOnMouseOver = true;
    }.bind(this));
    document.getElementById('newBodyInputClearButton').addEventListener('mouseout', function(event) {
      event.preventDefault();

      this.newBodyClearButtonOnMouseOver = false;
      if (this.newBodyClearButtonOnFocus) return;
      document.getElementById('newBodyInputClearButton').style.display = "none";
    }.bind(this));
    // handle new body input
    document.getElementById('newBodyInput').addEventListener('focus', function(event) {
      event.preventDefault();

      this.newBodyClearButtonOnFocus = true;
      document.getElementById('newBodyInputClearButton').style.display = "block";
    }.bind(this));
    document.getElementById('newBodyInput').addEventListener('blur', function(event) {
      event.preventDefault();
      
      this.newBodyClearButtonOnFocus = false;
      if (this.newBodyClearButtonOnMouseOver) return;
      document.getElementById('newBodyInputClearButton').style.display = "none";
    }.bind(this));
    
    // draw tags panel elements
    TagsPanel.draw('new', document.getElementById('newTagsPanel'), document.getElementById('newTagInput'), username, md5password);
  };
  
  static disableElements() {
    document.getElementById('newTagInput').disabled = true;
    document.getElementById('newTagInputClearButton').disabled = true;
    document.getElementById('newTitleInput').disabled = true;
    document.getElementById('newTitleInputClearButton').disabled = true;
    document.getElementById('newBodyInput').disabled = true;
    document.getElementById('newBodyInputClearButton').disabled = true;
    document.getElementById('newButton').disabled = true;
    document.getElementById('newClearButton').disabled = true;
    document.getElementById('newSpinner').style.display = "block";
  };
  
  static enableElements() {
    document.getElementById('newTagInput').disabled = false;
    document.getElementById('newTagInputClearButton').disabled = false;
    document.getElementById('newTitleInput').disabled = false;
    document.getElementById('newTitleInputClearButton').disabled = false;
    document.getElementById('newBodyInput').disabled = false;
    document.getElementById('newBodyInputClearButton').disabled = false;
    document.getElementById('newButton').disabled = false;
    document.getElementById('newClearButton').disabled = false;
    document.getElementById('newSpinner').style.display = "none";
  };
};