Skip to content

Commit

Permalink
V4-457 fix(survey): GuideImagePrompt_step 3 and store connection
Browse files Browse the repository at this point in the history
  • Loading branch information
@cheburan
cheburan committed Jun 30, 2022
1 parent 61f4c3f commit a74cdca
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 58 deletions.
108 changes: 70 additions & 38 deletions apps/survey/src/components/prompts/dynamic/handlers/portion-size/GuideImagePromptHandler.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
:prompt-component="promptComponent"
:conversionFactor="selectedPortionSize.conversionFactor"
@guide-image-selected="onAnswer"
@tempChanging="onTempChange"
@update="onUpdate"
>
</guide-image-prompt>
Expand Down Expand Up @@ -74,12 +73,12 @@ export default (Vue as VueConstructor<Vue & PromptHandlerRefs & Mixins & HasOnAn
},
guideFoods(): GuideImageEncodedFood | Record<string, never> {
if (this.selectedFood === undefined) {
if (this.selectedFood === undefined || this.selectedFoodIndex === undefined) {
console.warn('Expected a meal and a food to be selected');
return {};
}
const storedState = useFoodGuideImageState().foodState[this.selectedFood.id];
const storedState = useFoodGuideImageState().foodState[this.selectedFoodIndex];
// console.log('Stored State: ', storedState);
if (!storedState) return {};
console.log(this.selectedMealIndex, storedState.mealId);
Expand All @@ -89,11 +88,15 @@ export default (Vue as VueConstructor<Vue & PromptHandlerRefs & Mixins & HasOnAn
},
methods: {
...mapActions(useSurvey, ['updateFood', 'setTempPromptAnswer', 'clearTempPromptAnswer']),
...mapActions(useSurvey, ['updateFood']),
...mapActions(useFoodGuideImageState, ['updateFoodState', 'clearFoodState']),
onUpdate(data: { portionSize: GuideImageState; objectIdx: number; panelOpen: number }) {
if (this.selectedFood === undefined || this.selectedMealIndex === undefined) {
if (
this.selectedFood == undefined ||
this.selectedMealIndex === undefined ||
this.selectedFoodIndex === undefined
) {
console.warn('Expected a food to be selected');
return;
}
Expand All @@ -104,7 +107,7 @@ export default (Vue as VueConstructor<Vue & PromptHandlerRefs & Mixins & HasOnAn
};
this.updateFoodState(
this.selectedMealIndex,
this.selectedFood.id,
this.selectedFoodIndex,
inputGuidedFood,
data.objectIdx,
data.panelOpen
Expand All @@ -119,51 +122,80 @@ export default (Vue as VueConstructor<Vue & PromptHandlerRefs & Mixins & HasOnAn
);
},
onTempChange(
tempGuidPromptAnswer: PromptAnswer,
tempUpdatedGuidPromptAnswer?: Partial<PromptAnswer>
) {
if (tempUpdatedGuidPromptAnswer)
this.setTempPromptAnswer(tempGuidPromptAnswer, tempUpdatedGuidPromptAnswer);
else this.setTempPromptAnswer(tempGuidPromptAnswer);
onAnswer() {
console.log('guide: emitting complete');
this.$emit('complete');
},
onAnswer(data: GuideImageData) {
const { conversionFactor } = this.selectedPortionSize;
commitAnswer() {
const { selectedMealIndex: mealIndex, selectedFoodIndex: foodIndex } = this;
if (mealIndex === undefined || foodIndex === undefined) {
console.warn('No selected meal/food, meal/food index undefined');
if (
mealIndex === undefined ||
foodIndex === undefined ||
this.guideFoods.food.portionSize == null
) {
console.warn(
'No selected meal/food, meal/food index undefined or portionSixe method is not set'
);
return;
}
console.log('guide: submitting answer');
this.updateFood({
mealIndex,
foodIndex,
food: {
portionSize: {
method: 'guide-image',
servingWeight:
data.object.weight *
(data.quantity.whole + data.quantity.fraction) *
conversionFactor,
leftoversWeight: 0, // Guide image does not allow estimating leftovers
object: data.object,
quantity: data.quantity,
},
portionSize: this.guideFoods.food.portionSize,
},
});
this.$emit('complete');
this.clearTempPromptAnswer();
console.log('guide: clearing store');
this.clearFoodState(foodIndex);
},
onPartialAnswer(data: GuideImageData) {
console.log('Called onPartialAnswer first');
if (this.currentTempPromptAnswer)
this.onTempChange(this.currentTempPromptAnswer, { finished: true });
this.$refs.promptHandleChild?.partialAnswerHandler();
},
// onTempChange(
// tempGuidPromptAnswer: PromptAnswer,
// tempUpdatedGuidPromptAnswer?: Partial<PromptAnswer>
// ) {
// if (tempUpdatedGuidPromptAnswer)
// this.setTempPromptAnswer(tempGuidPromptAnswer, tempUpdatedGuidPromptAnswer);
// else this.setTempPromptAnswer(tempGuidPromptAnswer);
// },
// onAnswer(data: GuideImageData) {
// const { conversionFactor } = this.selectedPortionSize;
// const { selectedMealIndex: mealIndex, selectedFoodIndex: foodIndex } = this;
// if (mealIndex === undefined || foodIndex === undefined) {
// console.warn('No selected meal/food, meal/food index undefined');
// return;
// }
// this.updateFood({
// mealIndex,
// foodIndex,
// food: {
// portionSize: {
// method: 'guide-image',
// servingWeight:
// data.object.weight *
// (data.quantity.whole + data.quantity.fraction) *
// conversionFactor,
// leftoversWeight: 0, // Guide image does not allow estimating leftovers
// object: data.object,
// quantity: data.quantity,
// },
// },
// });
// this.$emit('complete');
// this.clearTempPromptAnswer();
// },
// onPartialAnswer(data: GuideImageData) {
// console.log('Called onPartialAnswer first');
// if (this.currentTempPromptAnswer)
// this.onTempChange(this.currentTempPromptAnswer, { finished: true });
// this.$refs.promptHandleChild?.partialAnswerHandler();
// },
},
});
</script>
45 changes: 25 additions & 20 deletions apps/survey/src/components/prompts/portion/GuideImagePrompt.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,16 @@ export default (
this.debouncedImgResize();
},
onUpdate() {
if (this.selectedObjectIdx == null) return;
const portionSizeState = this.onObjectClick(this.selectedObjectIdx);
this.$emit('update', {
portionSize: portionSizeState,
objectIdx: this.selectedObjectIdx + 1,
panelOpen: this.panelOpen,
});
},
onObjectClick(idx: number): GuideImageState {
return {
method: 'guide-image',
Expand All @@ -266,28 +276,19 @@ export default (
selectObject(idx: number) {
this.selectedObjectIdx = idx;
console.log('Idx+1 : ', this.guideImageData.weights[idx + 1]); // weights array starts from 1
const portionSizeState = this.onObjectClick(idx);
this.$emit('update', {
portionSize: portionSizeState,
objectIdx: idx + 1,
panelOpen: this.panelOpen,
});
this.onUpdate();
},
onSelectGuide() {
this.selectedGuide = !this.selectedGuide;
this.panelOpen = 1;
if (!this.selectedObjectIdx) return;
const portionSizeState = this.onObjectClick(this.selectedObjectIdx);
this.$emit('update', {
portionSize: portionSizeState,
objectIdx: this.selectedObjectIdx + 1,
panelOpen: this.panelOpen,
});
this.onUpdate();
},
clearErrors() {
this.errors = [];
},
isValid() {
if (this.selectedGuide) {
return true;
Expand All @@ -303,20 +304,24 @@ export default (
if (this.selectedObjectIdx === null) throw new Error('Selected object id is null');
this.$emit('guide-image-selected', {
object: {
id: this.selectedObjectIdx,
weight: this.guideImageData.weights[this.selectedObjectIdx],
},
quantity: this.quantityValue,
});
this.$emit(
'guide-image-selected'
// {
// object: {
// id: this.selectedObjectIdx,
// weight: this.guideImageData.weights[this.selectedObjectIdx],
// },
// quantity: this.quantityValue,
// }
);
this.selectedQuantity = true; // Barely see the change of icon before transition
this.panelOpen = -1; // Closes all panels
},
updateQuantity(value: QuantityValues) {
this.quantityValue = value;
this.onUpdate();
},
partialAnswerHandler() {
Expand Down
3 changes: 3 additions & 0 deletions apps/survey/src/stores/guide-image.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,17 +59,20 @@ export const useFoodGuideImageState = defineStore('guide-image-state', {
objIdx: number | null = null,
panelOpen = 0
) {
console.log('food id: ', foodId, ' meal id: ', mealId);
const newGuideState: GuideImageEncodedFood = {
objectIdx: objIdx,
food: data,
mealId: mealId,
panelOpen: panelOpen,
};
console.info('To store in locale Storage: ', newGuideState);
this.foodState = { ...this.foodState, [foodId]: newGuideState };
},
clearFoodState(foodId: number) {
this.foodState = { ...this.foodState };
delete this.foodState[foodId];
localStorage.removeItem(`${import.meta.env.VITE_APP_PREFIX ?? ''}guide_image`); // deleting whole storage for guided image for now.
},
},
});
Expand Down

0 comments on commit a74cdca

Please sign in to comment.