a2s.su/app/app.js

import { routes } from './routes.js';

let DEBUG = false;
window.DEBUG = DEBUG;

let SERVER_HOST;
if (DEBUG) SERVER_HOST = 'http://localhost:50009';
else SERVER_HOST = 'https://a2s.su';
window.SERVER_HOST = SERVER_HOST;

/* main */
window.onload = function () {
  let app = document.documentElement;

  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    switch_theme('dark');
  } else {
    switch_theme('light');
  }

  // theme switcher
  document.getElementById('app_theme_switcher').addEventListener('click', switch_theme, false);

  // routes handler
  document.addEventListener('click', (e) => {
    const { target } = e;
    if (!target.matches('nav a')) {
      return;
    }
    e.preventDefault();
    route();
  });

  window.onpopstate = location_handler;
  window.route = route;
  location_handler();
};

/* Изменяет тему приложения */
function switch_theme() {
  let app = document.documentElement;
  let theme = app.getAttribute('data-bs-theme');
  let theme_switcher = document.getElementById('app_theme_switcher');

  let theme_icon = {
    dark: '☀️',
    light: '🌙',
  };

  if (theme == 'auto' || theme == 'light') {
    theme_switcher.innerText = theme_icon['dark'];
    app.setAttribute('data-bs-theme', 'dark');
  } else {
    theme_switcher.innerText = theme_icon['light'];
    app.setAttribute('data-bs-theme', 'light');
  }
}

const route = (event) => {
  event = event || window.event; // get window.event if event argument not provided
  event.preventDefault();
  // window.history.pushState(state, unused, target link);
  window.history.pushState({}, '', event.target.href);
  location_handler();
};

const location_handler = async () => {
  const url = window.location.pathname;
  let location;

  if (url == 0 || url == '/') {
    location = '/';
  } else {
    location = url.slice(1);
  }

  const route = routes[location] || routes['404'];
  const html = await fetch(route.template).then((response) => response.text());
  document.getElementById('content').innerHTML = html;
  document.title = route.title;
  document.querySelector('meta[name="description"]').setAttribute('content', route.description);

  if (route.script) {
    const route_script = document.getElementById('content').querySelector('script');
    let autorun_script = document.querySelector('#autorun');

    // инициализирует новый блок кода
    autorun_script.remove();
    autorun_script = document.createElement('script');
    autorun_script.setAttribute('type', 'module');
    autorun_script.setAttribute('id', 'autorun');
    autorun_script.innerHTML = route_script.innerHTML;

    // удаляет скрипт из загруженной страницы и запускает новый
    route_script.remove();
    document.body.append(autorun_script);
  } else {
    document.querySelector('#autorun').innerHTML = '';
  }
};

function get_from_api(callback, api_method = '', params = {}) {
  if (api_method == '') {
    console.log('wrong method');
  } else {
    let url = `${SERVER_HOST}/api/v1.0/${api_method}`;
    let opts = {
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
      },
    };

    fetch(url, opts)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        callback(data);
      })
      .catch((err) => console.warn('Something went wrong.', err));
  }
}
window.get_from_api = get_from_api;