[Edward]

Hi,

How could i set a Calendar page to send signals to Firebase RTDB?, When users select a day then press a “Save” AppButton the selected day is stored in the database with the user name in the Events box below on the page, what would i place into the Database to hold this information?

 

Thanks

Edd

[GüntherFelgo Team]

Hi Edward,

the Firebase Database works best with JSON-based data structures. This is convenient, as you can easily create and work with JSON data objects in your Felgo app. For example, you can create a data object like this:

import Felgo 3.0
import QtQuick 2.0

App {

  property var userData: {
    "selectedDates": [
          { "date": "utc-timestamp", "details": "meeting xy" },
          { "date": "utc-timestamp", "details": "another event" }
        ]
  }

  AppButton {
    text: "Add date"
    anchors.centerIn: parent
    onClicked: {
      userData.selectedDates.push({ "date": "utc-timestamp-of-chosen-date", "details": "some info" });
      console.log(JSON.stringify(userData));
    }
  }

}

Best,
Günther

[Edward]

Hey,

I’ve been working on implementing this into my app but am really struggling 🙁

I tried using the above code, adding to the onClicked event;

firebaseDb.setValue({ “date”: “utc-timestamp-of-chosen-date”, “details”: “some info” })

and received the following error:

Error: Unable to determine callable overload. Candidates are: setUserValue(QString,QVariant,QJSValue) setUserValue(QString,QVariant)

I adjusted the onClicked event too:

firebaseDb.setValue(“groups/CanaryWharf/Departments/Reception/members”, “date:” + Date())

 

and it writes the current date/time to the database but not the selected date!

it also just writes one entry, when save is clicked again overwrites, not an individual entry for each user/day selected?

HELP!!

 

Thanks

Edd

[Edward]

************UPDATE**************

(still seeking help haha)

I amended the line

firebaseDb.setValue(“groups/CanaryWharf/Departments/Reception/members”, “date:” + Date())

 

to the following:

 

      AppButton {
          id: saveButton
          text: "Save & Request"
          anchors.right: parent.right
          textColor: "#4e4e4e"
          backgroundColor: "#d1d1d1"
          onClicked: {
            userData.selectedDates.push({ "date": calendar.selectedDate});
            console.log(JSON.stringify(userData));
            firebaseDb.setValue(“groups/CanaryWharf/Departments/Reception/members”, "date:" + calendar.selectedDate)
          }
      }
    }    
    property var userData: {      
      "selectedDates": [         
            { "date": calendar.selectedDate}
          ]
    }

 

which writes the selected date to the calendar, when I click a new date, writes to the database, but overwrites the previously written date, how would I allow it to each date selected and saved??

 

Thanks

Edd

[GüntherFelgo Team]

Hi Edd,

in firebase, each key (path) can hold one value entry. The value can also be a data structure, which means you can store the userData.selectedDates array of your app directly to firebase with:

firebaseDb.setValue("groups/CanaryWharf/Departments/Reception/members", { "date": userData.selectedDates } )

 

Best,
Günther from Felgo

[Edward]

Hi Gunther,

I thought id’ reply here save starting a new post!

I am asking about the multiple selection of calendar cells, what i want to be able to do is visually highlight selected cells which then can be batch saved,

 

I know using the above method i can Append each date to JSON to batch save to firebase, but i also want this to be visual for the user, so each date tapped on is highlighted then on the save button pressed they are all saved to the database.

I know there options such as datePicker from fluid (which i am having install issues) and i would rather avoid a datePicker if possible anyway, the ability to multiple highlight visually and save is what i would like.

 

If this is a possibility what would be the best approach to starting this off?

 

Is this realistically a possibility and if so where could i start to do this

[GüntherFelgo Team]

Hi,

the check whether and how to highlight cells in your view is something, that I would add as a property for the UI item:

Item {
  id: myCellItem

  property bool highlight: false

  Rectangle {
    anchors.fill: parent
    opacity: myCellItem.highlight ? 1 : 0
    color: "orange"
  }
}

You can then set the highlight state for each cell as you require it. In case you fill your view based on a model, you can also add an expression to determine the highlight state for each delegate with a binding:

  property bool highlight: isSelected(modelData.date) 

function isSelected(date) {
   var selected = false;
   // check if date is selected and set selected variable accordingly
   return selected ? true : false
}