{% extends "tom_common/base.html" %} {% load static %} {% block content %} {% csrf_token%}

<!-- Modal -->
<div id="modalContainer"></div>

<div class="row g-3">
  <div class="col-12">
    <div class="card bg-primary">
      <div
        class="card-body my-3 py-0 text-center d-flex align-items-center justify-content-center">
        <!-- Logo Image -->
        <img
          src="{% static 'img/dragons-logo.png' %}"
          alt="DRAGONS Logo"
          class="img-fluid"
          style="height: 30px" />
        <!-- Observation ID -->
        <div class="h3 mb-0 ms-3">{{ observation_record.observation_id }}</div>
      </div>
    </div>
  </div>
  <div class="col-12">
    <div id="runSetupContainer"></div>
  </div>
  <div class="col-xl-6">
    <div id="recipesAndFilesManagerContainer"></div>
  </div>
  <div class="col-xl-6">
    <div id="recipeReductionsContainer"></div>
  </div>
  <div class="col-12">
    <div id="caldbContainer"></div>
  </div>
  <div class="col-12">
    <div id="processedFilesContainer"></div>
  </div>
</div>
<div id="helpOffcanvasContainer"></div>
<link rel="stylesheet" href="{% static 'tom-select/tom-select.bootstrap5.css' %}" />
{% endblock %} {% block javascript %} {{ block.super }}
<script src="{% static 'tom-select/tom-select.base.js' %}"></script>
<script src="{% static 'js/utils.js' %}"></script>
<script src="{% static 'js/dragons_app/logger.js' %}"></script>
<script src="{% static 'js/dragons_app/modal.js' %}"></script>
<script src="{% static 'js/dragons_app/api.js' %}"></script>
<script src="{% static 'js/dragons_app/identifier.js' %}"></script>
<script src="{% static 'js/dragons_app/recipe_reductions_manager.js' %}"></script>
<script src="{% static 'js/dragons_app/default_recipe_reduction.js' %}"></script>
<script src="{% static 'js/dragons_app/recipe_reduction.js' %}"></script>
<script src="{% static 'js/dragons_app/run_setup.js' %}"></script>
<script src="{% static 'js/dragons_app/progress.js' %}"></script>
<script src="{% static 'js/dragons_app/files_table.js' %}"></script>
<script src="{% static 'js/dragons_app/caldb.js' %}"></script>
<script src="{% static 'js/dragons_app/processed_files.js' %}"></script>
<script src="{% static 'js/dragons_app/run_table.js' %}"></script>
<script src="{% static 'js/dragons_app/help_offcanvas.js' %}"></script>
<script src="{% static 'js/dragons_app/recipes_and_files_manager.js' %}"></script>
<script src="{% static 'js/dragons_app/available_recipes.js' %}"></script>
<script src="{% static 'js/dragons_app/available_files.js' %}"></script>
<script src="{% static 'ace-builds/src-noconflict/ace.js' %}"></script>
<script src="{% static 'ace-builds/src-noconflict/mode-python.js' %}"></script>
<script src="{% static 'ace-builds/src-noconflict/theme-cloud9_night.js' %}"></script>
<script src="{% static 'ace-builds/src-noconflict/theme-dawn.js' %}"></script>
{% include 'tom_dataproducts/partials/js9_scripts.html' %}

<script type="text/javascript">
  // TODO: Make this better.
  class App {
    constructor() {
      // Create help offcanvas used throughout SPA.
      // TODO: When switching to single recipe can be done there.
      window.helpOffcanvas = new HelpOffcanvas(
        document.getElementById("helpOffcanvasContainer")
      );
      window.api = new API("/api/", "{{ csrf_token }}");
      window.modal = new Modal(document.getElementById("modalContainer"));
      this.runSetup = new RunSetup(
        "{{observation_record.id}}",
        document.getElementById("runSetupContainer")
      );
      this.runSetup.init();

      this.initialized = false;
      document.addEventListener("updateRun", this._updateRun.bind(this));
    }

    _updateRun(event) {
      const runId = event.detail.runId;
      if (!this.initialized) {
        // Initialize the App with the new run ID.
        this.recipesAndFilesManager = new RecipesAndFilesManager(
          document.getElementById("recipesAndFilesManagerContainer"),
          runId
        );
        this.caldb = new Caldb(document.getElementById("caldbContainer"), runId);
        this.processedFiles = new ProcessedFiles(
          document.getElementById("processedFilesContainer"),
          runId
        );
        this.recipeReductionsManager = new RecipeReductionsManager(
          document.getElementById("recipeReductionsContainer"),
          runId
        );
        this.initialized = true;
      } else {
        this.recipesAndFilesManager.update(runId);
        this.recipeReductionsManager.update(runId);
        this.caldb.update(runId);
        this.processedFiles.update(runId);
      }
    }
  }
  document.addEventListener("DOMContentLoaded", () => {
    new App();
  });
</script>
{% endblock %}