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

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

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

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

          <div>
            {{ datetime(project.created) }}
          </div>
        </div>

        <div v-if="sortedProjects.length === 0"
             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},
  props: ['projects', 'status', 'socket'],
  data: function() {
    return {
      create: false
    }
  },
  computed: {
    sortedProjects: function() {
      return [...this.projects].map((e, i) => {
        e.index = i;
        return e;
      }).sort((a, b) => a.name < b.name ? -1 : 1);
    }
  },
  methods: {
    load: function(index) {
      this.$emit('open', this.projects[index]);
    },
    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";
}

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

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

.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>