<template>
  <div>

    <h2 class="page-header">Dump of calculation #{{ $route.params.id }}</h2>

    <box>
      <div class="container">
        <div class="button-container">
          <basic-button variant="secondary" :show-icon="false" @click="$router.push({name: 'dev-page', state: {show: 'dumps'}})">Back</basic-button>
          <basic-button variant="secondary" :show-icon="false" @click="expand = !expand">
            {{ expand === true ? 'Collapse all items' : 'Expand all items' }}
          </basic-button>
        </div>
        <json-tree-viewer :data="dump" :all-expanded="expand"></json-tree-viewer>
      </div>

    </box>
  </div>


</template>

<script>


import performRequest from "@/backend.js";
import {config} from "@/config.js";
import JsonTreeViewer from "@/components/UI/JsonTreeViewer.vue";
import ToggleSwitch from "@/components/UI/ToogleSwitch.vue";
import BasicButton from "@/components/UI/BasicButton.vue";
import Box from "@/components/UI/Box.vue";

export default {
  name: "CalculationDump",
  components: {Box, BasicButton, ToggleSwitch, JsonTreeViewer},
  async created() {

    const resp = await performRequest(null, "GET", `${config.backendUrl}/dev/dump/${this.$route.params.id}`, null);
    this.dump = resp.data;

  },
  data() {
    return {
      dump: null,
      expand: false
    }
  }

}
</script>

<style scoped>

.button-container {
  display: flex;
  gap: 1rem;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

</style>