added device list to cloud service screen

lib/objects/cloud_service_api.dart

@@ -1,4 +1,5 @@
 import 'dart:convert';
+import 'dart:html';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:http/http.dart';
@@ -46,6 +47,7 @@ class CloudServiceAPI {
   static late String password;
   static late Map<String, String> headers;
   static bool initState = false;
+  static List<dynamic> devices = List<dynamic>.empty(growable: true);
 
   CloudServiceAPI(){
     if(!initState) {
@@ -65,6 +67,7 @@ class CloudServiceAPI {
       'content-type': 'application/json',
       'accept': 'application/json',
     };
+    await updateDeviceList();
     log("init Config $headers");
   }
   void reloadConfig() {
@@ -80,6 +83,10 @@ class CloudServiceAPI {
     Response r = await get(url, headers: headers);
     return json.decode(r.body) as List<dynamic>;
   }
+  Future updateDeviceList() async {
+    devices = await getDevices();
+    debugPrint("devices: ${devices.elementAt(0)}");
+  }
   Future<Map<String, dynamic>> getDeviceInfo(deviceID) async {
     Uri url = Uri.https(address, '/api/devices/$deviceID');
     Response r = await get(url, headers: headers);
@@ -128,4 +135,7 @@ class CloudServiceAPI {
     password = input;
     reloadConfig();
   }
+  List<dynamic> getLoadedDevices(){
+    return devices;
+  }
 }

lib/screens/cloud_service_ui.dart

@@ -14,18 +14,25 @@ class CloudService extends StatefulWidget {
   State<CloudService> createState() => _CloudService();
 
 }
-Future<Map<String, dynamic>> readJson() async {
-  final data = await rootBundle.loadString('config/credentials.json');
-  var data_ = json.decode(data) as Map<String, dynamic>;
-  debugPrint(data_.toString());
-  return data_;
-}
+
 
 class _CloudService extends State<CloudService>{
 
   late final Map<String, dynamic> credentials;
   CloudServiceAPI cloudServiceAPI = CloudServiceAPI();
-  static SharedPreferences? preferencesInstance;
+  int _selectedIndex = 0;
+
+  void _onItemTapped(int index){
+    setState(() {
+      _selectedIndex = index;
+      if(_selectedIndex == 0){
+        cloudServiceAPI.updateDeviceList();
+      }
+      if(_selectedIndex == 1){
+        // implementation missing
+      }
+    });
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -33,17 +40,45 @@ class _CloudService extends State<CloudService>{
       appBar: AppBar(
         title: const Text("Cloud Service"),
       ),
-      body: Center(
-        child: TextButton(
-          onPressed: () async{
-            var respond1 = await cloudServiceAPI.getDevices();
-            debugPrint('Devices: ${respond1.toString()}');
-            var respond2 = await cloudServiceAPI.getInformation();
-            debugPrint('Information: ${respond2.toString()}');
-            var respond3 = await cloudServiceAPI.createDevice('1', 'asdas', 'sdwe1');
-            debugPrint('CreateDevice: ${respond3.toString()}');
-          }, child: const Text("Example"),
+      body: Column(
+        children: <Widget>[
+          Expanded(child: ListView.separated(
+            itemCount: cloudServiceAPI.getLoadedDevices().length,
+            itemBuilder: (BuildContext context, int index) {
+              return Container(
+                height: 100,
+                color: Colors.lightBlueAccent[100],
+                child: Center(child: Text("Id: ${cloudServiceAPI.getLoadedDevices()[index]['id']} \n"
+                    "endpoint: ${cloudServiceAPI.getLoadedDevices()[index]['endpoint']} \n"
+                    "status: ${cloudServiceAPI.getLoadedDevices()[index]['endpoint']} \n"
+                    "connectionState: ${cloudServiceAPI.getLoadedDevices()[index]['connectionState']} \n"
+                    "lastActivityTime: ${cloudServiceAPI.getLoadedDevices()[index]['lastActivityTime']}"),),
+              );
+            }, separatorBuilder: (BuildContext context, int index) => const Divider(
+            thickness: 0,
+            indent: 0,
+            height: 5,
+            color: Colors.white,
+          ),)
+          )
+        ],
       ),
+      bottomNavigationBar: BottomNavigationBar(
+        type: BottomNavigationBarType.fixed,
+        items: const<BottomNavigationBarItem>[
+          BottomNavigationBarItem(
+            icon: Icon(Icons.refresh),
+            label: 'Reload',
+          ),
+          BottomNavigationBarItem(
+            icon: Icon(Icons.search),
+            label: 'Search',
+          ),
+        ],
+        currentIndex: _selectedIndex,
+        selectedItemColor: Colors.lightBlueAccent,
+        onTap: _onItemTapped,
+
       ),
       drawer: const Sidebar(),
     );