Added components to spell viewer

app/imports/ui/properties/viewers/SpellViewer.vue

@@ -1,6 +1,9 @@
 <template lang="html">
   <div class="spell-viewer">
     <property-name :value="model.name" />
+    <p class="text-caption">
+      {{ levelAndSchool }}
+    </p>
     <property-field
       name="Casting time"
       :value="model.castingTime"
@@ -10,12 +13,12 @@
       :value="model.range"
     />
     <property-field
-      name="Duration"
-      :value="model.duration"
+      name="Components"
+      :value="spellComponents"
     />
     <property-field
-      name="Level"
-      :value="`${model.level} ${model.school}`"
+      name="Duration"
+      :value="model.duration"
     />
     <property-description
       :string="model.description"
@@ -26,9 +29,33 @@
 </template>
 
 <script lang="js">
-import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
+import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
+
+const levelText = [
+  'cantrip', '1st-level', '2nd-level', '3rd-level', '4th-level', '5th-level',
+  '6th-level', '7th-level', '8th-level', '9th-level'
+];
+
 export default {
 	mixins: [propertyViewerMixin],
+  computed:{
+    levelAndSchool(){
+      if (this.model.level == 0){
+        return `${this.model.school} ${levelText[0]}`
+      } else {
+        return `${levelText[this.model.level]} ${this.model.school}`
+      }
+    },
+    spellComponents(){
+      let components = [];
+      if (this.model.ritual) components.push('Ritual');
+      if (this.model.concentration) components.push('Concentration');
+      if (this.model.verbal) components.push('Verbal');
+      if (this.model.somatic) components.push('Somatic');
+      if (this.model.material) components.push(`Material (${this.model.material})`);
+      return components.join(', ');
+    },
+  }
 }
 </script>