Moblize IT's questions

Estou tentando alterar a cor do botão do segmento ativo, mas com todas as opções ele ainda é renderizado como branco.

aqui está o html e o css

ion-segment {
      background-color: #108453
      ion-segment-button {
        color: #108453;
      }
      
      .segment-button-checked {
          color: black !important; // it works properly 
          background-color: #108453 !important; 
          --indicator-color : transparent!important;
        }
      }

HTML

 <ion-segment color="primary" value="present" swipeGesture=false scrollable=true style="margin-left: 10px;margin-right: 10px;">
      <ion-segment-button value="present" content-id="present">
        <ion-label>Present</ion-label>
      </ion-segment-button>
      <ion-segment-button value="future" content-id="future">
        <ion-label>Future</ion-label>
      </ion-segment-button>
    </ion-segment>
    <ion-segment-view>
      <ion-segment-content id="present">
      </ion-segment-content>
      <ion-segment-content id="future">
      </ion-segment-content>
    </ion-segment-view>

como alterar a cor do botão ativo para #108453

eu tenho dados estruturados no firestore assim

users (collection)
  --> uid (document)
      --> profile (map field)
         --> status (field)

Quero consultar os dados que correspondem a um valor de status "Ativo" e escrevi como abaixo:

 const appColRef = db.collection("users"); 
 const querySnapshot = await appColRef.where("status", '=', 'Active').get()

acima não funciona e funcionaria se o status estivesse no mesmo nível do perfil. Então, há uma maneira de consultar o campo de status dentro do campo do mapa de perfil.

estou usando um controlador de pop-up iniciando assim

 async openNwInsights(){
    const modal = await this.modalCtl.create({
      component: ExplainNetworthComponent
    })

    modal.present();
    const { data, role } = await modal.onWillDismiss();
  }

o HTML para este componente é assim

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="cancel()"><ion-icon name="arrow-back-outline"></ion-icon></ion-button>
    </ion-buttons>
    <ion-title></ion-title>
    <ion-buttons slot="end">
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  This is how it is suppose to be
</ion-content>

Quando é iniciado, ele ocupa a tela inteira. O que eu quero é ocupar apenas a parte do meio com alguma altura fixa. Há um exemplo de modal inline no site ionic que faz exatamente o que eu quero. Só não tenho certeza de como replicar, pois não estou usando a tag ion-model.

referência: https://ionicframework.com/docs/api/modal

Estou usando o banco de dados Firebase Firestore e as funções Firebase. O documento é criado por meio de um aplicativo angular iônico que aciona uma função Firebase como abaixo

exports.generateReadings = onDocumentCreated("sessions/{sessionId}", async (event) => {
    const snapshot = event.data;
    if (!snapshot) {
        console.log("No data associated with the event");
        return;
    }
    const data = snapshot.data();
    logger.log("Entire data is:", data)

Isso está funcionando muito bem. No entanto, quero que esta função seja acionada 5 minutos após a criação do documento. Existe uma maneira de fazer isso? Estou tentando evitar continuar executando a função a cada 5 minutos como um cronograma e fazê-lo, pois isso executará desnecessariamente e desperdiçará recursos.

Atualmente estou usando angular com firebase firestore db e tentando obter os dados em ordem de coleta por atributo de data. meu código atual sem ele é:

 this.core.readings = []
    const querySnapshot = await getDocs(collection(this.firestore, "readings"));
    querySnapshot.forEach((doc) => {
   // console.log(doc.id, " => ", doc.data());
      let data:any 
      data = doc.data()
      this.core.readings.push(data)
    });

quero adicionar orderBy("date") mas não consigo ver nos documentos etc. como aplicar isso.