PyCS/webui/src/App.vue

<template>
  <div id="app">
    <!-- loading screen -->
    <loading-overlay v-if="!connected"/>

    <!-- top navigation bar -->
    <top-navigation-bar :window="window"
                        :current-project="currentProject"
                        v-on:side="window.menu = !window.menu"></top-navigation-bar>

    <!-- bottom content -->
    <div class="bottom">
      <!-- side navigation bar -->
      <side-navigation-bar :window="window"
                           :socket="socket"
                           :status="status"
                           :current-project="currentProject"
                           v-on:close="window.menu = false"/>

      <!-- actual content -->
      <div class="content">
        <project-open-window v-if="window.content === 'projects'"
                             :projects="projects"
                             :status="status"
                             :socket="socket"
                             :window="window"
                             v-on:open="openProject"/>

        <project-settings-window v-if="window.content === 'settings'"
                                 :current-project="currentProject"
                                 :status="status"
                                 :socket="socket"
                                 v-on:close="closeProject"/>

        <project-data-add-window v-if="window.content === 'add_data'"
                                 :current-project="currentProject"
                                 :socket="socket"/>

        <project-labels-window v-if="window.content === 'labels'"
                               :current-project="currentProject"
                               :socket="socket"/>

        <project-data-view-window v-if="window.content === 'view_data'"
                                  :current-project="currentProject"
                                  :status="status"
                                  :socket="socket"/>

        <project-model-interaction-window v-if="window.content === 'model_interaction'"
                                          :current-project="currentProject"
                                          :socket="socket"/>

        <about-window v-if="window.content === 'about'"/>
      </div>
    </div>
  </div>
</template>

<script>
import io from "socket.io-client";
import ProjectOpenWindow from "@/components/projects/project-open-window";
import TopNavigationBar from "@/components/window/top-navigation-bar";
import SideNavigationBar from "@/components/window/side-navigation-bar";
import ProjectSettingsWindow from "@/components/projects/project-settings-window";
import AboutWindow from "@/components/other/about-window";
import ProjectDataAddWindow from "@/components/projects/project-data-add-window";
import ProjectDataViewWindow from "@/components/projects/project-data-view-window";
import LoadingOverlay from "@/components/other/loading-overlay";
import ProjectLabelsWindow from "@/components/projects/project-labels-window";
import ProjectModelInteractionWindow from "@/components/projects/project-model-interaction-window";

export default {
  name: 'App',
  components: {
    ProjectModelInteractionWindow,
    ProjectLabelsWindow,
    LoadingOverlay,
    ProjectDataAddWindow,
    ProjectDataViewWindow,
    AboutWindow,
    ProjectSettingsWindow,
    SideNavigationBar,
    TopNavigationBar,
    ProjectOpenWindow
  },
  data: function () {
    return {
      connected: false,
      socket: {
        baseurl: window.location.protocol + '//' + window.location.hostname + ':5000',
        // initialize socket.io connection
        io: io(window.location.protocol + '//' + window.location.hostname + ':5000'),
        // http methods
        post: function (name, value) {
          if (!name.startsWith('http'))
            name = this.baseurl + name;

          return fetch(name, {
            method: 'POST',
            body: JSON.stringify(value)
          });
        },
        upload: function (name, file) {
          const form = new FormData();
          form.append('file', file);

          return fetch(this.baseurl + name, {
            method: 'POST',
            body: form
          });
        },
        media: function (projectId, fileId) {
          return this.baseurl + '/projects/' + projectId + '/data/' + fileId;
        }
      },
      status: null,
      window: {
        wide: true,
        menu: false,
        content: 'projects',
        project: null
      }
    }
  },
  computed: {
    projects: function () {
      if (this.status == null)
        return [];

      return Object.keys(this.status.projects).map(key => this.status.projects[key]);
    },
    currentProject: function () {
      for (let i = 0; i < this.projects.length; i++)
        if (this.projects[i].id === this.window.project)
          return this.projects[i];

      return false;
    }
  },
  methods: {
    resize: function () {
      this.window.wide = (document.body.offsetWidth > 1024);
    },
    show: function (value) {
      this.window.content = value;
    },
    openProject: function (project) {
      this.window.project = project.id;
      this.show('settings');
    },
    closeProject: function () {
      this.window.project = null;
      this.show('projects');
    }
  },
  created: function () {
    this.socket.io.on('app_status', data => {
      if (data.keys.length === 0) {
        this.status = data.value;
        this.connected = true;
        return;
      }

      const last = data.keys.pop();
      let target = this.status;

      for (let key of data.keys) {
        target = target[key];
      }

      target[last] = data.value;
    });

    setInterval(() => this.connected = this.socket.io.connected, 2000);

    window.addEventListener('resize', this.resize);
    this.resize();
  },
  destroyed: function () {
    window.removeEventListener('resize', this.resize);
  }
}
</script>

<style scoped>
#app {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
}

.bottom {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  width: 100%;
  position: relative;
}

.content {
  flex-grow: 1;
  overflow: hidden;
}

.content > * {
  width: 100%;
  height: 100%;
}
</style>