PyCS/webui/src/components/projects/project-open-window.vue

<template>
  <div class="project-open-window">
    <project-creation-window v-if="create"
                             @cancel="create = false"></project-creation-window>
    <template v-else>
      <div class="projects">
        <div class="title">
          <h1>Open Project</h1>
          <div class="text">
            Click a project to open it or create a new one.
          </div>
        </div>

        <div class="project"
             v-for="project in sortedProjects"
             :key="project.identifier"
             @click="load(project)">
          <h2>{{ project.name }}</h2>

          <div class="description">{{ project.description }}</div>

          <div>
            {{ project.created }}
          </div>
        </div>

        <div v-if="sortedProjects.length === 0"
          @click="create = true"
          class="project">
          <h2>There are no projects available.</h2>
          <div class="description">Please use the button at the bottom of the page to create a new one.</div>
        </div>
      </div>

      <div class="footer">
        <button-input @click="create = true" type="primary">
          New Project
        </button-input>
      </div>
    </template>
  </div>
</template>

<script>
import ButtonInput from "@/components/base/button-input";
import ProjectCreationWindow from "@/components/projects/project-creation-window";

export default {
  name: "project-open-window",
  components: {ProjectCreationWindow, ButtonInput},
  created: function () {
    // get projects
    this.getProjects();

    // subscribe to changes
    this.$root.socket.on('connect', this.getProjects);
    this.$root.socket.on('create-project', this.addProject);
    this.$root.socket.on('remove-project', this.removeProject);
    this.$root.socket.on('edit-project', this.editProject);
  },
  destroyed: function () {
    this.$root.socket.off('connect', this.getProjects);
    this.$root.socket.off('create-project', this.addProject);
    this.$root.socket.off('remove-project', this.removeProject);
    this.$root.socket.off('edit-project', this.editProject);
  },
  data: function () {
    return {
      create: false,
      projects: []
    }
  },
  computed: {
    sortedProjects: function () {
      return [...this.projects]
          .sort((a, b) => a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1);
    }
  },
  methods: {
    getProjects: function () {
      this.$root.socket.get('/projects')
          .then(response => response.json())
          .then(projects => {
            this.projects = [];
            projects.forEach(this.addProject)
          });
    },
    addProject: function (project) {
      for (let p of this.projects)
        if (p.identifier === project.identifier)
          return;

      this.projects.push(project);
    },
    removeProject: function (project) {
      for (let i = 0; i < this.projects.length; i++) {
        if (this.projects[i].identifier === project.identifier) {
          this.projects.splice(i, 1);
          return;
        }
      }
    },
    editProject: function (project) {
      for (let i = 0; i < this.projects.length; i++) {
        if (this.projects[i].identifier === project.identifier) {
          this.$set(this.projects, i, project);
          return;
        }
      }
    },
    load: function (project) {
      this.$root.project = project;
    },
    datetime: function (timestamp) {
      const date = new Date(timestamp * 1000);

      const da = date.getDate();
      const mo = date.getMonth() + 1;
      const ye = date.getFullYear();
      const ho = date.getHours();
      const mi = date.getMinutes();

      return [
        [
          da < 10 ? '0' + da : da,
          mo < 10 ? '0' + mo : mo,
          ye
        ].join('.'),
        [
          ho < 10 ? '0' + ho : ho,
          mi < 10 ? '0' + mi : mi
        ].join(':')
      ].join(' ');
    }
  }
}
</script>

<style scoped>
.project-open-window {
  display: flex;
  flex-direction: column;
}

h1 {
  margin: 0 0 0.4rem 0;
}

h2 {
  margin: 0;
  font-size: 120%;
  font-family: "Roboto Condensed", sans-serif;
}

.projects {
  overflow: auto;
  flex-grow: 1;
}

.title {
  margin: 0;
  padding: 1rem 2rem 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.title .text {
  font-size: 90%;
}

.project:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.project {
  padding: 1rem 2rem;
  cursor: pointer;
}

h2, .description {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.footer {
  padding: 2rem;
  display: flex;
  justify-content: flex-end;
}
</style>