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

<template>
  <div class="project-creation-window">
    <h1 class="title">Create Project</h1>

    <div class="content">
      <text-input placeholder="Name"
                  v-model="name"
                  :error="nameError"
                  @clearError="nameError = false">
        Name
      </text-input>

      <textarea-input placeholder="Description"
                      v-model="description"
                      :error="descriptionError"
                      @clearError="descriptionError = false">
        Description
      </textarea-input>

      <select-input :values="models"
                    v-model="model">
        Model
      </select-input>

      <div class="features">
        This model supports:

        <ul>
          <li v-for="(feature, key) in current.supports"
              v-bind:key="key">
            {{ feature }}
          </li>
        </ul>
      </div>
    </div>

    <button-row class="footer">
      <button-input @click="create" type="primary">
        Create Project
      </button-input>

      <button-input @click="$emit('cancel', null)">
        Cancel
      </button-input>
    </button-row>
  </div>
</template>

<script>
import TextInput from "@/components/base/text-input";
import TextareaInput from "@/components/base/textarea-input";
import SelectInput from "@/components/base/select-input";
import ButtonInput from "@/components/base/button-input";
import ButtonRow from "@/components/base/button-row";

export default {
  name: "project-creation-window",
  components: {ButtonRow, ButtonInput, SelectInput, TextareaInput, TextInput},
  props: ['status', 'socket'],
  data: function () {
    return {
      name: '',
      nameError: false,
      description: '',
      descriptionError: false,
      model: null
    }
  },
  computed: {
    models: function () {
      const supported = {
        'bounding-boxes': 'bounding boxes',
        'labeled-bounding-boxes': 'labeled bounding boxes',
        'labeled-images': 'labeled images',
      };
      let result = [];

      for (let o in this.status.models) {
        result.push({
              'id': this.status.models[o].id,
              'name': this.status.models[o].name,
              'value': this.status.models[o].id,
              'supports': this.status.models[o].supports
                  .map(k => k in supported ? supported[k] : 'unknown feature')
            }
        );
      }

      return result;
    },
    current: function () {
      for (let model of this.models) {
        if (model.id === this.model) {
          return model;
        }
      }

      return false;
    }
  },
  created: function () {
    this.model = this.models[0].value;
  },
  methods: {
    create: function () {
      this.nameError = !this.name;
      this.descriptionError = !this.description;

      if (this.nameError || this.descriptionError)
        return;

      // TODO then / error
      this.socket.post('/projects', {
        name: this.name,
        description: this.description,
        model: this.model
      });
      this.$emit('cancel', null);
    }
  }
}
</script>

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

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

.content {
  overflow: auto;
  padding: 1rem;
  flex-grow: 1;
}

.content > * {
  margin-bottom: 0.6rem;
}

/deep/ .content textarea {
  height: 4rem;
}

.features {
  font-size: 80%;
}

.features ul {
  margin-top: 0.4rem;
}

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