PyCS/webui/src/App.vue

<template>
  <div id="app">
    <!-- 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"
                           :project-path="currentProjectPath"
                           v-on:close="window.menu = false"></side-navigation-bar>

      <!-- actual content -->
      <div class="content">
        <project-open-window v-if="!currentProject"
                             :projects="projects"
                             :status="status"
                             :socket="socket"
                             v-on:open="show('settings')"/>
        <template v-else>
          <project-settings-window v-if="window.content === 'settings'"
                                   :current-project="currentProject"
                                   :current-project-path="currentProjectPath"
                                   :status="status"
                                   :socket="socket"/>
        </template>
      </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";

export default {
  name: 'App',
  components: {
    ProjectSettingsWindow,
    SideNavigationBar,
    TopNavigationBar,
    ProjectOpenWindow
  },
  data: function() {
    return {
      // initialize socket.io connection
      socket: {
        io: io('http://' + window.location.hostname + ':5000'),
        set: function(path, value) {
          this.io.emit('set', {path: path, value: value});
        },
        add: function(path, value) {
          this.io.emit('add', {path: path, value: value});
        }
      },
      status: null,
      window: {
        wide: true,
        menu: false,
        content: 'settings',
      }
    }
  },
  computed: {
    projects: function() {
      return this.status == null ? [] : this.status.projects;
    },
    currentProject: function() {
      for (let i = 0; i < this.projects.length; i++)
        if (this.projects[i].status === 'open')
          return this.projects[i];

      return false;
    },
    currentProjectPath: function() {
      for (let i = 0; i < this.projects.length; i++)
        if (this.projects[i].status === 'open')
          return 'projects/' + i;

      return false;
    }
  },
  methods: {
    resize: function() {
      this.window.wide = (document.body.offsetWidth > 1024);
    },
    show: function(value) {
      this.window.content = value;
    }
  },
  created: function() {
    this.socket.io.on('app_status', status => this.status = status);

    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>