New dashboard look & feel

[src/xds/xds-agent.git] / webapp / src / app / pages / projects / project-card / project-card.component.html

diff --git a/webapp/src/app/pages/projects/project-card/project-card.component.html b/webapp/src/app/pages/projects/project-card/project-card.component.html
new file mode 100644 (file)
index 0000000..c54d581
--- /dev/null
+++ b/webapp/src/app/pages/projects/project-card/project-card.component.html
@@ -0,0 +1,65 @@
+<nb-card class="xds-projects">
+  <nb-card-header>
+
+    <div class="row">
+      <div class="col-12 col-md-8">
+        {{ project.label }}
+      </div>
+      <div class="col-6 col-md-4 text-right" role="group">
+        <button class="btn btn-outline-danger btn-tn btn-xds" (click)="delete(project)">
+          <span class="fa fa-trash fa-size-x2"></span>
+        </button>
+      </div>
+    </div>
+  </nb-card-header>
+
+  <nb-card-body>
+    <table class="table table-striped">
+      <tbody>
+        <tr>
+          <th>
+            <span class="fa fa-fw fa-id-badge"></span>&nbsp;
+            <span>Project ID</span>
+          </th>
+          <td>{{ project.id }}</td>
+        </tr>
+        <tr>
+          <th>
+            <span class="fa fa-fw fa-exchange"></span>&nbsp;
+            <span>Sharing type</span>
+          </th>
+          <td>{{ project.type | readableType }}</td>
+        </tr>
+        <tr>
+          <th>
+            <span class="fa fa-fw fa-folder-open-o"></span>&nbsp;
+            <span>Local path</span>
+          </th>
+          <td>{{ project.pathClient }}</td>
+        </tr>
+        <tr *ngIf="project.pathServer && project.pathServer != ''">
+          <th>
+            <span class="fa fa-fw fa-folder-open-o"></span>&nbsp;
+            <span>Server path</span>
+          </th>
+          <td>{{ project.pathServer }}</td>
+        </tr>
+        <tr>
+          <th>
+            <span class="fa fa-fw fa-flag"></span>&nbsp;
+            <span>Status</span>
+          </th>
+          <td>{{ project.status }} - {{ project.isInSync ? "Up to Date" : "Out of Sync"}}
+            <button *ngIf="!project.isInSync" class="btn btn-outline-info btn-tn btn-xds" (click)="sync(project)" style="margin-left:2em;">
+              <span class="fa fa-refresh fa-size-x2"></span>
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </nb-card-body>
+
+  <nb-card-footer>
+    <!-- <pre>{{project | json}}</pre> -->
+  </nb-card-footer>
+</nb-card>