dtp-liberty-links/lib/client/js/dtp-app.js

// dtp-app.js
// Copyright (C) 2021 Digital Telepresence, LLC
// License: Apache-2.0

'use strict';

import DtpLog from './dtp-log';
import DtpSocket from './dtp-socket';
import DtpDisplayEngine from './dtp-display-engine';

export default class DtpApp {

  constructor (appName, user) {
    this.user = user;
    this.log = new DtpLog(appName);

    this.log.debug('constructor', 'creating DisplayEngine instance');
    this.displayEngine = new DtpDisplayEngine();
  }

  async connect (options) {
    try {
      this.log.debug('connect', 'creating WebSocket interface');
      this.socket = new DtpSocket();

      this.log.debug('connect', 'connecting WebSocket platform');
      await this.socket.connect(options);

      this.log.info('connect', 'DTP framework online');
    } catch (error) {
      this.log.error('connect', 'failed to connect', { error });
      UIkit.modal.alert(`Failed to connect to server: ${error.message}`);
    }
  }

  async processResponse (response) {
    const json = await response.json();
    if (!json.success) {
      this.log.error('processResponse', json.message);
      throw new Error(json.message);
    }
    if (json.displayList) {
      this.displayEngine.executeDisplayList(json.displayList);
    }
  }

  async validateTextElement (element, elementName, options) {
    const DEFAULT_MAX_CHARS = 1000;
    const DEFAULT_OPTIONS = {
      maxLength: DEFAULT_MAX_CHARS,
      minLength: 1,
      warnLengths: [80, 150],
      feedback: {
        textEmpty: `The ${elementName} can't be empty`,
        textTooShort: "Keep going...",
        textValid: "You're off to a great start!",
        textLengthWarn: [
          "This is getting a little crazy",
          `Only ${Math.max(0, options.maxLength - element.value.length)} characters left`,
        ],
        textMaxLength: `The ${elementName} is as long as it can be.`,
        textTooLong: `${elementName} is too long by ${element.value.length - options.maxLength} characters`,
      }
    };
    options = Object.assign(DEFAULT_OPTIONS, options);

    if (options.prompt) {
      options.prompt.textContent = `${element.value.length} of ${options.maxLength} max`;
    }

    let isValid = true;

    if (element.value.length === 0 || element.value.length > options.maxLength) {
      element.classList.remove('uk-form-success');
      element.classList.remove('uk-form-warning');
      element.classList.add('uk-form-danger');
      isValid = false;
    } else if (element.value.length > options.warnLengths[1]) {
      element.classList.remove('uk-form-success');
      element.classList.remove('uk-form-danger');
      element.classList.add('uk-form-warning');
    } else {
      element.classList.remove('uk-form-danger');
      element.classList.remove('uk-form-warning');
      element.classList.remove('uk-form-success');
    }

    if (element.value.length === 0) {
      window.dtp.submit.prompt.textContent = options.feedback.textEmpty;
      isValid = false;
    } else if (options.minLength && (element.value.length < options.minLength)) {
      window.dtp.submit.prompt.textContent = options.feedback.textTooShort;
      isValid = false;
    } else if (element.value.length < options.warnLengths[0]) {
      window.dtp.submit.prompt.textContent = options.feedback.textValid;
    } else if (element.value.length < options.warnLengths[1]) {
      window.dtp.submit.prompt.textContent = options.feedback.textLengthWarn[0];
    } else if (element.value.length < options.maxLength) {
      window.dtp.submit.prompt.textContent = options.feedback.textLengthWarn[1];
      window.dtp.submit.prompt.classList.add('uk-text-bold');
    } else if (element.value.length === options.maxLength) {
      window.dtp.submit.prompt.textContent = options.feedback.textMaxLength;
      window.dtp.submit.prompt.classList.add('uk-text-bold');
    } else {
      window.dtp.submit.prompt.textContent = options.feedback.textTooLong;
      window.dtp.submit.prompt.classList.add('uk-text-bold');
      isValid = false;
    }

    return isValid;
  }
}