From 5edaa48bde3c0f7455a44bbd5d5cb539a7fd1a7f Mon Sep 17 00:00:00 2001
From: Kai Reinhard <K.Reinhard@micromata.de>
Date: Wed, 09 Jan 2019 22:58:41 +0000
Subject: [PATCH] Diff mode: Supports now download of both versions...

---
 borgbutler-webapp/src/components/views/archives/FileListEntry.jsx |   54 ++++++++++++++++++++++-----
 borgbutler-webapp/src/components/views/archives/FileListPanel.jsx |    6 +-
 borgbutler-webapp/src/components/views/archives/FileListTable.jsx |    5 +-
 borgbutler-webapp/src/components/views/archives/ArchiveView.jsx   |    2 
 4 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/borgbutler-webapp/src/components/views/archives/ArchiveView.jsx b/borgbutler-webapp/src/components/views/archives/ArchiveView.jsx
index 437a84c..3a32ffc 100644
--- a/borgbutler-webapp/src/components/views/archives/ArchiveView.jsx
+++ b/borgbutler-webapp/src/components/views/archives/ArchiveView.jsx
@@ -99,7 +99,7 @@
                     <TabPane tabId={'1'}>
                         <FileListPanel
                             repoId={this.state.repoId}
-                            archiveId={archive.id}
+                            archive={archive}
                             archiveShortInfoList={archive.archiveShortInfoList}
                         />
                     </TabPane>
diff --git a/borgbutler-webapp/src/components/views/archives/FileListEntry.jsx b/borgbutler-webapp/src/components/views/archives/FileListEntry.jsx
index f4eda3d..0078c3e 100644
--- a/borgbutler-webapp/src/components/views/archives/FileListEntry.jsx
+++ b/borgbutler-webapp/src/components/views/archives/FileListEntry.jsx
@@ -2,19 +2,24 @@
 import PropTypes from 'prop-types';
 import Highlight from 'react-highlighter';
 import {Button, UncontrolledTooltip} from 'reactstrap';
-import {IconCheck, IconDownload} from '../../general/IconComponents';
+import {IconBan, IconCheck, IconDownload} from '../../general/IconComponents';
 import {getResponseHeaderFilename, getRestServiceUrl, humanFileSize} from '../../../utilities/global';
 import fileDownload from 'js-file-download';
 
 class FileListEntry extends React.Component {
 
     state = {
-        downloaded: false
+        thisDownloaded: false,
+        otherDownloaded: false
     };
 
-    download(archiveId, fileNumber) {
+    download(archiveId, fileNumber, thisDownload) {
         let filename;
-        this.setState({downloaded: true});
+        if (thisDownload) {
+            this.setState({thisDownloaded: true});
+        } else {
+            this.setState({otherDownloaded: true});
+        }
         fetch(getRestServiceUrl('archives/restore', {
             archiveId: archiveId,
             fileNumber: fileNumber
@@ -42,7 +47,6 @@
 
     render = () => {
         const entry = this.props.entry;
-        let downloadArchiveId = this.props.archiveId;
         let displayPath = entry.displayPath;
         let pathCss = 'tt';
 
@@ -61,14 +65,46 @@
         let mtimeCss = 'tt';
         let mtimeTooltip = undefined;
         let mtimeId = undefined;
+        let iconBan = <div className={'btn'}><IconBan/></div>;
+        let iconCheck = <div className={'btn'}><IconCheck/></div>;
+
+        let icon1 = iconCheck;
+        let icon1Tooltip = '';
+        if (!this.state.thisDownloaded) {
+            const icon1Id = `icon1-${entry.fileNumber}`;
+            icon1 = <div id={icon1Id} className={'btn'}
+                         onClick={() => this.download(this.props.archive.id, entry.fileNumber, true)}>
+                <IconDownload/></div>;
+            icon1Tooltip = <UncontrolledTooltip target={icon1Id}>
+                {this.props.archive.time}
+            </UncontrolledTooltip>;
+        }
+        let icon2 = '';
+        let icon2Tooltip = '';
+        if (this.props.diffArchiveId) {
+            icon2 = iconCheck;
+            if (!this.state.otherDownloaded) {
+                const icon2Id = `icon2-${entry.fileNumber}`;
+                icon2 =
+                    <div id={icon2Id} className={'btn'}
+                         onClick={() => this.download(this.props.diffArchiveId, entry.fileNumber, false)}>
+                        <IconDownload/></div>;
+                icon2Tooltip = <UncontrolledTooltip target={icon2Id}>
+                    other
+                </UncontrolledTooltip>;
+            }
+        }
         if (entry.diffStatus === 'NEW') {
             pathCss = 'tt file-new';
             pathtooltipText = 'NEW';
+            icon2 = iconBan;
+            icon2Tooltip = '';
         } else if (entry.diffStatus === 'REMOVED') {
             pathCss = 'tt file-removed';
             // Download removed files from other archive.
-            downloadArchiveId = this.props.diffArchiveId;
             pathtooltipText = 'REMOVED';
+            icon1 = iconBan;
+            icon1Tooltip = '';
         } else if (entry.diffStatus === 'MODIFIED') {
             if (entry.differences) {
                 pathCss = 'tt file-modified';
@@ -113,16 +149,13 @@
         } else {
             path = <Highlight search={this.props.search} id={pathId}>{displayPath}</Highlight>;
         }
-        let icon = entry.fileNumber >= 0 ? (this.state.downloaded ? <IconCheck/> :
-            <div className={'btn'} onClick={() => this.download(downloadArchiveId, entry.fileNumber)}>
-                <IconDownload/></div>) : '';
         return (
             <tr>
                 <td className={pathCss}>
                     {path}{pathTooltip}
                 </td>
                 <td className={'tt'} style={{textAlign: 'center'}}>
-                    {icon}
+                    {icon1}{icon1Tooltip} {icon2}{icon2Tooltip}
                 </td>
                 <td className={sizeCss} style={{textAlign: 'center'}}>
                     <span id={sizeId}>{humanFileSize(entry.size, true, true)}</span>{sizeTooltip}
@@ -149,6 +182,7 @@
     entry: PropTypes.shape({}).isRequired,
     search: PropTypes.string,
     mode: PropTypes.string,
+    diffArchiveId: PropTypes.string,
     changeCurrentDirectory: PropTypes.func.isRequired
 };
 
diff --git a/borgbutler-webapp/src/components/views/archives/FileListPanel.jsx b/borgbutler-webapp/src/components/views/archives/FileListPanel.jsx
index af47cc7..3f8b3b7 100644
--- a/borgbutler-webapp/src/components/views/archives/FileListPanel.jsx
+++ b/borgbutler-webapp/src/components/views/archives/FileListPanel.jsx
@@ -51,7 +51,7 @@
             failed: false
         });
         fetch(getRestServiceUrl('archives/filelist', {
-            archiveId: this.props.archiveId,
+            archiveId: this.props.archive.id,
             diffArchiveId: this.state.filter.diffArchiveId,
             force: force,
             searchString: this.state.filter.search,
@@ -128,12 +128,12 @@
                             event.preventDefault();
                             this.fetchArchiveFileList();
                         }}
-                        currentArchiveId={this.props.archiveId}
+                        currentArchiveId={this.props.archive.id}
                         archiveShortInfoList={this.props.archiveShortInfoList}
                     />
                     {breadcrumb}
                     <FileListTable
-                        archiveId={this.props.archiveId}
+                        archive={this.props.archive}
                         diffArchiveId={this.state.filter.diffArchiveId}
                         entries={this.state.fileList}
                         search={this.state.filter.search}
diff --git a/borgbutler-webapp/src/components/views/archives/FileListTable.jsx b/borgbutler-webapp/src/components/views/archives/FileListTable.jsx
index 8b03adc..710ffa6 100644
--- a/borgbutler-webapp/src/components/views/archives/FileListTable.jsx
+++ b/borgbutler-webapp/src/components/views/archives/FileListTable.jsx
@@ -3,7 +3,7 @@
 import {Table} from 'reactstrap';
 import FileListEntry from './FileListEntry';
 
-function FileListTable({archiveId, diffArchiveId, entries, search, mode, changeCurrentDirectory}) {
+function FileListTable({archive, diffArchiveId, entries, search, mode, changeCurrentDirectory}) {
     const lowercaseSearch = search.split(' ')[0].toLowerCase();
     return (
         <Table striped bordered hover size={'sm'} responsive>
@@ -19,7 +19,7 @@
             <tbody>
             {entries
                 .map((entry, index) => <FileListEntry
-                    archiveId={archiveId}
+                    archive={archive}
                     diffArchiveId={diffArchiveId}
                     entry={entry}
                     search={lowercaseSearch}
@@ -33,7 +33,6 @@
 }
 
 FileListTable.propTypes = {
-    archiveId: PropTypes.string,
     diffArchiveId: PropTypes.string,
     entries: PropTypes.array,
     search: PropTypes.string,

--
Gitblit v1.10.0