recipe work
This commit is contained in:
parent
6f213865f0
commit
f58039e3c6
84
Gemfile.lock
84
Gemfile.lock
@ -10,56 +10,56 @@ GIT
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
actioncable (5.2.0.rc2)
|
||||
actionpack (= 5.2.0.rc2)
|
||||
actioncable (5.2.0)
|
||||
actionpack (= 5.2.0)
|
||||
nio4r (~> 2.0)
|
||||
websocket-driver (>= 0.6.1)
|
||||
actionmailer (5.2.0.rc2)
|
||||
actionpack (= 5.2.0.rc2)
|
||||
actionview (= 5.2.0.rc2)
|
||||
activejob (= 5.2.0.rc2)
|
||||
actionmailer (5.2.0)
|
||||
actionpack (= 5.2.0)
|
||||
actionview (= 5.2.0)
|
||||
activejob (= 5.2.0)
|
||||
mail (~> 2.5, >= 2.5.4)
|
||||
rails-dom-testing (~> 2.0)
|
||||
actionpack (5.2.0.rc2)
|
||||
actionview (= 5.2.0.rc2)
|
||||
activesupport (= 5.2.0.rc2)
|
||||
actionpack (5.2.0)
|
||||
actionview (= 5.2.0)
|
||||
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)
|
||||
activesupport (= 5.2.0.rc2)
|
||||
actionview (5.2.0)
|
||||
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)
|
||||
activesupport (= 5.2.0.rc2)
|
||||
activejob (5.2.0)
|
||||
activesupport (= 5.2.0)
|
||||
globalid (>= 0.3.6)
|
||||
activemodel (5.2.0.rc2)
|
||||
activesupport (= 5.2.0.rc2)
|
||||
activerecord (5.2.0.rc2)
|
||||
activemodel (= 5.2.0.rc2)
|
||||
activesupport (= 5.2.0.rc2)
|
||||
activemodel (5.2.0)
|
||||
activesupport (= 5.2.0)
|
||||
activerecord (5.2.0)
|
||||
activemodel (= 5.2.0)
|
||||
activesupport (= 5.2.0)
|
||||
arel (>= 9.0)
|
||||
activestorage (5.2.0.rc2)
|
||||
actionpack (= 5.2.0.rc2)
|
||||
activerecord (= 5.2.0.rc2)
|
||||
activestorage (5.2.0)
|
||||
actionpack (= 5.2.0)
|
||||
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)
|
||||
dalli (2.7.7)
|
||||
crass (1.0.4)
|
||||
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)
|
||||
actioncable (= 5.2.0.rc2)
|
||||
actionmailer (= 5.2.0.rc2)
|
||||
actionpack (= 5.2.0.rc2)
|
||||
actionview (= 5.2.0.rc2)
|
||||
activejob (= 5.2.0.rc2)
|
||||
activemodel (= 5.2.0.rc2)
|
||||
activerecord (= 5.2.0.rc2)
|
||||
activestorage (= 5.2.0.rc2)
|
||||
activesupport (= 5.2.0.rc2)
|
||||
rails (5.2.0)
|
||||
actioncable (= 5.2.0)
|
||||
actionmailer (= 5.2.0)
|
||||
actionpack (= 5.2.0)
|
||||
actionview (= 5.2.0)
|
||||
activejob (= 5.2.0)
|
||||
activemodel (= 5.2.0)
|
||||
activerecord (= 5.2.0)
|
||||
activestorage (= 5.2.0)
|
||||
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)
|
||||
actionpack (= 5.2.0.rc2)
|
||||
activesupport (= 5.2.0.rc2)
|
||||
railties (5.2.0)
|
||||
actionpack (= 5.2.0)
|
||||
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)
|
||||
|
||||
@ -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">
|
||||
<p class="heading">Yields</p>
|
||||
<p class="title">{{recipe.yields}}</p>
|
||||
<div>
|
||||
<p class="heading">Yields</p>
|
||||
<p class="title is-6">{{recipe.yields}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
<p>Source</p>
|
||||
<p>{{recipe.source}}</p>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<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 "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user