1import QtQuick 2.10
2import QtQuick.Window 2.10
3import QtQuick.Layouts 1.3
4import QtQuick.Controls 2.3
5import QtQuick.Controls.Material 2.1
6import QtQuick.Dialogs 1.2
7import io.qt.bmob.traycontroller 1.0
8
9Page {
10   id: mainMenuPage
11   visible: true
12   width: parent.width
13   height: parent.height
14   property bool main: true
15
16   // Our C++ component
17   TrayUiController {
18      id: controller
19
20      // Events triggered by our c++ code
21      onClientsChanged: {
22         clientsGrid.model = controller.clients
23      }
24
25      onDirectorsChanged: {
26         directorsGrid.model = controller.directors
27      }
28
29      onStoragesChanged: {
30         storagesGrid.model = controller.storages
31      }
32
33      onInfoDialogTextChanged: {
34
35      }
36   }
37
38   onVisibleChanged: {
39      if(visible) {
40         controller.fetchClients()
41         controller.fetchDirectors()
42         controller.fetchStorages()
43      }
44   }
45
46   header: ToolBar {
47      id: toolbar
48      height: 48
49
50      background: Rectangle {
51         color: "#d32f2f"
52      }
53
54      RowLayout {
55         anchors.fill: parent
56         anchors.leftMargin: 8
57         anchors.rightMargin: 8
58
59         Label {
60            id: title
61            text: "Main Menu"
62            color: "white"
63            font.pixelSize: 18
64            anchors.centerIn: parent
65         }
66      }
67   }
68
69   Flickable {
70      id: scrollableBox
71      anchors.top: parent.top
72      anchors.bottom: resDetailsPanel.visible? resDetailsPanel.top : divider.top
73      width: parent.width
74      contentWidth: parent.width
75      contentHeight: scrollContent.height
76      clip: true
77
78      Item {
79         id: scrollContent
80         width: parent.width
81         height: childrenRect.height
82
83         Text {
84            id: clientsLabel
85            text: "Clients:"
86            font.pixelSize: 18
87            anchors.left: parent.left
88            anchors.leftMargin: 16
89            anchors.top: parent.top
90            anchors.topMargin: 24
91         }
92
93         Rectangle {
94            id: clientsDivider
95            width: parent.width
96            height: 1
97            color: "#d32f2f"
98            anchors.top: clientsLabel.bottom
99            anchors.topMargin: 16
100            anchors.left: parent.left
101            anchors.leftMargin: 16
102            anchors.right: parent.right
103            anchors.rightMargin: 16
104         }
105
106         GridView {
107            id: clientsGrid
108            height: childrenRect.height
109            interactive: false
110            anchors.top: clientsDivider.bottom
111            anchors.topMargin: 8
112            anchors.left: parent.left
113            anchors.right: parent.right
114
115            model: controller.clients
116
117            Button {
118               id: emptyClientsButton
119               text: "+ Add a Client"
120               onClicked: {
121                   resDetailsPanel.resType = 0
122                   resDetailsPanel.visible = true
123               }
124               anchors.left: parent.left
125               anchors.leftMargin: 24
126               anchors.top: parent.top
127               anchors.topMargin: 8
128               visible: parent.count == 0
129
130               contentItem: Text {
131                  text: emptyClientsButton.text
132                  font.pixelSize: 18
133                  color: emptyClientsButton.down ? "#ef9a9a" : "#d32f2f"
134               }
135
136               background: Rectangle {
137                  color: "white"
138               }
139            }
140
141            delegate: Item {
142               id: gridItem
143               width: clientsGrid.cellWidth
144               height: clientsGrid.cellHeight
145
146               Rectangle {
147                  anchors.left: parent.left
148                  anchors.right: parent.right
149                  anchors.top: parent.top
150                  anchors.bottom: parent.bottom
151                  color: "#e0e0e0"
152                  visible: clickArea.pressed
153               }
154
155               Item {
156                  height: childrenRect.height
157                  width: parent.width
158                  anchors.verticalCenter: parent.verticalCenter
159
160                  Image {
161                     id: resIcon
162                     width: 48
163                     height: 48
164                     source: "images/client_icon_48dp.png"
165                     anchors.horizontalCenter: parent.horizontalCenter
166                  }
167
168                  Text {
169                     anchors.top: resIcon.bottom
170                     anchors.topMargin: 8
171                     anchors.right: parent.right
172                     anchors.left: parent.left
173                     anchors.rightMargin: 8
174                     anchors.leftMargin: 8
175                     font.pixelSize: 13
176                     horizontalAlignment: Text.AlignHCenter
177                     text: model.modelData.resourceName
178                     elide: Text.ElideRight
179                  }
180               }
181
182               MouseArea {
183                  id: clickArea
184                  anchors.left: parent.left
185                  anchors.right: parent.right
186                  anchors.top: parent.top
187                  anchors.bottom: parent.bottom
188
189                  onClicked: {
190                     stackView.push(
191                              Qt.resolvedUrl("ResourceDetailsPage.qml"),
192                              {"resModel" : model.modelData}
193                              )
194                  }
195               }
196            }
197         }
198
199         Text {
200            id: directorsLabel
201            text: "Directors:"
202            font.pixelSize: 18
203            anchors.left: parent.left
204            anchors.leftMargin: 16
205            anchors.top: clientsGrid.bottom
206            anchors.topMargin: 24
207         }
208
209         Rectangle {
210            id: directorsDivider
211            width: parent.width
212            height: 1
213            color: "#d32f2f"
214            anchors.top: directorsLabel.bottom
215            anchors.topMargin: 16
216            anchors.left: parent.left
217            anchors.leftMargin: 16
218            anchors.right: parent.right
219            anchors.rightMargin: 16
220         }
221
222         GridView {
223            id: directorsGrid
224            height: childrenRect.height
225            interactive: false
226            anchors.top: directorsDivider.bottom
227            anchors.topMargin: 8
228            anchors.left: parent.left
229            anchors.right: parent.right
230
231            model: controller.directors
232
233            Button {
234               id: emptyDirsButton
235               text: "+ Add a Director"
236               onClicked: {
237                   resDetailsPanel.resType = 1
238                   resDetailsPanel.visible = true
239               }
240               anchors.left: parent.left
241               anchors.leftMargin: 24
242               anchors.top: parent.top
243               anchors.topMargin: 8
244               visible: parent.count == 0
245
246               contentItem: Text {
247                  text: emptyDirsButton.text
248                  font.pixelSize: 18
249                  color: emptyDirsButton.down ? "#ef9a9a" : "#d32f2f"
250               }
251
252               background: Rectangle {
253                  color: "white"
254               }
255            }
256
257            delegate: Item {
258               id: dirGridItem
259               width: directorsGrid.cellWidth
260               height: directorsGrid.cellHeight
261
262               Rectangle {
263                  anchors.left: parent.left
264                  anchors.right: parent.right
265                  anchors.top: parent.top
266                  anchors.bottom: parent.bottom
267                  color: "#e0e0e0"
268                  visible: dirClickArea.pressed
269               }
270
271               Item {
272                  height: childrenRect.height
273                  width: parent.width
274                  anchors.verticalCenter: parent.verticalCenter
275
276                  Image {
277                     id: dirResIcon
278                     width: 48
279                     height: 48
280                     source: "images/director_icon_48dp.png"
281                     anchors.horizontalCenter: parent.horizontalCenter
282                  }
283
284                  Text {
285                     anchors.top: dirResIcon.bottom
286                     anchors.topMargin: 8
287                     anchors.right: parent.right
288                     anchors.left: parent.left
289                     anchors.rightMargin: 8
290                     anchors.leftMargin: 8
291                     font.pixelSize: 13
292                     horizontalAlignment: Text.AlignHCenter
293                     text: model.modelData.resourceName
294                     elide: Text.ElideRight
295                  }
296               }
297
298               MouseArea {
299                  id: dirClickArea
300                  anchors.left: parent.left
301                  anchors.right: parent.right
302                  anchors.top: parent.top
303                  anchors.bottom: parent.bottom
304
305                  onClicked: {
306                     stackView.push(
307                              Qt.resolvedUrl("ResourceDetailsPage.qml"),
308                              {"resModel" : model.modelData}
309                              )
310                  }
311               }
312            }
313         }
314
315         Text {
316            id: storagesLabel
317            text: "Storages:"
318            font.pixelSize: 18
319            anchors.left: parent.left
320            anchors.leftMargin: 16
321            anchors.top: directorsGrid.bottom
322            anchors.topMargin: 24
323         }
324
325         Rectangle {
326            id: storagesDivider
327            width: parent.width
328            height: 1
329            color: "#d32f2f"
330            anchors.top: storagesLabel.bottom
331            anchors.topMargin: 16
332            anchors.left: parent.left
333            anchors.leftMargin: 16
334            anchors.right: parent.right
335            anchors.rightMargin: 16
336         }
337
338         GridView {
339            id: storagesGrid
340            height: childrenRect.height
341            interactive: false
342            anchors.top: storagesDivider.bottom
343            anchors.topMargin: 8
344            anchors.left: parent.left
345            anchors.right: parent.right
346
347            model: controller.storages
348
349            Button {
350               id: emptyStoragesButton
351               text: "+ Add a Storage"
352               onClicked: {
353                   resDetailsPanel.resType = 2
354                   resDetailsPanel.visible = true
355               }
356               anchors.left: parent.left
357               anchors.leftMargin: 24
358               anchors.top: parent.top
359               anchors.topMargin: 8
360               visible: parent.count == 0
361
362               contentItem: Text {
363                  text: emptyStoragesButton.text
364                  font.pixelSize: 18
365                  color: emptyStoragesButton.down ? "#ef9a9a" : "#d32f2f"
366               }
367
368               background: Rectangle {
369                  color: "white"
370               }
371            }
372
373            delegate: Item {
374               id: sdGridItem
375               width: storagesGrid.cellWidth
376               height: storagesGrid.cellHeight
377
378               Rectangle {
379                  anchors.left: parent.left
380                  anchors.right: parent.right
381                  anchors.top: parent.top
382                  anchors.bottom: parent.bottom
383                  color: "#e0e0e0"
384                  visible: sdClickArea.pressed
385               }
386
387               Item {
388                  height: childrenRect.height
389                  width: parent.width
390                  anchors.verticalCenter: parent.verticalCenter
391
392                  Image {
393                     id: sdResIcon
394                     width: 48
395                     height: 48
396                     source: "images/storage_icon_48dp.png"
397                     anchors.horizontalCenter: parent.horizontalCenter
398                  }
399
400                  Text {
401                     anchors.top: sdResIcon.bottom
402                     anchors.topMargin: 8
403                     anchors.right: parent.right
404                     anchors.left: parent.left
405                     anchors.rightMargin: 8
406                     anchors.leftMargin: 8
407                     font.pixelSize: 13
408                     horizontalAlignment: Text.AlignHCenter
409                     text: model.modelData.resourceName
410                     elide: Text.ElideRight
411                  }
412               }
413
414               MouseArea {
415                  id: sdClickArea
416                  anchors.left: parent.left
417                  anchors.right: parent.right
418                  anchors.top: parent.top
419                  anchors.bottom: parent.bottom
420
421                  onClicked: {
422                     stackView.push(
423                              Qt.resolvedUrl("ResourceDetailsPage.qml"),
424                              {"resModel" : model.modelData}
425                              )
426                  }
427               }
428            }
429         }
430
431         // Visual margin in the bottom
432         Item {
433            width: parent.width
434            height: 32
435            anchors.top: storagesGrid.bottom
436         }
437
438      } // Item (ScrollView contents)
439   } // ScrollView
440
441   Rectangle {
442       id: divider
443       visible: !resDetailsPanel.visible
444       width: parent.width
445       height: 1
446       color: "#d32f2f"
447       anchors.bottom: tconfigButton.top
448   }
449
450   Button {
451       id: tconfigButton
452       visible: !resDetailsPanel.visible
453       text: "Tray Config"
454       onClicked: stackView.push(Qt.resolvedUrl("TrayUiPage.qml"))
455       anchors.leftMargin: 12
456       anchors.left: parent.left
457       anchors.bottom: parent.bottom
458
459       contentItem: Text {
460           text: tconfigButton.text
461           font.pixelSize: 18
462           color: tconfigButton.down ? "#ef9a9a" : "#d32f2f"
463       }
464
465       background: Rectangle {
466           color: "white"
467       }
468   }
469
470   Button {
471       id: fdButton
472       visible: !resDetailsPanel.visible
473       text: "File Daemon"
474       onClicked: stackView.push(Qt.resolvedUrl("FileDaemonPage.qml"))
475       anchors.rightMargin: 12
476       anchors.right: parent.right
477       anchors.bottom: parent.bottom
478
479       contentItem: Text {
480           text: fdButton.text
481           font.pixelSize: 18
482           color: fdButton.down ? "#ef9a9a" : "#d32f2f"
483       }
484
485       background: Rectangle {
486           color: "white"
487       }
488   }
489
490   ResourcePanel {
491      id: resDetailsPanel
492
493      onVisibleChanged: {
494         if (!visible) {
495            controller.fetchClients()
496            controller.fetchDirectors()
497            controller.fetchStorages()
498         }
499      }
500   }
501}
502