added spinner and waiting on camunda
authorFabian Eichhorner <fabian.eichhorner@gmail.com>
Sun, 20 Jan 2019 19:03:15 +0000 (20:03 +0100)
committerFabian Eichhorner <fabian.eichhorner@gmail.com>
Sun, 20 Jan 2019 19:03:15 +0000 (20:03 +0100)
service-website/src/components/PdfReport.js
service-website/src/components/SentimentAnalysis.js
service-website/src/index.scss
service-website/src/services/CamundaService.js

index 691ec2a81d78bedfce37b4060eee5136d51fc1bf..71d9c4678a3803ca2de66fc613a62c8dc85fd4a9 100644 (file)
@@ -1,13 +1,23 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const PdfReport = ({pdfLink}) => {
+const PdfReport = ({pdfLink, loading}) => {
     if (pdfLink) {
         return (
             <div className="pdf-report">
                 <a href={pdfLink} target="_blank" rel="noopener noreferrer">Download PDF report</a>
             </div>
         );
+    } else if (loading){
+        return (
+            <div class="spinner">
+                <div class="rect1 has-background-info"></div>
+                <div class="rect2 has-background-info"></div>
+                <div class="rect3 has-background-info"></div>
+                <div class="rect4 has-background-info"></div>
+                <div class="rect5 has-background-info"></div>
+            </div>
+        );
     } else {
         return null;
     }
index ec6b6750a8b1e0884d3f1ee53b8fc767a696155c..aed2f0124c99d782ed379dc8b8b523470dcadc26 100644 (file)
@@ -12,6 +12,7 @@ class SentimentAnalysis extends Component {
             terms: new Map().set(0, ''),
             nextTermId: 1,
             pdfLink: null,
+            isLoading: false,
         };
         this.handleSubmit = this.handleSubmit.bind(this);
         this.handleTermChange = this.handleTermChange.bind(this);
@@ -33,8 +34,12 @@ class SentimentAnalysis extends Component {
         terms.forEach((term) => {
             console.log(term);
         });
+        this.setState({
+            isLoading: true,
+        });
         this.createPdf();
         this.emptyTerms();
+        
     }
 
     handleTermChange(id, value) {
@@ -107,7 +112,7 @@ class SentimentAnalysis extends Component {
                         </p>
                     </Form.Field>
                 </form>
-                <PdfReport pdfLink={this.state.pdfLink}/>
+                <PdfReport pdfLink={this.state.pdfLink} loading={this.state.isLoading}/>
             </div>
         );
     }
index 4c6b2d401c3323ee9fa8223d7e575d7ae46369cc..f4933fdf650912eadcb31a24845e3308e91aa113 100755 (executable)
@@ -28,4 +28,57 @@ footer {
 
 #headerMargin {
   margin-top: 1em;
+}
+
+.spinner {
+  margin: 100px auto;
+  height: 3em;
+  text-align: center;
+  font-size: 10px;
+}
+
+.spinner > div {
+  background-color: #333;
+  height: 100%;
+  width: 6px;
+  margin-left:0.25em;
+  display: inline-block;
+  
+  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+  animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
+  20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes sk-stretchdelay {
+  0%, 40%, 100% { 
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }  20% { 
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
 }
\ No newline at end of file
index ee15bbac8fe17a5c2fcbafb5a60293ba901f7301..172033274c9b278b4ac5a15a638fe68bb270f455 100644 (file)
@@ -40,10 +40,33 @@ class CamundaService {
             })
     }
 
+    delay(ms) {
+        return new Promise(function (resolve, reject) {
+            setTimeout(resolve, ms);
+        });
+    }
+
     getPdfDownloadLink(id) {
-        const downloadUrl = this.baseUrl + 'process-instance/' + id + '/variables/reportPDF/data';
-        console.log('download: ' + downloadUrl);
-        this.callback(downloadUrl);
+            const downloadUrl = this.baseUrl + 'process-instance/' + id + '/variables/reportPDF/data';
+            console.log('download: ' + downloadUrl);
+
+            this.axiosInstance
+                .get(downloadUrl)
+                .then(response => {
+                    const data = response.data;
+                    console.log(data);
+                    this.callback(downloadUrl);
+
+                })
+                .catch(error => {                
+                    console.log(error);
+                    this.delay(3000)
+                    .then(() => {
+                        this.getPdfDownloadLink(id);
+                    });   
+                    
+                })
+            
     }
 
     completeTask(id) {