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

<template>
  <div class="project-settings-window">
    <h1>Project Settings</h1>

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

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

      <div class="features">
        The used model supports:

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

      <div class="text">Delete Project</div>
      <confirmed-button-input @click="deleteProject">
        <template v-slot:first>
          <button-input>
            Delete Project
          </button-input>
        </template>
        <template v-slot:second>
          <button-input type="error">
            Do you really want to delete this project? <br>
            This cannot be undone.
          </button-input>
        </template>
      </confirmed-button-input>
    </div>
  </div>
</template>

<script>
import TextInput from "@/components/base/text-input";
import TextareaInput from "@/components/base/textarea-input";
import ConfirmedButtonInput from "@/components/base/confirmed-button-input";
import ButtonInput from "@/components/base/button-input";

export default {
  name: "project-settings-window",
  components: {ButtonInput, ConfirmedButtonInput, TextareaInput, TextInput},
  props: ['currentProject', 'socket'],
  data: function () {
    return {
      project: null,
      name: '',
      nameError: false,
      description: '',
      descriptionError: false
    }
  },
  computed: {
    path: function () {
      return '/projects/' + this.currentProject.id;
    },
    supports: function () {
      const supported = {
        'bounding-boxes': 'bounding boxes',
        'labeled-bounding-boxes': 'labeled bounding boxes',
        'labeled-images': 'labeled images',
        'fit': 'fit new data'
      };

      return this.currentProject.model.supports.map(k => k in supported ? supported[k] : 'unknown feature');
    }
  },
  methods: {
    nameF: function (value) {
      // TODO then / error
      this.socket.post(this.path, {
        name: value
      });
    },
    descriptionF: function (value) {
      // TODO then / error
      this.socket.post(this.path, {
        description: value
      });
    },
    deleteProject: function () {
      // TODO then / error
      this.socket.post(this.path, {
        delete: true
      });
      this.$emit('close', true);
    }
  },
  created: function () {
    this.name = this.currentProject.name;
    this.description = this.currentProject.description;
  }
}
</script>

<style scoped>
.project-settings-window {
  padding: 1rem;
}

h1 {
  margin: 0;
  font-family: "Roboto Condensed";

  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

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

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

.content > div.text {
  margin-bottom: 0.2rem;
  font-size: 80%;
}

.features {
  font-size: 80%;
}

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

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