ui: redesigned comment prompt after rating

afonsosousah · Apr 26, 2024 · 1ec3231 · 1ec3231
1 parent 44ed3f9
commit 1ec3231
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 52 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -1920,6 +1920,43 @@ input:-webkit-autofill:active{
 #rateTripMenuCard #sendButton:focus {
  cursor: pointer;
 }
+#rateTripMenuCard #ignoreButton {
+ background-color: var(--black);
+ width: 30vw;
+ height: 6dvh;
+ position: absolute;
+ z-index: 2;
+ left: 3dvh;
+ bottom: 3dvh;
+ border-radius: 999px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: white;
+ font-weight: bold;
+}
+#rateTripMenuCard #commentTextarea {
+ width: calc(100vw - 2*3dvh - 2*2dvh);
+ height: 10dvh;
+ outline: 1px solid var(--green);
+ border: none;
+ border-radius: 15px;
+ display: block;
+ padding: 1dvh 2dvh;
+ color: var(--black);
+ resize: none;
+ font-family: inherit;
+ font-size: inherit;
+ margin-left: -4dvh;
+ margin-bottom: 1dvh;
+ margin-top: 1dvh;
+}
+#rateTripMenuCard #title {
+ color: var(--green);
+ font-weight: 600;
+ margin-left: -4dvh;
+ font-size: 1.1rem;
+}
 /* #endregion */
 
 /* #region Take unregistered bike */

diff --git a/scripts/bikes.js b/scripts/bikes.js
@@ -485,71 +485,66 @@ function openRateTripMenu(tripObj) {
 
 async function rateTrip(tripCode, tripCost) {
  // Get the selected input for the stars
- let starsInput = document.querySelector(`input[type="radio"]:checked`);
+ const starsInput = document.querySelector(`input[type="radio"]:checked`);
  const tripRating = Number(starsInput?.value);
- if (starsInput) {
- // hide the rate trip menu
- if (document.getElementById("rateTripMenu")) document.getElementById("rateTripMenu").remove();
- } else {
+ const rateTripMenu = document.getElementById("rateTripMenu");
+ const rateTripCard = document.getElementById("rateTripMenuCard");
+
+ // Could not get rating
+ if (!starsInput) {
  alert("Não foi possível obter a classificação.");
  tripBeingRated = false;
  return;
  }
 
  // if the rating is 3 stars or less, prompt the user to comment on the trip
  if (tripRating <= 3) {
- createCustomTextPrompt(
- "Descreva a sua experiência",
- async () => {
- // Yes handler
- let comment = document.getElementById("customTextPromptInput").value;
- let success = await rateTripAPI(tripCode, tripRating, comment);
- if (success) {
- // store that this trip was already rated, to not prompt again
- ratedTripsList.push(tripCode);
-
- // Pay the trip after rating it
- payTrip(tripCode, tripCost);
-
- // Thank the user for the feedback
- alert("Agradecemos o feedback!");
- } else {
- alert("Não foi possível avaliar a viagem.");
- }
- tripBeingRated = false;
- },
- async () => {
- // No handler
- let success = await rateTripAPI(tripCode, tripRating, ""); // send empty comment if the user ignored
- if (success) {
- // store that this trip was already rated, to not prompt again
- ratedTripsList.push(tripCode);
-
- // Pay the trip after rating it
- payTrip(tripCode, tripCost);
-
- // Thank the user for the feedback
- alert("Agradecemos o feedback!");
- } else {
- alert("Não foi possível avaliar a viagem.");
- }
- tripBeingRated = false;
+ rateTripCard.innerHTML = `
+ <div id="title">Descreva a sua experiência</div>
+ <textarea id="commentTextarea" spellcheck=false placeholder="Escreva aqui..."></textarea>
+ <div id="ignoreButton">Ignorar</div>
+ <div id="sendButton">Enviar</div>
+ `.trim();
+
+ // Send button handler
+ document.querySelector("#rateTripMenuCard #sendButton").addEventListener("click", async () => {
+ let comment = document.getElementById("commentTextarea").value;
+ let success = await rateTripAPI(tripCode, tripRating, comment);
+ if (success) {
+ ratedTripsList.push(tripCode); // store that this trip was already rated, to not prompt again
+ payTrip(tripCode, tripCost); // Pay the trip after rating it
+ alert("Agradecemos o feedback!"); // Thank the user for the feedback
+ } else {
+ alert("Não foi possível avaliar a viagem."); // Error
  }
- );
+ rateTripMenu?.remove(); // Hide rate trip menu
+ tripBeingRated = false;
+ });
+
+ // Ignore button handler
+ document.querySelector("#rateTripMenuCard #ignoreButton").addEventListener("click", async () => {
+ // No handler
+ let success = await rateTripAPI(tripCode, tripRating, ""); // send empty comment if the user ignored
+ if (success) {
+ ratedTripsList.push(tripCode); // store that this trip was already rated, to not prompt again
+ payTrip(tripCode, tripCost); // Pay the trip after rating it
+ alert("Agradecemos o feedback!"); // Thank the user for the feedback
+ } else {
+ alert("Não foi possível avaliar a viagem."); // Error
+ }
+ rateTripMenu?.remove(); // Hide rate trip menu
+ tripBeingRated = false;
+ });
  } else {
  let success = await rateTripAPI(tripCode, tripRating, ""); // send empty comment if the user gave a good rating
  if (success) {
- // store that this trip was already rated, to not prompt again
- ratedTripsList.push(tripCode);
-
- // Pay the trip after rating it
- payTrip(tripCode, tripCost);
-
- // Thank the user for the feedback
- alert("Agradecemos o feedback!");
+ ratedTripsList.push(tripCode); // store that this trip was already rated, to not prompt again
+ payTrip(tripCode, tripCost); // Pay the trip after rating it
+ alert("Agradecemos o feedback!"); // Thank the user for the feedback
  } else {
  alert("Não foi possível avaliar a viagem.");
  }
+ rateTripMenu?.remove(); // Hide rate trip menu
  tripBeingRated = false;
  }
 }

diff --git a/scripts/navigation.js b/scripts/navigation.js
@@ -336,8 +336,6 @@ function updateRotation() {
  angleRad = -compassHeading;
  }
 
- console.log("rotation update");
-
  // Get values and view (pos object is global and is updated getLocation() in map.js)
  const view = map.getView();
  const mapSize = map.getSize();