You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by an...@apache.org on 2019/09/16 12:52:38 UTC

[incubator-dlab] 02/05: added starting loader; mocked api url for dev mode

This is an automated email from the ASF dual-hosted git repository.

ankovalyshyn pushed a commit to branch dlab-loading
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git

commit bd9cffb7c9841e2d4e02e42c8b58543e61b845d4
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Mon Sep 16 13:33:16 2019 +0300

    added starting loader; mocked api url for dev mode
---
 .../services/applicationServiceFacade.service.ts   | 10 ++-
 .../styles/app-loading.scss}                       | 17 ++---
 .../webapp/src/environments/environment.ts         |  3 +-
 .../src/main/resources/webapp/src/index.html       | 81 +++++++++++++++++++++-
 4 files changed, 99 insertions(+), 12 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts
index 03206eb..d4ba4db 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts
@@ -24,6 +24,11 @@ import { HttpClient } from '@angular/common/http';
 
 import { Dictionary } from '../collections';
 
+import { environment } from '../../../environments/environment';
+
+// we can now access environment.apiUrl
+const API_URL = environment.apiUrl;
+
 @Injectable()
 export class ApplicationServiceFacade {
 
@@ -648,7 +653,10 @@ export class ApplicationServiceFacade {
     this.requestRegistry.Add(ApplicationServiceFacade.USER_PROJECT, '/api/project/me');
   }
 
-  private buildRequest(method: RequestMethod, url: string, body: any, opt?) {
+  private buildRequest(method: RequestMethod, url_path: string, body: any, opt?) {
+    // added to simplify development process
+    const url = (environment.production) ? url_path : API_URL + url_path;
+
     if (method === RequestMethod.Post) {
       return this.http.post(url, body, opt);
     } else if (method === RequestMethod.Delete) {
diff --git a/services/self-service/src/main/resources/webapp/src/environments/environment.ts b/services/self-service/src/main/resources/webapp/src/assets/styles/app-loading.scss
similarity index 67%
copy from services/self-service/src/main/resources/webapp/src/environments/environment.ts
copy to services/self-service/src/main/resources/webapp/src/assets/styles/app-loading.scss
index 134d4a1..c4783e1 100644
--- a/services/self-service/src/main/resources/webapp/src/environments/environment.ts
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/app-loading.scss
@@ -1,4 +1,4 @@
-/*
+/*!
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
@@ -16,11 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-// The file contents for the current environment will overwrite these during build.
-// The build system defaults to the dev environment which uses `environment.ts`, but if you do
-// `ng build --env=prod` then `environment.prod.ts` will be used instead.
-// The list of which env maps to which file can be found in `.angular-cli.json`.
 
-export const environment = {
-  production: false
-};
+.app-loading {
+  .logo {
+    width: 100px;
+    height: 100px;
+    // background: url(../img/logo.png);
+    background-size: cover;
+  }
+}
diff --git a/services/self-service/src/main/resources/webapp/src/environments/environment.ts b/services/self-service/src/main/resources/webapp/src/environments/environment.ts
index 134d4a1..aab1d0d 100644
--- a/services/self-service/src/main/resources/webapp/src/environments/environment.ts
+++ b/services/self-service/src/main/resources/webapp/src/environments/environment.ts
@@ -22,5 +22,6 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  apiUrl: 'https://localhost:8443'
 };
diff --git a/services/self-service/src/main/resources/webapp/src/index.html b/services/self-service/src/main/resources/webapp/src/index.html
index 51e1583..facd7a1 100644
--- a/services/self-service/src/main/resources/webapp/src/index.html
+++ b/services/self-service/src/main/resources/webapp/src/index.html
@@ -20,17 +20,94 @@
 <!doctype html>
 
 <html>
+
 <head>
   <meta charset="utf-8">
   <title>DLab</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta http-equiv="X-UA-Compatible" content="IE=9;IE=10;IE=Edge,chrome=1"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=9;IE=10;IE=Edge,chrome=1" />
   <meta name="format-detection" content="telephone=no" />
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <style type="text/css">
+    body,
+    html {
+      height: 100%;
+    }
+
+    .app-loading {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+
+    .app-loading .spinner {
+      height: 200px;
+      width: 200px;
+      animation: rotate 2s linear infinite;
+      transform-origin: center center;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+    }
+
+    .app-loading .spinner .path {
+      stroke-dasharray: 20, 200;
+      stroke-dashoffset: 0;
+      animation: dash 1.5s ease-in-out infinite;
+      stroke-linecap: round;
+      stroke: #35afd5;
+    }
+
+    @keyframes rotate {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes dash {
+      0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+      }
+
+      50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35px;
+      }
+
+      100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124px;
+      }
+    }
+
+  </style>
 </head>
+
 <body>
-  <app-root>Loading...</app-root>
+  <app-root>
+    <!-- <div class="app-loading">
+      <div class="logo">
+        <svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 140.5 47.1" width="100px" height="100px"
+          style="enable-background:new 0 0 140.5 47.1;" xml:space="preserve">
+          <path fill="#35AFD5"
+            d="M0.9,46C0.3,45.4,0,44.6,0,43.7V3.1c0-0.8,0.3-1.7,0.9-2.2C1.5,0.3,2.3,0,3.1,0H14c4.2-0.1,8.3,1,12,3 c3.5,1.9,6.3,4.8,8.2,8.3c2,3.7,3,7.9,3,12.1c0.1,4.2-0.9,8.4-2.9,12.1c-1.9,3.5-4.8,6.4-8.3,8.3c-3.7,2-7.8,3.1-12.1,3H3.1 C2.3,46.9,1.5,46.6,0.9,46z M14,41.3c3.1,0.1,6.2-0.7,8.9-2.3c2.6-1.5,4.7-3.7,6.1-6.4c1.5-2.9,2.2-6,2.2-9.3 c0.1-3.2-0.7-6.4-2.2-9.2c-1.4-2.7-3.5-4.9-6.1-6.4c-2.7-1.5-5.8-2.3-8.9-2.3H6.2v35.8H14z M41.8,46.2C41.3,45.6,41,44.8,41,44V3.4 c0-0.8,0.3-1.6,0.9-2.2c0. [...]
+        </svg>
+      </div>
+      <svg class="spinner" viewBox="25 25 50 50">
+        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="1" stroke-miterlimit="10" />
+      </svg>
+    </div> -->
+    Loading...
+  </app-root>
 </body>
+
 </html>


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org