Merge branch '78-show-model-abilities-in-project-settings' into 'master'

Resolve "show model abilities in project settings"

Closes #78

See merge request troebs/pycs!68

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

@@ -19,6 +19,17 @@
         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>
@@ -47,7 +58,7 @@ export default {
   name: "project-settings-window",
   components: {ButtonInput, ConfirmedButtonInput, TextareaInput, TextInput},
   props: ['currentProject', 'socket'],
-  data: function() {
+  data: function () {
     return {
       project: null,
       name: '',
@@ -57,24 +68,34 @@ export default {
     }
   },
   computed: {
-    path: function() {
+    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) {
+    nameF: function (value) {
       // TODO then / error
       this.socket.post(this.path, {
         name: value
       });
     },
-    descriptionF: function(value) {
+    descriptionF: function (value) {
       // TODO then / error
       this.socket.post(this.path, {
         description: value
       });
     },
-    deleteProject: function() {
+    deleteProject: function () {
       // TODO then / error
       this.socket.post(this.path, {
         delete: true
@@ -82,7 +103,7 @@ export default {
       this.$emit('close', true);
     }
   },
-  created: function() {
+  created: function () {
     this.name = this.currentProject.name;
     this.description = this.currentProject.description;
   }
@@ -118,6 +139,14 @@ h1 {
   font-size: 80%;
 }
 
+.features {
+  font-size: 80%;
+}
+
+.features ul {
+  margin-top: 0.4rem;
+}
+
 /deep/ .content textarea {
   height: 4rem;
 }