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-data-view-window v-if="window.content === 'view_data'"
                                  :current-project="currentProject"
                                  :status="status"
                                  :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";

export default {
  name: 'App',
  components: {
    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) {
          return fetch(this.baseurl + 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', status => {
      this.status = status;
      this.connected = true;
    });

    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>