chore: tipos de tarjetas

components/CardInfo.vue

@@ -2,9 +2,7 @@
   <div>
     <h4 class="text-center mt-1 py-2"><b>{{ tarjeta.nombre }}</b></h4>
     <div class="bg-body-tertiary border rounded p-2 mb-2 shadow text-center">
-      <img v-if="tarjeta.tipo === t('tarjeta_rapipass')" class="img-fluid" src="/images/rapipass_brand.webp" :width="size" :height="size">
-      <img v-else-if="tarjeta.tipo === t('tarjeta_normal')" class="img-fluid" src="/images/metro_metrobus_brand.webp" :width="size" :height="size">
-      <img v-else src="/images/metrobus_brand.webp" class="img-fluid" :width="size" :height="size">
+      <img class="img-fluid my-4" :src="`/images/${getCardImage(tarjeta.tipo, true)}`" :width="size.width" :height="size.height">
       <h3><b>{{ tarjeta.numero }}</b></h3>
     </div>
     <div class="bg-body-tertiary border rounded p-2 mb-2 shadow">
@@ -110,7 +108,10 @@ export default {
   },
   data () {
     return {
-      size: 200,
+      size: {
+        width: 250,
+        height: 158
+      },
       saldoBar: {
         percent: 0,
         color: ""

pages/app/index.vue

@@ -18,12 +18,10 @@ definePageMeta({ layout: "main" });
         </div>
         <div class="actions d-flex flex-column">
           <div class="image mb-2 mt-2">
-            <img v-if="tarjeta.tipo === t('tarjeta_rapipass')" class="img-fluid" src="/images/rapipass.webp" :width="size" :height="size">
-            <img v-else-if="tarjeta.tipo === t('tarjeta_normal')" class="img-fluid" src="/images/metro_metrobus.webp" :width="size" :height="size">
-            <img v-else src="/images/metrobus.webp" class="img-fluid" :width="size" :height="size">
+            <img class="img-fluid rounded shadow-sm" :src="`/images/${getCardImage(tarjeta.tipo)}`" :width="size.width" :height="size.height">
           </div>
           <div class="d-grid">
-            <button class="btn btn-primary btn-sm" role="button" @click="$event.stopPropagation(); updateTarjeta(tarjeta.numero)"><Icon name="refresh" size="md" /></button>
+            <button class="btn btn-primary btn-sm" role="button" @click="updateTarjeta($event, tarjeta.numero)"><Icon name="refresh" size="md" /></button>
           </div>
         </div>
       </div>
@@ -77,7 +75,10 @@ export default {
   data () {
     return {
       tarjetas: [],
-      size: 100,
+      size: {
+        width: 100,
+        height: 63
+      },
       fetched: 0,
       fetchLimit: 4,
       form: {
@@ -195,7 +196,8 @@ export default {
     openCard (numero) {
       this.$router.push(`${numero}`);
     },
-    async updateTarjeta (numero) {
+    async updateTarjeta (e, numero) {
+      e.stopPropagation();
       this.progress = t("actualizando_tarjeta");
       showModal("progress-dialog");
       const { tarjeta, error, error_key } = await API.getTarjetaAPI(numero);

strings/en.js

@@ -101,6 +101,8 @@ export default {
   por_hora: "Per hour",
   tarjeta_normal: "Normal card",
   tarjeta_rapipass: "Rapipass card",
+  tarjeta_escolar: "Student card",
+  tarjeta_jubilado: "Retiree card",
   tarjetas_note: "Press your card for more information.",
   rango: "Range",
   no_cambio: "There were no changes in the balance.",
@@ -162,5 +164,5 @@ export default {
   rate: "Rate app",
   limit_tittle: "Notice: Card info reading limit",
   limit_message: "Your account has too many linked cards. Once you exceed 4 linked cards, their information will not be automatically retrieved upon login. You will need to click the update button for each one to fetch their details, balance, and transactions. This is a measure to prevent mass data overload on our server.",
-  entendido: "Understood",
+  entendido: "Understood"
 };

strings/es.js

@@ -101,6 +101,8 @@ export default {
   por_hora: "Por hora",
   tarjeta_normal: "Tarjeta Normal",
   tarjeta_rapipass: "Tarjeta Rapipass",
+  tarjeta_escolar: "Tarjeta Escolar",
+  tarjeta_jubilado: "Tarjeta Jubilado",
   tarjetas_note: "Presiona tu tarjeta para más información.",
   rango: "Rango",
   no_cambio: "No hubo cambios en el saldo.",
@@ -162,5 +164,5 @@ export default {
   rate: "Calificar app",
   limit_tittle: "Aviso: Límite de lectura de información",
   limit_message: "Su cuenta posee demasiadas tarejetas vinculadas, al superar 4 tarjetas vinculadas, la información de estas no se obtendrá automáticamente al iniciar sesión, será necesario que pulses el botón de actualizar en cada una de ellas para visualizar su información, saldo y movimientos. Esto es una medida para evitar la sobrecarga en masa de datos en nuestro servidor.",
-  entendido: "Entendido",
+  entendido: "Entendido"
 };

utils/database.js

@@ -69,11 +69,19 @@ class Database {
     let tarjeta = {};
     if (values.length) {
       tarjeta = values[0];
-      if (tarjeta.tipo === "Tarjeta Normal al Portador b") {
+      switch (tarjeta.tipo) {
+      case "Tarjeta Normal al Portador b":
         tarjeta.tipo = t("tarjeta_normal");
-      }
-      else if (tarjeta.tipo === "Tarjeta Rapipass") {
+        break;
+      case "Tarjeta Rapipass":
         tarjeta.tipo = t("tarjeta_rapipass");
+        break;
+      case "Escolar 505":
+        tarjeta.tipo = t("tarjeta_escolar");
+        break;
+      case "Jubilado":
+        tarjeta.tipo = t("tarjeta_jubilado");
+        break;
       }
       if (tarjeta.estado === "Contrato Activo") {
         tarjeta.estado = t("contrato_activo");
@@ -92,11 +100,19 @@ class Database {
     const { values } = await this.query(statement);
     if (values.length) {
       values.forEach((tarjeta) => {
-        if (tarjeta.tipo === "Tarjeta Normal al Portador b") {
+        switch (tarjeta.tipo) {
+        case "Tarjeta Normal al Portador b":
           tarjeta.tipo = t("tarjeta_normal");
-        }
-        else if (tarjeta.tipo === "Tarjeta Rapipass") {
+          break;
+        case "Tarjeta Rapipass":
           tarjeta.tipo = t("tarjeta_rapipass");
+          break;
+        case "Escolar 505":
+          tarjeta.tipo = t("tarjeta_escolar");
+          break;
+        case "Jubilado":
+          tarjeta.tipo = t("tarjeta_jubilado");
+          break;
         }
         if (tarjeta.estado === "Contrato Activo") {
           tarjeta.estado = t("contrato_activo");

utils/functions.js

@@ -80,3 +80,18 @@ export const formatHour = (hour) => {
 export const openInNewTab = (url) => {
   window.open(url, "_blank");
 };
+
+export const getCardImage = (tipo, brand = false) => {
+  switch (tipo) {
+  case t("tarjeta_normal"):
+    return brand ? "metro_metrobus_brand.webp" : "metro_metrobus.webp";
+  case t("tarjeta_rapipass"):
+    return brand ? "rapipass_brand.webp" : "rapipass.webp";
+  case t("tarjeta_escolar"):
+    return brand ? "escolar_brand.webp" : "escolar.webp";
+  case t("tarjeta_jubilado"):
+    return brand ? "jubilado_brand.webp" : "jubilado.webp";
+  default:
+    return brand ? "metrobus_brand.webp" : "metrobus.webp";
+  }
+};