add service fronted status

4 files changed, 79 insertions, 16 deletions

diff --git a/package.json b/package.json
index 5b8a64a..e4901b8 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
 		"@babel/plugin-syntax-dynamic-import": "^7.2.0",
 		"@babel/plugin-transform-runtime": "^7.4.4",
 		"@babel/preset-env": "^7.4.5",
+		"@babel/runtime": "^7.4.5",
 		"@vue/test-utils": "^1.0.0-beta.29",
 		"acorn": "^6.1.1",
 		"babel-eslint": "^10.0.1",
@@ -73,6 +74,7 @@
 		"prettier-eslint": "^8.8.2",
 		"raw-loader": "^2.0.0",
 		"sass-loader": "^7.1.0",
+		"style-loader": "^0.23.1",
 		"stylelint": "^8.4.0",
 		"stylelint-config-recommended-scss": "^3.3.0",
 		"stylelint-webpack-plugin": "^0.10.5",
diff --git a/src/components/ProtectionStatus.vue b/src/components/ProtectionStatus.vue
index c1a3b52..0601513 100644
--- a/src/components/ProtectionStatus.vue
+++ b/src/components/ProtectionStatus.vue
@@ -1,5 +1,5 @@
 <template>
-    <paper-card>
+    <paper-card heading="Protection Status">
         <div class="card-content">
             <h1>
                 <iron-icon icon="verified-user"></iron-icon><span>You are protected.</span>
@@ -19,18 +19,20 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
     paper-card {
+        --paper-card-background-color: #247209;
         width: 100%;
         height: 100%;
-        background-color: #fff;
-        color: #247209;
-    }
-    .card-content {
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        box-shadow: none;
+        --paper-card-header-color: #fff;
+        --paper-card-content: {
+            height: 100%;
+            color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        };
     }
     h1 {
         font-size: 48px;
diff --git a/src/components/ServiceStatus.vue b/src/components/ServiceStatus.vue
index 3852089..731e749 100644
--- a/src/components/ServiceStatus.vue
+++ b/src/components/ServiceStatus.vue
@@ -1,8 +1,9 @@
 <template>
-    <paper-card>
+    <paper-card :heading="serviceName">
         <div class="card-content">
             <h1>
-                <iron-icon icon="verified-user"></iron-icon><span>You are protected.</span>
+                <iron-icon v-if="serviceStatus" class="good" icon="verified-user"></iron-icon>
+                <iron-icon v-else class="bad" icon="error"></iron-icon>
             </h1>
         </div>
     </paper-card>
@@ -13,30 +14,83 @@ import '@polymer/paper-card/paper-card.js';
 import '@polymer/paper-button/paper-button.js';
 import '@polymer/iron-icon/iron-icon.js';
 import '@polymer/iron-icons/iron-icons.js';
+import axios from 'nextcloud-axios'
 
 export default {
     name: 'ServiceStatus',
+    props: {
+        link: {
+			type: String,
+			default: '',
+			required: true
+		}
+    },
+    data() {
+        return {
+            serviceName: "Not available.",
+            serviceStatus: 0
+        };
+    },
+    created () {
+        this.fetchServiceName();
+        this.fetchServiceStatus();
+    },
+    methods: {
+        fetchServiceName: function() {
+            axios({
+                method: 'GET',
+                url: this.link
+            })
+            .then(json => {
+                this.serviceName = json.data.name;
+            })
+            .catch( error => { console.error(error); });
+        },
+        fetchServiceStatus() {
+            axios({
+				method: 'GET',
+				url: this.link
+            })
+            .then(json => {
+                this.serviceStatus = json.data.serviceStatus;
+            })
+            .catch( error => { console.error(error); });
+        }
+    }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
     paper-card {
         width: 100%;
         height: 100%;
         background-color: #fff;
-        color: #247209;
+        box-shadow: none;
+        --paper-card-header-text: {
+            text-align: center;
+        };
     }
+
     .card-content {
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
     }
+
     h1 {
         font-size: 48px;
     }
+
     iron-icon {
         width: 66px;
         height: 66px;
+        &.good {
+            color: #247209;
+        }
+        &.bad {
+            color: red;
+        }
     }
+
 </style>
\ No newline at end of file
diff --git a/src/views/Protection.vue b/src/views/Protection.vue
index ac69495..05981ef 100644
--- a/src/views/Protection.vue
+++ b/src/views/Protection.vue
@@ -3,8 +3,8 @@
         <ProtectionStatus id="protection-status">
         </ProtectionStatus>
 		<div id="services">
-			<ServiceStatus class="service"></ServiceStatus>
-			<ServiceStatus class="service"></ServiceStatus>
+			<ServiceStatus :link="detectionServiceUrl" class="service"></ServiceStatus>
+			<ServiceStatus :link="detectionServiceUrl" class="service"></ServiceStatus>
 		</div>
     </AppContent>
 </template>
@@ -20,6 +20,11 @@ export default {
         AppContent,
 		ProtectionStatus,
 		ServiceStatus
+    },
+    computed: {
+        detectionServiceUrl() {
+            return OC.generateUrl('/apps/ransomware_detection/api/v1/service/0');
+        }
     }
 }
 </script>