Implement new fling modal

When clicking New in the navbar a modal pops up for creating a new fling.

service/fling/src/main/java/net/friedl/fling/controller/FlingController.java

@@ -34,8 +34,8 @@ public class FlingController {
     }
 
     @PostMapping("/fling")
-    public void postFling(@RequestBody FlingDto flingDto) {
+    public Long postFling(@RequestBody FlingDto flingDto) {
-        flingService.createFling(flingDto);
+        return flingService.createFling(flingDto);
     }
 
     @PutMapping("/fling/{flingId}")

service/fling/src/main/java/net/friedl/fling/service/FlingService.java

@@ -42,13 +42,14 @@ public class FlingService {
         return flingMapper.map(flingRepository.findAll());
     }
 
-    public void createFling(FlingDto flingDto) {
+    public Long createFling(FlingDto flingDto) {
         if (!StringUtils.hasText(flingDto.getShareUrl())) {
             flingDto.setShareUrl(generateShareUrl());
         }
 
         var flingEntity = flingMapper.map(flingDto);
-        flingRepository.save(flingEntity);
+        flingEntity = flingRepository.save(flingEntity);
+        return flingEntity.getId();
     }
 
     public Boolean existsShareUrl(String shareUrl) {

web/fling/src/components/admin/Fling.jsx

@@ -13,12 +13,11 @@ export default function Fling() {
     return(
         <div>
           <Navbar />
+
           <div className="container">
             <div className="columns mt-2">
               <div className="column col-sm-12 col-lg-3 col-2"> <FlingList activeFling={fling} /> </div>
-              <div className="column col-sm-12">
+              <div className="column col-sm-12"><FlingContent activeFling={fling} /></div>
-                  <FlingContent activeFling={fling} />
-              </div>
             </div>
           </div>
         </div>

web/fling/src/components/admin/Navbar.jsx

@@ -1,12 +1,23 @@
 import log from 'loglevel';
-import React from 'react';
+import React, {useState} from 'react';
 
+import New from './New';
 import request from '../../util/request';
-
 import send from '../resources/send.svg';
 
 export default function Navbar() {
+    let [newModalActive, setNewModalActive] = useState(false);
+
+    function handleOnClick(ev) {
+        setNewModalActive(true);
+    }
+
+    function closeNewModal() {
+        setNewModalActive(false);
+    }
+
     return (
+        <>
           <header className="navbar">
             <section className="navbar-section">
               <a href="/admin" className="navbar-brand">
@@ -21,9 +32,12 @@ export default function Navbar() {
               </div>
             </section>
             <section className="navbar-section navbar-control">
-            <button className="btn btn-sm btn-link"><i className="icon icon-plus"/> New</button>
+              <button className="btn btn-sm btn-link" onClick={handleOnClick}><i className="icon icon-plus"/> New</button>
               <a className="btn btn-sm btn-link" href="/admin/login"><i className="icon icon-shutdown"/> Logout</a>
             </section>
           </header>
+
+          <New active={newModalActive} closeModalFn={closeNewModal} />
+        </>
     );
 }

web/fling/src/components/admin/New.jsx

@@ -0,0 +1,241 @@
+import log from 'loglevel';
+import React, {useState, useEffect, useRef} from 'react';
+
+import {flingClient} from '../../util/flingclient';
+
+export default function New(props) {
+    let defaultState = () => ({name: "", authCode: "",
+                               sharing: {directDownload: true, allowUpload: false, shared: true, shareUrl: ""},
+                               expiration: {}});
+
+    let [fling, setFling] = useState(defaultState());
+    let [shareUrlUnique, setShareUrlUnique] = useState(true);
+
+    function toggleSharing(ev) {
+        let f = {...fling};
+        let s = {...fling.sharing};
+
+        if(ev.currentTarget.id === "direct-download") {
+            if(ev.currentTarget.checked) {
+                s.directDownload = true;
+                s.shared = true;
+                s.allowUpload = false;
+            } else {
+                s.directDownload = false;
+            }
+        } else if(ev.currentTarget.id === "allow-upload") {
+            if(ev.currentTarget.checked) {
+                s.allowUpload = true;
+                s.shared = true;
+                s.directDownload = false;
+            } else {
+                s.allowUpload = false;
+            }
+        } else if(ev.currentTarget.id === "shared") {
+            if(!ev.currentTarget.checked) {
+                s.allowUpload = s.directDownload = s.shared = false;
+            } else {
+                s.shared = true;
+            }
+        }
+
+        f.sharing = s;
+
+        setFling(f);
+    }
+
+    function handleClose(ev) {
+        props.closeModalFn();
+    }
+
+    function setShareUrl(ev) {
+        let f = {...fling};
+        let s = {...fling.sharing}; //TODO: expiration is not cloned
+        let value = ev.currentTarget.value;
+
+        if(!value) {
+            setShareUrlUnique(false);
+            s.shareUrl = value;
+            f.sharing = s;
+            setFling(f);
+            return;
+        }
+
+        flingClient.getFlingByShareId(ev.currentTarget.value)
+            .then(result => {
+                if(!result) {
+                    setShareUrlUnique(true);
+                } else {
+                    setShareUrlUnique(false);
+                }
+
+                s.shareUrl = value;
+                f.sharing = s;
+                setFling(f);
+            });
+    }
+
+    function setName(ev) {
+        let f = {...fling};
+        let value = ev.currentTarget.value;
+
+        f.name = value;
+        setFling(f);
+    }
+
+    function setExpirationType(ev) {
+        let f = {...fling};
+        let e = {...fling.expiration}; //TODO: sharing is not cloned
+        let value = ev.currentTarget.value;
+
+        if(value === "never") {
+            e = {};
+        } else {
+            e.type = value;
+            e.value = "";
+        }
+
+        f.expiration = e;
+        setFling(f);
+    }
+
+    function setExpirationValue(ev) {
+        let f = {...fling};
+        let e = {...fling.expiration}; //TODO: sharing is not cloned
+        let value = e.type === "time" ? ev.currentTarget.valueAsNumber: ev.currentTarget.value;
+
+        e.value = value;
+
+        f.expiration = e;
+        setFling(f);
+    }
+
+    function formatExpirationTime() {
+        if (!fling.expiration || !fling.expiration.value || fling.expiration.type !== "time")
+            return "";
+
+
+        let date = new Date(fling.expiration.value);
+        let fmt = date.toISOString().split("T")[0];
+        return fmt;
+    }
+
+    function setAuthCode(ev) {
+        let f = {...fling};
+        let value = ev.currentTarget.value;
+
+        f.authCode = value;
+        setFling(f);
+    }
+
+    function handleSubmit(ev) {
+        ev.preventDefault();
+        log.info("Creating new filing");
+        log.info(fling);
+        flingClient.postFling(fling);
+        handleClose();
+    }
+
+    return(
+        <div className={`modal ${props.active ? "active": ""}`}>
+          <div className="modal-overlay" aria-label="Close" onClick={handleClose}></div>
+          <div className="modal-container">
+            <div className="modal-header">
+              <div className="modal-title h5">New Fling</div>
+            </div>
+            <div className="modal-body">
+              <form className="form-horizontal" onSubmit={handleSubmit}>
+                <div className="form-group">
+                  <div className="col-3 col-sm-12">
+                    <label className="form-label" htmlFor="input-name">Name</label>
+                  </div>
+                  <div className="col-9 col-sm-12">
+                    <input className="form-input" type="text" id="input-name" value={fling.name} onChange={setName}/>
+                  </div>
+                </div>
+                <div className="form-group">
+                  <div className="col-3 col-sm-12">
+                    <label className="form-label" htmlFor="input-share-url">Share URL</label>
+                  </div>
+                  <div className="col-9 col-sm-12">
+                    <input className="form-input" type="text" id="input-share-url" value={fling.sharing.shareUrl} onChange={setShareUrl} />
+                    <i className={`icon icon-cross text-error ${shareUrlUnique ? "d-hide": "d-visible"}`} />
+                  </div>
+                </div>
+
+                <div className="form-group">
+                  <div className="col-3 col-sm-12">
+                    <label className="form-label" htmlFor="input-passcode">Passcode</label>
+                  </div>
+                  <div className="col-9 col-sm-12">
+                    <div className="input-group">
+                      <input className="form-input" type="text" value={fling.authCode} onChange={setAuthCode} />
+                      <label className="form-switch ml-2 tooltip tooltip-left" data-tooltip={fling.authCode ? "Clear passcode to\ndisable protection": "Set passcode to\nenable protection"} >
+                        <input type="checkbox" checked={!!fling.authCode} readOnly />
+                        <i className="form-icon" /> Protected
+                      </label>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="form-group">
+                  <div className="col-3 col-sm-12">
+                    <label className="form-label">Expiration</label>
+                  </div>
+                  <div className="col-9 col-sm-12">
+                    <div className="form-group">
+                      <select className="form-select" value={fling.expiration.type} onChange={setExpirationType}>
+                        <option value="never">Never</option>
+                        <option value="time">Date</option>
+                        <option value="clicks">Clicks</option>
+                      </select>
+                    </div>
+
+                    <div className={fling.expiration.type === "clicks" ? "d-visible": "d-hide"}>
+                      <div className="input-group">
+                        <span className="input-group-addon">Expire after</span>
+                        <input className="form-input" type="number" value={fling.expiration.value || ""} onChange={setExpirationValue} />
+                        <span className="input-group-addon">Clicks</span>
+                      </div>
+                    </div>
+
+                    <div className={fling.expiration.type === "time" ? "d-visible": "d-hide"}>
+                      <div className="input-group">
+                        <span className="input-group-addon">Expire after</span>
+                        <input className="form-input" type="date" value={formatExpirationTime()} onChange={setExpirationValue} />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="form-group">
+                  <div className="col-3 col-sm-12">
+                    <label className="form-label">Settings</label>
+                  </div>
+                  <div className="col-9 col-sm-12">
+
+                    <label className="form-switch form-inline">
+                      <input type="checkbox" id="shared" checked={fling.sharing.shared} onChange={toggleSharing}/>
+                      <i className="form-icon" /> Shared
+                    </label>
+                    <label className="form-switch form-inline">
+                      <input type="checkbox" id="allow-upload" checked={fling.sharing.allowUpload} onChange={toggleSharing}/>
+                      <i className="form-icon" /> Uploads
+                    </label>
+                    <label className="form-switch form-inline">
+                      <input type="checkbox" id="direct-download" checked={fling.sharing.directDownload} onChange={toggleSharing}/>
+                      <i className="form-icon" /> Direct Download
+                    </label>
+                  </div>
+                </div>
+
+                <div className="float-right">
+                  <button className="btn btn-secondary mr-2" onClick={handleClose}>Cancel</button>
+                  <input type="submit" className="btn btn-primary" value="Save" />
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+    );
+}