From 48aa1671aeb78763aad296f77cc902b51577a1c3 Mon Sep 17 00:00:00 2001
From: Kai Reinhard <K.Reinhard@micromata.de>
Date: Sun, 20 Jan 2019 22:04:42 +0000
Subject: [PATCH] Create new repositories...

---
 borgbutler-webapp/src/components/views/repos/CreateRepoPage.jsx |   48 +++++++++++++++++++++++++++++++++++++++---------
 1 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/borgbutler-webapp/src/components/views/repos/CreateRepoPage.jsx b/borgbutler-webapp/src/components/views/repos/CreateRepoPage.jsx
index 0ebe359..54ba401 100644
--- a/borgbutler-webapp/src/components/views/repos/CreateRepoPage.jsx
+++ b/borgbutler-webapp/src/components/views/repos/CreateRepoPage.jsx
@@ -1,7 +1,14 @@
 import React from 'react';
-import {FormGroup} from 'reactstrap';
 import {Link} from 'react-router-dom'
-import {FormButton, FormField, FormLabelInputField} from '../../general/forms/FormComponents';
+import {
+    FormButton,
+    FormField,
+    FormGroup,
+    FormLabel,
+    FormLabelInputField,
+    FormOption,
+    FormSelect
+} from '../../general/forms/FormComponents';
 import I18n from "../../general/translation/I18n";
 import {PageHeader} from "../../general/BootstrapComponents";
 
@@ -10,8 +17,10 @@
     constructor(props) {
         super(props);
         this.handleTextChange = this.handleTextChange.bind(this);
+        this.handleSelectChange = this.handleSelectChange.bind(this);
         this.state = {
-            repoConfig: {}
+            repoConfig: {},
+            mode: 'existingRepo'
         };
     }
 
@@ -20,13 +29,32 @@
         this.setState({repoConfig: {...this.state.repoConfig, [event.target.name]: event.target.value}});
     }
 
+    handleSelectChange = event => {
+        event.preventDefault();
+        this.setState({[event.target.name]: event.target.value});
+    }
+
     render() {
         const repoConfig = this.state.repoConfig;
         return <React.Fragment>
             <PageHeader>
                 Configure new repository
             </PageHeader>
-            <FormGroup>
+            <form>
+                <FormGroup>
+                    <FormLabel length={2}>{'Mode'}</FormLabel>
+                    <FormField length={4}>
+                        <FormSelect
+                            value={this.state.mode}
+                            name={'mode'}
+                            onChange={this.handleSelectChange}
+                            hint={'Do you want to add an already existing Borg repository or do you want to create a new one?'}
+                        >
+                            <FormOption label={'Add existing repo'} value={'existingRepo'}/>
+                            <FormOption label={'Create new repo'} value={'newRepo'}/>
+                        </FormSelect>
+                    </FormField>
+                </FormGroup>
                 <FormLabelInputField label={'Display name'} fieldLength={12}
                                      name={'displayName'} value={repoConfig.displayName}
                                      onChange={this.handleTextChange}
@@ -55,13 +83,15 @@
                                 hintKey="configuration.save.hint"><I18n name={'common.save'}/>
                     </FormButton>
                 </FormField>
-            </FormGroup>
+            </form>
             <code>
-                <h2>Please note:</h2>
+                <h2> Please
+                    note:</h2>
                 <ul>
-                    <li>Not yet implemented.</li>
-                    <li>This page is under construction.</li>
-                    <li>Please add configuration of repository manually in borg butler json config-file.</li>
+                    <li> Not yet implemented.</li>
+                    <li> This page is under construction.</li>
+                    <li> Please add configuration of repository manually in borg butler json config - file.
+                    </li>
                 </ul>
             </code>
         </React.Fragment>;

--
Gitblit v1.10.0