Add string of dates to qml calendar - firebase

Question

UPDATED AFTER ADJUSTMENTS
So after amending my code from the suggestions and working with the visibility of my image and pushing the dates to an array I am still not seeing the individually marked dates, my new code is:
property var arrayFromFirebase: []
onFirebaseReady: {
firebaseDb.getUserValue("dates", {
orderByChild: true
}, function(success, key, value) {
if(success) {
console.log(JSON.stringify(value))
for( date in value){arrayFromFirebase.push(date.date)}
}
})
}
Image {
visible: arrayFromFirebase.indexOf(styleData.date.getDate()) > -1
}
My log still reads the arrayFromFirebase in the format of:
[{"date":"2018-10-01T21:17:00.926"},{"date":"2018-10-02T12:00:00.000"},{"date":"2018-10-03T12:00:00.000"},{"date":"2018-10-06T12:00:00.000"},{"date":"2018-10-07T12:00:00.000"},{"date":"2018-10-08T12:00:00.000"}]
ORIGINAL QUESTION
I have my a calendar which my users save selected dates which are stored in firebase, my calendar is built with example in the link
QtQuick Calendar
My user dates are stored to firebase, and when i read them i can receive them in the log using JSON.stringify,
When writing the saved dates to my database I use the following code:
property var userData: {
"selectedDates": [
{ },
]
}
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.setUserValue("dates", userData.selectedDates)
}
}
Then when reading the dates I use the following:
FirebaseDatabase {
config: customConfig
onFirebaseReady: {
firebaseDb.getUserValue("dates", {
startAt: {
Key: "1/date",
}
}, function(success, key, value) {
if(success) {
console.log(JSON.stringify(value))
}
})
}
}
Once this is read the log displays the dates as follows:
[{"date":"2018-10-01T21:17:00.926"},{"date":"2018-10-02T12:00:00.000"},{"date":"2018-10-03T12:00:00.000"},{"date":"2018-10-06T12:00:00.000"},{"date":"2018-10-07T12:00:00.000"},{"date":"2018-10-08T12:00:00.000"}]
I want to take this string of dates and add markers to my calendar to show they are booked?
How would I go about this?
The Type FirebaseDatabase is documented here
CALENDAR QML CODE
CalendarQMLCode

Answer 1

UPDATE (after #derM comment)
No need to use sqlite DB model
Just in the dayDelegate we play with the event indicator image visibility
For that after getting your data from firebase, save it to an array (we name it arrayFromFireBase) and check if styleData.date is in that array
FirebaseDatabase {
config: customConfig
onFirebaseReady: {
firebaseDb.getUserValue("dates", {
startAt: {
Key: "1/date",
}
}, function(success, key, value) {
if(success) {
console.log(JSON.stringify(value))
// value here is JSON ARRAY
// value =[{"date":"2018-10-01T21:17:00.926"},{"date":"2018-10-02T12:00:00.000"}]
// so value[0].date ="2018-10-01T21:17:00.926"
//then you gonna insert here your dates in arrayFromFireBase as strings as follow
for(i=0 ; i < arrayFromFireBase.length-1 ; i++)
arrayFromFireBase.push(new Date(value[i].date).getTime())
}
})
}
}
Calendar {
...
style: CalendarStyle {
dayDelegate: Item {
...
Image {
// HERE WE MUST COMPARE TIME (we used Date.getTime()) FROM FIREBASE with the calendar's date converted to time also
visible: arrayFromFireBase.indexOf(styleData.date.getTime()) > -1
...
source: "qrc:/images/eventindicator.png"
}
}
}
}
OLD ANSWER
Part of the code was taken from Qt Quick Controls - Calendar Example
Just added void SqlEventModel::insertDates(QStringList dates)
C++ part
SqlEventModel::SqlEventModel()
{
createConnection();
}
void SqlEventModel::createConnection()
{
QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE");
db.setDatabaseName(":memory:");
if (!db.open()) {
qFatal("Cannot open database");
return;
}
}
void SqlEventModel::insertDates(QStringList dates){
QSqlQuery query;
// We store the time as seconds because it's easier to query.
// It depends on what you want as columns for your events
query.exec("create table Event (name TEXT, startDate DATE, startTime INT,
endDate DATE, endTime INT)");
foreach(QString date in dates){
// It depends on what you want as columns for your events
query.exec(QString("insert into Event values('%1', '%2',
%3, '%4', %5)").arg(date[0]).arg(date[1]).arg(date[2]).arg(date[3]).arg(date[4]));
}
return;
}
QML part
SqlEventModel {
id: eventModel
}
FirebaseDatabase {
config: customConfig
onFirebaseReady: {
firebaseDb.getUserValue("dates", {
startAt: {
Key: "1/date",
}
}, function(success, key, value) {
if(success) {
console.log(JSON.stringify(value))
//Insert here your dates in sql model
eventModel.insertDates(value)
}
})
}
}

Answer 2

So, after a development holiday, I have a working solution! So see below (excluding all excess code) and thanks to everyone for your help!! (especially #Redanium for your patience)
Main.qml:
App {
property var arrayFromFireBase: []
onLoggedIn: {
firebaseDb.getUserValue("dates/selectedDates", {},
function(success, key, value) {
if(success) {
for(var idx in value)
arrayFromFireBase.push(new Date(value[idx].date).getTime())
})}}
Then on my calendar page the following:
CalendarPage.qml:
Page {
AppButton {
id: saveButton
text: "Save & Request"
onClicked: {
userData.selectedDates.push({"date": calendar.selectedDate});
console.log(JSON.stringify(userData));
firebaseDb.setUserValue("dates", userData)
}
}
property var userData: {
"selectedDates": [{}]
}
Image {
visible: arrayFromFireBase.indexOf(styleData.date.getTime()) > -1
}
}