recipe work

Gemfile.lock

@@ -10,56 +10,56 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (5.2.0.rc2)
+    actioncable (5.2.0)
-      actionpack (= 5.2.0.rc2)
+      actionpack (= 5.2.0)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailer (5.2.0.rc2)
+    actionmailer (5.2.0)
-      actionpack (= 5.2.0.rc2)
+      actionpack (= 5.2.0)
-      actionview (= 5.2.0.rc2)
+      actionview (= 5.2.0)
-      activejob (= 5.2.0.rc2)
+      activejob (= 5.2.0)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 2.0)
-    actionpack (5.2.0.rc2)
+    actionpack (5.2.0)
-      actionview (= 5.2.0.rc2)
+      actionview (= 5.2.0)
-      activesupport (= 5.2.0.rc2)
+      activesupport (= 5.2.0)
       rack (~> 2.0)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    actionview (5.2.0.rc2)
+    actionview (5.2.0)
-      activesupport (= 5.2.0.rc2)
+      activesupport (= 5.2.0)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.0.3)
-    activejob (5.2.0.rc2)
+    activejob (5.2.0)
-      activesupport (= 5.2.0.rc2)
+      activesupport (= 5.2.0)
       globalid (>= 0.3.6)
-    activemodel (5.2.0.rc2)
+    activemodel (5.2.0)
-      activesupport (= 5.2.0.rc2)
+      activesupport (= 5.2.0)
-    activerecord (5.2.0.rc2)
+    activerecord (5.2.0)
-      activemodel (= 5.2.0.rc2)
+      activemodel (= 5.2.0)
-      activesupport (= 5.2.0.rc2)
+      activesupport (= 5.2.0)
       arel (>= 9.0)
-    activestorage (5.2.0.rc2)
+    activestorage (5.2.0)
-      actionpack (= 5.2.0.rc2)
+      actionpack (= 5.2.0)
-      activerecord (= 5.2.0.rc2)
+      activerecord (= 5.2.0)
       marcel (~> 0.3.1)
-    activesupport (5.2.0.rc2)
+    activesupport (5.2.0)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 0.7, < 2)
       minitest (~> 5.1)
       tzinfo (~> 1.1)
     arel (9.0.0)
     bcrypt (3.1.11)
-    bootsnap (1.2.1)
+    bootsnap (1.3.0)
       msgpack (~> 1.0)
     builder (3.2.3)
     coderay (1.1.2)
     concurrent-ruby (1.0.5)
-    crass (1.0.3)
+    crass (1.0.4)
-    dalli (2.7.7)
+    dalli (2.7.8)
     database_cleaner (1.6.2)
     diff-lcs (1.3)
     erubi (1.7.1)
@@ -129,30 +129,30 @@ GEM
     notiffany (0.1.1)
       nenv (~> 0.1)
       shellany (~> 0.0)
-    oj (3.5.0)
+    oj (3.5.1)
     parslet (1.8.2)
     pg (0.21.0)
     pry (0.11.3)
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
-    puma (3.11.3)
+    puma (3.11.4)
     rack (2.0.4)
     rack-proxy (0.6.4)
       rack
     rack-test (1.0.0)
       rack (>= 1.0, < 3)
-    rails (5.2.0.rc2)
+    rails (5.2.0)
-      actioncable (= 5.2.0.rc2)
+      actioncable (= 5.2.0)
-      actionmailer (= 5.2.0.rc2)
+      actionmailer (= 5.2.0)
-      actionpack (= 5.2.0.rc2)
+      actionpack (= 5.2.0)
-      actionview (= 5.2.0.rc2)
+      actionview (= 5.2.0)
-      activejob (= 5.2.0.rc2)
+      activejob (= 5.2.0)
-      activemodel (= 5.2.0.rc2)
+      activemodel (= 5.2.0)
-      activerecord (= 5.2.0.rc2)
+      activerecord (= 5.2.0)
-      activestorage (= 5.2.0.rc2)
+      activestorage (= 5.2.0)
-      activesupport (= 5.2.0.rc2)
+      activesupport (= 5.2.0)
       bundler (>= 1.3.0)
-      railties (= 5.2.0.rc2)
+      railties (= 5.2.0)
       sprockets-rails (>= 2.0.0)
     rails-controller-testing (1.0.2)
       actionpack (~> 5.x, >= 5.0.1)
@@ -163,9 +163,9 @@ GEM
       nokogiri (>= 1.6)
     rails-html-sanitizer (1.0.4)
       loofah (~> 2.2, >= 2.2.2)
-    railties (5.2.0.rc2)
+    railties (5.2.0)
-      actionpack (= 5.2.0.rc2)
+      actionpack (= 5.2.0)
-      activesupport (= 5.2.0.rc2)
+      activesupport (= 5.2.0)
       method_source
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
@@ -241,7 +241,7 @@ DEPENDENCIES
   oj (~> 3.5.0)
   pg (~> 0.21.0)
   puma (~> 3.11)
-  rails (= 5.2.0.rc2)
+  rails (= 5.2.0)
   rails-controller-testing
   redcarpet (~> 3.4.0)
   rspec-rails (~> 3.7.2)

app/javascript/components/RecipeShow.vue

@@ -5,25 +5,36 @@
     </div>
     <div v-else>
       <div class="level is-mobile">
-        <div class="level-item">
+
-          {{ recipe.total_time}} ({{recipe.active_time}})
+        <div class="level-item has-text-centered">
+          <div>
+            <p class="heading">Time</p>
+            <p class="title is-6">{{timeDisplay}}</p>
+          </div>
         </div>
 
         <div class="level-item has-text-centered">
+          <div>
             <p class="heading">Yields</p>
-          <p class="title">{{recipe.yields}}</p>
+            <p class="title is-6">{{recipe.yields}}</p>
+          </div>
         </div>
 
-        <div class="level-item">
+        <div class="level-item has-text-centered">
-          <p>Source</p>
+          <div>
-          <p>{{recipe.source}}</p>
+            <p class="heading">Source</p>
+            <p class="title is-6">{{recipe.source}}</p>
+          </div>
         </div>
       </div>
 
       <div class="columns">
         <div class="column">
           <div class="message">
-            <div class="message-header">Ingredients</div>
+            <div class="message-header">
+              Ingredients
+              <button class="button is-small" type="button" @click="showConvertDialog = true">Convert</button>
+            </div>
             <div class="message-body content">
               <ul v-if="recipe.ingredients.length > 0">
                 <li v-for="i in recipe.ingredients">
@@ -66,11 +77,70 @@
       </div>
     </div>
 
+    <app-modal :open="showConvertDialog" @dismiss="showConvertDialog = false" title="Convert Recipe">
+      <div class="field">
+        <label class="label">Scale</label>
+        <div class="control">
+          <div class="select">
+            <select v-model="scaleValue">
+              <option v-for="s in scaleOptions" :key="s" :value="s">{{s}}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="label">System</label>
+        <div class="control">
+          <label class="radio">
+            <input type="radio" value="" v-model="systemConvertValue" />
+            No System Conversion
+          </label>
+
+          <label class="radio">
+            <input type="radio" value="standard" v-model="systemConvertValue" />
+            Convert to Standard Units
+          </label>
+
+          <label class="radio">
+            <input type="radio" value="metric" v-model="systemConvertValue" />
+            Convert to Metric Units
+          </label>
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="label">Unit</label>
+        <div class="control">
+          <label class="radio">
+            <input type="radio" value="" v-model="unitConvertValue" />
+            No Unit Conversion
+          </label>
+
+          <label class="radio">
+            <input type="radio" value="volume" v-model="unitConvertValue" />
+            Convert to Volume Units
+          </label>
+
+          <label class="radio">
+            <input type="radio" value="mass" v-model="unitConvertValue" />
+            Convert to Mass Units
+          </label>
+        </div>
+      </div>
+
+      <buttons>
+        <button type="button is-primary" class="button">Convert</button>
+        <button type="button" class="button">Close</button>
+      </buttons>
+    </app-modal>
+
   </div>
 </template>
 
 <script>
 
+
   export default {
     props: {
       recipe: {
@@ -81,8 +151,67 @@
 
     data() {
       return {
-        showNutrition: false
+        showNutrition: false,
+        showConvertDialog: false,
+
+        scaleValue: '1',
+        systemConvertValue: "",
+        unitConvertValue: "",
+
+        scaleOptions: [
+          '1/4',
+          '1/3',
+          '1/2',
+          '2/3',
+          '3/4',
+          '1',
+          '1 1/2',
+          '2',
+          '3',
+          '4'
+        ]
       };
+    },
+
+    computed: {
+      timeDisplay() {
+        let a = this.formatMinutes(this.recipe.active_time);
+        const t = this.formatMinutes(this.recipe.total_time);
+
+        if (a) {
+          a = ` (${a} active)`;
+        }
+
+        return t + a;
+      }
+    },
+
+    methods: {
+      formatMinutes(min) {
+        if (min) {
+          const partUnits = [
+            {unit: "d", minutes: 60 * 24},
+            {unit: "h", minutes: 60},
+            {unit: "m", minutes: 1}
+          ];
+
+          const parts = [];
+          let remaining = min;
+
+          for (let unit of partUnits) {
+            let val = Math.floor(remaining / unit.minutes);
+            remaining = remaining % unit.minutes;
+
+            if (val > 0) {
+              parts.push(`${val} ${unit.unit}`);
+            }
+          }
+
+          return parts.join(" ");
+        } else {
+          return "";
+        }
+      }
     }
   }