Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web

11 files changed, 114 insertions, 75 deletions

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index b12ee3faa..61ae69179 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -31,8 +31,8 @@
 }
 
 .contextMenu-item {
-    width: 11vw; //10vw
-    height: 2.5vh; //2vh
+    // width: 11vw; //10vw
+    height: 30px; //2vh
     background: #DDDDDD;
     display: flex; //comment out to allow search icon to be inline with search text
     justify-content: left;
@@ -48,9 +48,9 @@
     border-style: none;
     border-color: $intermediate-color; //  rgb(187, 186, 186);
     border-bottom-style: solid;
-    padding: 10px 0px 10px 0px;
+    // padding: 10px 0px 10px 0px;
     white-space: nowrap;
-    font-size: 1vw;
+    font-size: 20px;
 }
 
 .contextMenu-item:hover {
@@ -59,13 +59,14 @@
 }
 
 .contextMenu-description {
-    font-size: 1vw;
+    font-size: 20px;
     text-align: left;
-    width: 8vw;
     display: inline; //need this?
 }
 
 .icon-background {
     background-color: #DDDDDD;
-    margin-right: 2px;
+    width: 35px;
+    text-align: center;
+    font-size: 22px;
 }
\ No newline at end of file
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 84c17a642..542d259d6 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -92,7 +92,7 @@ export class ContextMenu extends React.Component {
                     <span className="icon-background">
                         <FontAwesomeIcon icon="search" size="lg" />
                     </span>
-                    <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange} />
+                    <input className="contextMenu-item contextMenu-description" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange} />
                 </span>
                 {this._items.filter(prop => prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1).
                     map(prop => <ContextMenuItem {...prop} key={prop.description} />)}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 1d491d11f..438607157 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -220,7 +220,7 @@ export class MainView extends React.Component {
         let videourl = "http://techslides.com/demos/sample-videos/small.mp4";
 
         let addTextNode = action(() => Docs.TextDocument({ borderRounding: -1, width: 200, height: 200, title: "a text note" }));
-        let addColNode = action(() => Docs.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" }));
+        let addColNode = action(() => Docs.FreeformDocument([], { width: this.pwidth * .7, height: this.pheight, title: "a freeform collection" }));
         let addSchemaNode = action(() => Docs.SchemaDocument(["title"], [], { width: 200, height: 200, title: "a schema collection" }));
         let addTreeNode = action(() => CurrentUserUtils.UserDocument);
         //let addTreeNode = action(() => Docs.TreeDocument([CurrentUserUtils.UserDocument], { width: 250, height: 400, title: "Library:" + CurrentUserUtils.email, dropAction: "alias" }));
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 4a21e4465..c4e72b23a 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -129,7 +129,7 @@ export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) {
                 options.dropAction = "copy";
             }
             if (type.indexOf("html") !== -1) {
-                if (path.includes('localhost')) {
+                if (path.includes(window.location.hostname)) {
                     let s = path.split('/');
                     let id = s[s.length - 1];
                     DocServer.GetRefField(id).then(field => {
diff --git a/src/client/views/collections/ParentDocumentSelector.scss b/src/client/views/collections/ParentDocumentSelector.scss
index 1ab12bb72..2dd3e49f2 100644
--- a/src/client/views/collections/ParentDocumentSelector.scss
+++ b/src/client/views/collections/ParentDocumentSelector.scss
@@ -1,10 +1,14 @@
 .PDS-flyout {
     position: absolute;
     z-index: 9999;
-    background-color: #d3d3d3;
+    background-color: #eeeeee;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     min-width: 150px;
     color: black;
+    top: 12px;
+
+    padding: 10px;
+    border-radius: 3px;
 
     hr {
         height: 1px;
diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
index e6eb51a0c..f11af04a3 100644
--- a/src/client/views/collections/ParentDocumentSelector.tsx
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -50,6 +50,7 @@ export class SelectorContextMenu extends React.Component<SelectorProps> {
     render() {
         return (
             <>
+                <p>Contexts:</p>
                 {this._docs.map(doc => <p><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></p>)}
                 {this._otherDocs.length ? <hr></hr> : null}
                 {this._otherDocs.map(doc => <p><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></p>)}
@@ -76,13 +77,13 @@ export class ParentDocSelector extends React.Component<SelectorProps> {
         let flyout;
         if (this.hover) {
             flyout = (
-                <div className="PDS-flyout">
+                <div className="PDS-flyout" title=" ">
                     <SelectorContextMenu {...this.props} />
                 </div>
             );
         }
         return (
-            <span style={{ position: "relative", display: "inline-block" }}
+            <span style={{ position: "relative", display: "inline-block", paddingLeft: "5px", paddingRight: "5px" }}
                 onMouseEnter={this.onMouseEnter}
                 onMouseLeave={this.onMouseLeave}>
                 <p>^</p>
diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
index 65305dd04..eea69b81c 100644
--- a/src/mobile/ImageUpload.scss
+++ b/src/mobile/ImageUpload.scss
@@ -17,14 +17,18 @@
         font-size: 3em;
     }
 
-    .upload_label {
-        width: 80vw;
-        height: 40vh;
+    .input_file {
+        display: none;
+    }
+
+    .upload_label,
+    .upload_button {
         background: $dark-color;
-        font-size: 10vw;
+        font-size: 500%;
         font-family: $sans-serif;
         text-align: center;
-        padding-top: 20vh;
+        padding: 5vh;
+        margin-bottom: 20px;
         color: white;
     }
 }
\ No newline at end of file
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 84bbfeb14..bfc1738fc 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -9,6 +9,8 @@ import { Opt, Doc } from '../new_fields/Doc';
 import { Cast } from '../new_fields/Types';
 import { listSpec } from '../new_fields/Schema';
 import { List } from '../new_fields/List';
+import { observer } from 'mobx-react';
+import { observable } from 'mobx';
 
 
 
@@ -19,62 +21,91 @@ import { List } from '../new_fields/List';
 //         imgInput.click();
 //     }
 // }
+const inputRef = React.createRef<HTMLInputElement>();
 
-const onFileLoad = async (file: React.ChangeEvent<HTMLInputElement>) => {
-    file.persist();
-    await Docs.initProtos();
-    let imgPrev = document.getElementById("img_preview");
-    if (imgPrev) {
-        let files: FileList | null = file.target.files;
-        if (files && files.length !== 0) {
-            console.log(files[0]);
-            const name = files[0].name;
-            let formData = new FormData();
-            formData.append("file", files[0]);
+@observer
+class Uploader extends React.Component {
+    @observable
+    error: string = "";
+    @observable
+    status: string = "";
 
-            const upload = window.location.origin + "/upload";
-            const res = await fetch(upload, {
-                method: 'POST',
-                body: formData
-            });
-            const json = await res.json();
-            json.map(async (file: any) => {
-                let path = window.location.origin + file;
-                var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200, title: name });
+    onClick = async () => {
+        try {
+            this.status = "initializing protos";
+            await Docs.initProtos();
+            let imgPrev = document.getElementById("img_preview");
+            if (imgPrev) {
+                let files: FileList | null = inputRef.current!.files;
+                if (files && files.length !== 0) {
+                    console.log(files[0]);
+                    const name = files[0].name;
+                    let formData = new FormData();
+                    formData.append("file", files[0]);
 
-                const res = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId));
-                if (!res) {
-                    throw new Error("No user id returned");
-                }
-                const field = await DocServer.GetRefField(res);
-                let pending: Opt<Doc>;
-                if (field instanceof Doc) {
-                    pending = await Cast(field.optionalRightCollection, Doc);
-                }
-                if (pending) {
-                    const data = await Cast(pending.data, listSpec(Doc));
-                    if (data) {
-                        data.push(doc);
-                    } else {
-                        pending.data = new List([doc]);
-                    }
-                }
-            });
+                    const upload = window.location.origin + "/upload";
+                    this.status = "uploading image";
+                    const res = await fetch(upload, {
+                        method: 'POST',
+                        body: formData
+                    });
+                    this.status = "upload image, getting json";
+                    const json = await res.json();
+                    json.map(async (file: any) => {
+                        let path = window.location.origin + file;
+                        var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200, title: name });
+
+                        this.status = "getting user document";
+
+                        const res = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId));
+                        if (!res) {
+                            throw new Error("No user id returned");
+                        }
+                        const field = await DocServer.GetRefField(res);
+                        let pending: Opt<Doc>;
+                        if (field instanceof Doc) {
+                            pending = await Cast(field.optionalRightCollection, Doc);
+                        }
+                        if (pending) {
+                            this.status = "has pending docs";
+                            const data = await Cast(pending.data, listSpec(Doc));
+                            if (data) {
+                                data.push(doc);
+                            } else {
+                                pending.data = new List([doc]);
+                            }
+                            this.status = "finished";
+                        }
+                    });
 
-            // console.log(window.location.origin + file[0])
+                    // console.log(window.location.origin + file[0])
 
-            //imgPrev.setAttribute("src", window.location.origin + files[0].name)
+                    //imgPrev.setAttribute("src", window.location.origin + files[0].name)
+                }
+            }
+        } catch (error) {
+            this.error = JSON.stringify(error);
         }
     }
-};
+
+    render() {
+        return (
+            <div className="imgupload_cont">
+                <label htmlFor="input_image_file" className="upload_label">Choose an Image</label>
+                <input type="file" accept="image/*" className="input_file" id="input_image_file" ref={inputRef}></input>
+                <button onClick={this.onClick} className="upload_button">Upload</button>
+                <img id="img_preview" src=""></img>
+                <p>{this.status}</p>
+                <p>{this.error}</p>
+            </div>
+        );
+    }
+
+}
+
 
 ReactDOM.render((
-    <div className="imgupload_cont">
-        {/* <button className = "button_file"  = {onPointerDown}> Open Image </button> */}
-        <label htmlFor="input_image_file" className="upload_label">Upload an Image</label>
-        <input type="file" accept="image/*" onChange={onFileLoad} className="input_file" id="input_image_file"></input>
-        <img id="img_preview" src=""></img>
-        <div id="message" />
-    </div>),
+    <Uploader />
+),
     document.getElementById('root')
 );
\ No newline at end of file
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index e85aa2c74..add347a88 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -68,7 +68,7 @@ export class CurrentUserUtils {
             const extraSchemas = Cast(CurrentUserUtils.UserDocument.DBSchemas, listSpec("string"), []);
             let extras = await Promise.all(extraSchemas.map(sc => Gateway.Instance.GetSchema("", sc)));
             let catprom = CurrentUserUtils.SetNorthstarCatalog(await Gateway.Instance.GetCatalog(), extras);
-            if (catprom) await Promise.all(catprom);
+            // if (catprom) await Promise.all(catprom);
         } catch (e) {
 
         }
diff --git a/src/server/index.ts b/src/server/index.ts
index deb3c1bd6..fd66c90b4 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -172,9 +172,9 @@ const pngTypes = [".png", ".PNG"];
 const jpgTypes = [".jpg", ".JPG", ".jpeg", ".JPEG"];
 const uploadDir = __dirname + "/public/files/";
 // SETTERS
-addSecureRoute(
-    Method.POST,
-    (user, res, req) => {
+app.post(
+    RouteStore.upload,
+    (req, res) => {
         let form = new formidable.IncomingForm();
         form.uploadDir = uploadDir;
         form.keepExtensions = true;
@@ -212,9 +212,7 @@ addSecureRoute(
             }
             res.send(names);
         });
-    },
-    undefined,
-    RouteStore.upload
+    }
 );
 
 addSecureRoute(
diff --git a/src/server/remapUrl.ts b/src/server/remapUrl.ts
index 90044738f..6f4d6642f 100644
--- a/src/server/remapUrl.ts
+++ b/src/server/remapUrl.ts
@@ -33,7 +33,7 @@ async function update() {
                 if (url.href.includes("azure")) {
                     dynfield = true;
 
-                    update.$set = { ["fields." + key]: { url: `${url.protocol}//localhost:1050${url.pathname}`, __type: "image" } };
+                    update.$set = { ["fields." + key + ".url"]: `${url.protocol}//localhost:1050${url.pathname}` };
                 }
             }
         }
@@ -47,7 +47,7 @@ async function update() {
         return new Promise(res => Database.Instance.update(doc[0], doc[1], () => {
             console.log("wrote " + JSON.stringify(doc[1]));
             res();
-        }));
+        }, false, "newDocuments"));
     }));
     console.log("Done");
     // await Promise.all(updates.map(update => {