From 9fae05615784eb899c70c91346249680644d0fdf Mon Sep 17 00:00:00 2001
From: Kai Reinhard <K.Reinhard@micromata.de>
Date: Thu, 20 Dec 2018 02:14:23 +0000
Subject: [PATCH] Modifications are now displayed.

---
 borgbutler-webapp/src/components/views/archives/FileListEntry.jsx |   16 +++++++++++-----
 borgbutler-webapp/src/components/views/archives/FileListTable.jsx |    5 +++++
 borgbutler-webapp/src/css/my-style.css                            |   14 ++++++++++++++
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/borgbutler-webapp/src/components/views/archives/FileListEntry.jsx b/borgbutler-webapp/src/components/views/archives/FileListEntry.jsx
index bd8307f..53ec2e6 100644
--- a/borgbutler-webapp/src/components/views/archives/FileListEntry.jsx
+++ b/borgbutler-webapp/src/components/views/archives/FileListEntry.jsx
@@ -34,16 +34,21 @@
 }
 
 function FileListEntry({archiveId, diffArchiveId, entry, search, mode, changeCurrentDirectory}) {
-    let displayPath = entry.displayPath;
     let downloadArchiveId = archiveId;
+    let displayPath = entry.displayPath;
+    let pathCss = 'tt';
+    let diffCol = undefined;
     if (entry.diffStatus === 'NEW') {
-        displayPath = "New: " + displayPath;
+        pathCss = 'tt file-new';
+        diffCol = <td className={'tt'}>NEW</td>;
     } else if  (entry.diffStatus === 'REMOVED') {
-        displayPath = "Rem: " + displayPath;
+        pathCss = 'tt file-removed';
         // Download removed files from other archive.
         downloadArchiveId = diffArchiveId;
+        diffCol = <td className={'tt'}>REMOVED</td>;
     } else if (entry.diffStatus === 'MODIFIED') {
-        displayPath = "Mod: " + displayPath;
+        pathCss = 'tt file-modified';
+        diffCol = <td className={'tt'}>{entry.differences}</td>;
     }
     let path;
     if (mode === 'tree' && entry.type === 'd') {
@@ -53,7 +58,7 @@
     }
     return (
         <tr>
-            <td className={'tt'}>{path}</td>
+            <td className={pathCss}>{path}</td>
             <td className={'tt'}>
                 <div className={'btn'} onClick={() => download(downloadArchiveId, entry.fileNumber)}>
                     <IconDownload/></div>
@@ -61,6 +66,7 @@
             <td className={'tt'}>{humanFileSize(entry.size, true, true)}</td>
             <td className={'tt'}>{entry.mode}</td>
             <td className={'tt'}>{entry.mtime}</td>
+            {diffCol}
         </tr>
     );
 }
diff --git a/borgbutler-webapp/src/components/views/archives/FileListTable.jsx b/borgbutler-webapp/src/components/views/archives/FileListTable.jsx
index 8b03adc..a34d5c4 100644
--- a/borgbutler-webapp/src/components/views/archives/FileListTable.jsx
+++ b/borgbutler-webapp/src/components/views/archives/FileListTable.jsx
@@ -5,6 +5,10 @@
 
 function FileListTable({archiveId, diffArchiveId, entries, search, mode, changeCurrentDirectory}) {
     const lowercaseSearch = search.split(' ')[0].toLowerCase();
+    let diffCol = undefined;
+    if (diffArchiveId) {
+        diffCol = <th>Modification</th>;
+    }
     return (
         <Table striped bordered hover size={'sm'} responsive>
             <thead>
@@ -14,6 +18,7 @@
                 <th>Size</th>
                 <th>Mode</th>
                 <th>Modified time</th>
+                {diffCol}
             </tr>
             </thead>
             <tbody>
diff --git a/borgbutler-webapp/src/css/my-style.css b/borgbutler-webapp/src/css/my-style.css
index f145066..f9e0c7b 100644
--- a/borgbutler-webapp/src/css/my-style.css
+++ b/borgbutler-webapp/src/css/my-style.css
@@ -359,6 +359,20 @@
     text-align: right;
 }
 
+td.file-removed {
+    text-decoration: line-through;
+    color: red;
+}
+
+td.file-new {
+    text-decoration: underline;
+    font-weight: bold;
+}
+
+td.file-modified {
+    color: red;
+}
+
 /* @media only screen and (max-width: 1050px) {
 	.navbar.navbar-light a.nav-link {
 		font-size: 0.8rem;

--
Gitblit v1.10.0