-
Notifications
You must be signed in to change notification settings - Fork 56
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(junior): add new page for feedback + change resultPage
- Loading branch information
Showing
18 changed files
with
377 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,17 @@ | ||
import Component from '@glimmer/component'; | ||
|
||
export default class ChallengeLayout extends Component { | ||
|
||
get class () { | ||
return this.args.color ?? 'default'; | ||
} | ||
|
||
<template> | ||
<div class="challenge-layout challenge-layout--{{@color}}"> | ||
<div class="challenge-layout challenge-layout--{{this.class}}"> | ||
<div class="container"> | ||
{{yield}} | ||
</div> | ||
</div> | ||
</template> | ||
|
||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
import Controller from '@ember/controller'; | ||
import { action } from '@ember/object'; | ||
import { service } from '@ember/service'; | ||
|
||
export default class FeedBack extends Controller { | ||
@service router; | ||
@service intl; | ||
|
||
get feedbackClass() { | ||
if (this.model.assessment?.result?.global === 'exceeded' || this.model.assessment?.result?.global === 'reached') { | ||
return 'feedback--success'; | ||
} else { | ||
return 'feedback'; | ||
} | ||
} | ||
|
||
get buttonLabel() { | ||
const translationKeyArray = `pages.missions.feedback.result.${this.model.assessment?.result?.global ?? 'not-reached'}.button-label`; | ||
|
||
return this.intl.t(translationKeyArray); | ||
} | ||
|
||
get robotMood() { | ||
switch (this.model.assessment?.result?.global) { | ||
case 'exceeded': | ||
return 'happy'; | ||
case 'reached': | ||
return 'proud'; | ||
case 'not-reached': | ||
return 'retry'; | ||
default: | ||
return 'default'; | ||
} | ||
} | ||
|
||
get robotFeedBackMessage() { | ||
const translationKeyArray = `pages.missions.feedback.result.${this.model.assessment?.result?.global ?? 'not-reached'}.robot-text`; | ||
|
||
return [this.intl.t(translationKeyArray + '.0'), this.intl.t(translationKeyArray + '.1')]; | ||
} | ||
|
||
@action | ||
routeUrl() { | ||
const sessionId = this.model.assessment?.id; | ||
const routeName = 'assessment.results'; | ||
this.router.transitionTo(routeName, sessionId); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import Route from '@ember/routing/route'; | ||
import { service } from '@ember/service'; | ||
|
||
export default class Feedback extends Route { | ||
@service router; | ||
@service store; | ||
|
||
async model(params, transition) { | ||
const assessment = await this.modelFor('assessment').reload(); | ||
const mission = await this.store.findRecord('mission', assessment.missionId); | ||
return { mission, assessment }; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
.feedback { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
width: 100%; | ||
height: 100%; | ||
|
||
img { | ||
width: 185px; | ||
} | ||
|
||
button { | ||
width: fit-content; | ||
margin-top: 46px; | ||
margin-left: 190px; | ||
} | ||
|
||
.robot-speaking { | ||
width: fit-content; | ||
.bubbles { | ||
margin-left: 190px; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
{{page-title (t "pages.missions.feedback.title")}} | ||
<Challenge::ChallengeLayout @color="{{this.feedbackClass}}"> | ||
|
||
<div class="feedback"> | ||
<div class="robot-container"> | ||
|
||
<RobotDialog @class={{this.robotMood}} @robotOffSet={{120}}> | ||
{{#each this.robotFeedBackMessage as |message|}} | ||
<Bubble @message={{message}} /> | ||
{{/each}} | ||
|
||
</RobotDialog> | ||
<PixButton | ||
@variant={{this.backHomeButtonVariant}} | ||
class="issue-button" | ||
@size="large" | ||
@triggerAction={{this.routeUrl}} | ||
>{{this.buttonLabel}}</PixButton> | ||
</div> | ||
|
||
</div> | ||
</Challenge::ChallengeLayout> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,39 +1,43 @@ | ||
{{page-title (t "pages.missions.end-page.title")}} | ||
<div class="mission-page"> | ||
<div class="header_container"> | ||
<RobotDialog @class={{this.robotMood}}> | ||
<Bubble @message={{t this.resultMessage}} @status="success" /> | ||
</RobotDialog> | ||
<IdentifiedLearner /> | ||
</div> | ||
<div class="mission-page__body"> | ||
<MissionCard::CompletedMissionCard | ||
@missionLabelStatus={{t "pages.missions.list.status.completed.label"}} | ||
@title={{@model.mission.name}} | ||
@areaCode={{@model.mission.areaCode}} | ||
/> | ||
<Challenge::ChallengeLayout @color="{{this.feedbackClass}}"> | ||
<div class="mission-page"> | ||
<div class="header_container"> | ||
<RobotDialog @class={{this.robotMood}}> | ||
{{#each this.robotFeedBackMessage as |message|}} | ||
<Bubble @message={{message}} /> | ||
{{/each}} | ||
</RobotDialog> | ||
<IdentifiedLearner /> | ||
</div> | ||
<div class="mission-page__body"> | ||
<MissionCard::CompletedMissionCard | ||
@missionLabelStatus={{t "pages.missions.list.status.completed.label"}} | ||
@title={{@model.mission.name}} | ||
@areaCode={{@model.mission.areaCode}} | ||
/> | ||
|
||
<div class="mission-page__details"> | ||
<p class="details-list__title details-list__title--big">{{t this.resultsTitle}}</p> | ||
<ul class="details-list"> | ||
{{#each this.validatedObjectives as |element index|}} | ||
<div class="mission-page__details"> | ||
<p class="details-list__title details-list__title--big">{{t this.resultsTitle}}</p> | ||
<ul class="details-list"> | ||
{{#each this.validatedObjectives as |element index|}} | ||
|
||
<li> | ||
{{#if (this.isStepSuccessFul index)}} | ||
<img src="/images/icons/valid.svg" alt="Valid" /> | ||
{{else}} | ||
<img src="/images/icons/not-valid.svg" alt="Invalid" /> | ||
{{/if}} | ||
<MarkdownToHtml @markdown="{{element}}" class="details-list__item" /> | ||
</li> | ||
{{/each}} | ||
</ul> | ||
<li> | ||
{{#if (this.isStepSuccessFul index)}} | ||
<img src="/images/icons/valid.svg" alt="Valid" /> | ||
{{else}} | ||
<img src="/images/icons/not-valid.svg" alt="Invalid" /> | ||
{{/if}} | ||
<MarkdownToHtml @markdown="{{element}}" class="details-list__item" /> | ||
</li> | ||
{{/each}} | ||
</ul> | ||
|
||
<PixButtonLink @route="identified.missions" @shape="rounded" class="details-action"> | ||
<p>{{t "pages.missions.end-page.back-to-missions"}}</p> | ||
<PixIcon @name="arrowRight" class="details-action__icon" @ariaHidden={{true}} /> | ||
</PixButtonLink> | ||
<PixButtonLink @route="identified.missions" @shape="rounded" class="details-action"> | ||
<p>{{t "pages.missions.end-page.back-to-missions"}}</p> | ||
<PixIcon @name="arrowRight" class="details-action__icon" @ariaHidden={{true}} /> | ||
</PixButtonLink> | ||
|
||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</Challenge::ChallengeLayout> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.