PyCS/webui/src/App.vue

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

    <!-- top navigation bar -->
    <top-navigation-bar :window="window"
                        v-on:side="window.menu = !window.menu"
                        @close="closeProject"></top-navigation-bar>

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

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

        <project-settings-window v-if="currentPage === 'settings'"
                                 v-on:close="closeProject"/>

        <project-data-add-window v-if="currentPage === 'add_data'"/>

        <project-labels-window v-if="currentPage === 'labels'"/>

        <project-data-view-window v-if="currentPage === 'view_data'"/>

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

<script>
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";

export default {
  name: 'App',
  components: {
    ProjectLabelsWindow,
    LoadingOverlay,
    ProjectDataAddWindow,
    ProjectDataViewWindow,
    AboutWindow,
    ProjectSettingsWindow,
    SideNavigationBar,
    TopNavigationBar,
    ProjectOpenWindow
  },
  data: function () {
    return {
      window: {
        wide: true,
        menu: false,
        content: 'settings'
      }
    }
  },
  created: function () {
    window.addEventListener('resize', this.resize);
    this.resize();
  },
  destroyed: function () {
    window.removeEventListener('resize', this.resize);
  },
  computed: {
    currentPage: function () {
      if (!this.$root.project) {
        if (this.window.content === 'about')
          return this.window.content;
        else
          return 'projects';
      } else
        return this.window.content;
    }
  },
  methods: {
    resize: function () {
      this.window.wide = (document.body.offsetWidth > 1024);
    },
    show: function (value) {
      this.window.content = value;
    },
    openProject: function () {
      this.show('settings');
    },
    closeProject: function () {
      this.$root.project = null;
      this.show('settings');
    }
  },
  watch: {
    currentPage: function (newVal) {
      if (newVal === 'projects')
        this.window.content = 'settings';
    }
  }
}
</script>

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

  display: flex;
  flex-direction: column;
}

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

.content {
  flex-grow: 1;
}

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

/deep/ .headline {
  width: 100%;
  font-family: "Roboto Condensed", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
</style>