Skip to content

Commit

Permalink
acceptable layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@rbs333
rbs333 committed Apr 13, 2019
1 parent bd8047a commit fe7aef5
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 66 deletions.
7 changes: 3 additions & 4 deletions frontend/src/components/ListInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="control">
<form v-on:change="emit()">
<label class="label">{{label}}</label>
<div v-if="showLess" class="flex">
<div v-if="showLess">
<input
class="input"
type="number"
Expand Down Expand Up @@ -50,8 +50,7 @@ export default {

<style>
.flexCols {
display: flex;
/* flex-direction: column; */
.width {
width: 18rem;
}
</style>
110 changes: 62 additions & 48 deletions frontend/src/components/OptimizationForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,27 +47,31 @@
</div>
</div>
</div>
<div class="field">
<label class="label">Moisture</label>
<div class="control">
<input class="input" type="number" v-model="model.moisture">
<div>
<div class="label centerAlign makeFull">Farm and Crop Info</div>
<div class="flexWrap">
<div class="field">
<label class="label">Moisture</label>
<div class="control">
<input class="input" type="number" v-model="model.moisture">
</div>
</div>
<ListInput
v-bind:list='model.field.area_ratio'
v-on:listChange='model.field.area_ratio = $event'
v-bind:label="'Farm Size Ratio'"
v-bind:placeHolders='placeHolders.areaRatio'
></ListInput>
</div>
</div>
<ListInput
v-bind:list='model.field.area_ratio'
v-on:listChange='model.field.area_ratio = $event'
v-bind:label="'Farm Size Ratio'"
v-bind:placeHolders='placeHolders.areaRatio'
></ListInput>
<!-- <div class="field">
<label class="label">Price per Mg</label>
<div class="control">
<input class="input" type="text" v-model="model.price">
</div>
</div> -->

</div>
<div>
<div class="label centerAlign">Equipment Configuration Info</div>
<div class="label centerAlign makeFull">Equipment Configuration Info</div>
<div class="flexWrap">
<EquipmentField
v-bind:list='model.cost.equipment.loadout'
Expand Down Expand Up @@ -107,38 +111,46 @@
</EquipmentField>
</div>
</div>
<div class="transCoefficients">
<label class="label">Transportation Factors</label>
<div class="flexCols">
<input
class="input"
type="text"
v-model="model.cost.transport_coef.compressed"
placeholder="Compressed"
>
</div>
<div class="flexCols">
<input
class="input"
type="text"
v-model="model.cost.transport_coef.whole_stalk"
placeholder="Whole Stalk"
>
</div>
<div class="flexCols">
<input
class="input"
type="text"
v-model="model.cost.transport_coef.in_module"
placeholder="In Module"
>

<div>
<div class="label centerAlign makeFull">Transportation Factors</div>
<div class="flexWrap">
<div class="control">
<div class="field">
<label class="label">Compressed</label>
<input
class="input"
type="text"
v-model="model.cost.transport_coef.compressed"
>
</div>
</div>
<div class="control">
<div class="field">
<label class="label">Whole Stalk</label>
<input
class="input"
type="number"
v-model="model.cost.transport_coef.whole_stalk"
>
</div>
</div>
<div class="control">
<div class="field">
<label class="label">In Module</label>
<input
class="input"
type="number"
v-model="model.cost.transport_coef.in_module"
>
</div>
</div>
</div>
</div>

<div>
<div class="label centerAlign">Degradation Factors</div>
<div class="flexWrap">
<!-- Add <br>, Finish labeling, swap trans factors, remedy placeholder vs default -->
<div class="field">
<label class="label">Whole Stalk</label>
<div class="control">
Expand All @@ -150,20 +162,23 @@
</div>
</div>
<div class="control">
<label class="label">Chopped</label>
<input
class="input"
type="number"
v-model="model.degrade.chopped"
>
</div>
<div class="control">
<label class="label">In Bunker</label>
<input
class="input"
type="number"
v-model="model.degrade.in_bunker"
>
</div>
<div class="control">
<label class="label">In Bag</label>
<input
class="input"
type="number"
Expand Down Expand Up @@ -206,21 +221,15 @@ export default {
</script>

<style>
.params {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.makeFull {
width: calc(100vw - 4rem);
}
.degradeParams .flexCols {
width: 18rem;
}
.params .input {
width: 18rem;
margin-right: 1rem;
}
.flexCols {
display: flex;
flex-direction: column;
Expand All @@ -237,5 +246,10 @@ export default {
.centerAlign {
text-align: center;
margin: 1rem 0;
}
.section {
margin-bottom: 1rem;
}
</style>
24 changes: 10 additions & 14 deletions frontend/src/components/S_BFLS.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,13 @@
<Map class="map" v-model="mapInfo" ref="map"></Map>
<div class="paramDescription title is-size-4">Optimization Parameters</div>
<div class="params">
<div class="requiredParams">
<div class="field defaultWidth">
<div class="field">
<label class="label">Projected Demand (Mg)</label>
<div class="control">
<input class="input" type="text" v-model="model.demand" @change="changeProportion">
</div>
</div>
<div class="field defaultWidth">
<div class="field">
<label class="label">Length Planning Horizon (wk)</label>
<div class="control">
<input class="input" type="text" v-model="model.horizon">
Expand Down Expand Up @@ -45,7 +44,6 @@
v-bind:label="'Harvest Progress'"
v-bind:placeHolders="placeHolders.harvestProgress"
></ListInput>
</div>
<div class="advancedParams">
<div v-if="advancedOptions">
<div class="title is-size-5">Additional Parameters</div>
Expand Down Expand Up @@ -164,7 +162,6 @@
<td class="table_row" v-html="sim_response['module hauler rate']['sem'] + ' Mg'"></td>
<td class="table_row" v-html="sim_response['module hauler rate']['conf int'] + ' Mg'"></td>
<td class="table_row" v-html="'(' + sim_response['module hauler rate']['range'][0] + ', ' + sim_response['module hauler rate']['range'][1] + ')' + ' Mg/hr'"></td>

</tr>
</table>
</div>
Expand Down Expand Up @@ -462,29 +459,28 @@ export default {
.params {
grid-area: params;
display: flex;
flex-grow: 1;
justify-content: flex-start;
flex-wrap: wrap;
}
.requiredParams {
.params .input {
width: 18rem;
margin-right: 1rem;
}
/* .requiredParams {
grid-area: params;
display: flex;
flex-grow: 1;
justify-content: flex-start;
flex-wrap: wrap;
}
.requiredParams .input {
margin-right: 1rem;
}
} */
.defaultWidth {
width: 15rem;
}
.buttons {
grid-area: buttons
grid-area: buttons;
margin-top: 1rem;
}
.advancedOptions {
Expand Down

0 comments on commit fe7aef5

Please sign in to comment.