From c541acbdfc7ec66522409beeebce5f33b340273f Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <muhammedamoush@gmail.com>
Date: Tue, 4 Jun 2019 14:07:20 -0400
Subject: move computers

---
 src/client/views/PresentationView.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'src/client/views/PresentationView.tsx')

diff --git a/src/client/views/PresentationView.tsx b/src/client/views/PresentationView.tsx
index 9d5798ff1..b6e0f0889 100644
--- a/src/client/views/PresentationView.tsx
+++ b/src/client/views/PresentationView.tsx
@@ -58,6 +58,12 @@ class PresentationViewList extends React.Component<PresListProps> {
                     {`${index + 1}. ${title}`}
                 </strong>
                 <button className="presentation-icon" onClick={e => { this.props.deleteDocument(index); e.stopPropagation(); }}>X</button>
+                <br></br>
+                <button className="presentation-interaction">A</button>
+                <button className="presentation-interaction">B</button>
+                <button className="presentation-interaction">C</button>
+                <button className="presentation-interaction">D</button>
+
             </div>
         );
 
-- 
cgit v1.2.3-70-g09d2


From 464096297d34bb824ed665aa50dfb58f268c1d12 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Tue, 4 Jun 2019 20:01:59 -0400
Subject: BUttons in Presentation CSSed and grouping up insertion done, removal
 almost done

---
 src/client/views/MainView.tsx                      |   2 +-
 src/client/views/PresentationView.scss             |  83 ---------
 src/client/views/PresentationView.tsx              | 165 -----------------
 src/client/views/nodes/DocumentView.tsx            |   2 +-
 .../views/presentationview/PresentationElement.tsx | 115 ++++++++++++
 .../views/presentationview/PresentationView.scss   |  88 +++++++++
 .../views/presentationview/PresentationView.tsx    | 203 +++++++++++++++++++++
 7 files changed, 408 insertions(+), 250 deletions(-)
 delete mode 100644 src/client/views/PresentationView.scss
 delete mode 100644 src/client/views/PresentationView.tsx
 create mode 100644 src/client/views/presentationview/PresentationElement.tsx
 create mode 100644 src/client/views/presentationview/PresentationView.scss
 create mode 100644 src/client/views/presentationview/PresentationView.tsx

(limited to 'src/client/views/PresentationView.tsx')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index a093ffdec..c98e6e8fb 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -14,7 +14,7 @@ import { Docs } from '../documents/Documents';
 import { SetupDrag, DragManager } from '../util/DragManager';
 import { Transform } from '../util/Transform';
 import { UndoManager } from '../util/UndoManager';
-import { PresentationView } from './PresentationView';
+import { PresentationView } from './presentationview/PresentationView';
 import { CollectionDockingView } from './collections/CollectionDockingView';
 import { ContextMenu } from './ContextMenu';
 import { DocumentDecorations } from './DocumentDecorations';
diff --git a/src/client/views/PresentationView.scss b/src/client/views/PresentationView.scss
deleted file mode 100644
index 97ce80a02..000000000
--- a/src/client/views/PresentationView.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-.presentationView-cont {
-    position: absolute;
-    background: white;
-    z-index: 1;
-    box-shadow: #AAAAAA .2vw .2vw .4vw;
-    right: 0;
-    top: 0;
-    bottom: 0;
-}
-
-.presentationView-item {
-    padding: 10px;
-    display: inline-block;
-    width: 100%;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    transition: all .1s;
-}
-
-.presentationView-listCont {
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
-.presentationView-item:hover {
-    transition: all .1s;
-    background: #AAAAAA
-}
-
-.presentationView-selected {
-    background: gray;
-}
-
-.presentationView-heading {
-    background: lightseagreen;
-    padding: 10px;
-    display: inline-block;
-    width: 100%;
-}
-
-.presentationView-title {
-    padding-top: 3px;
-    padding-bottom: 3px;
-    font-size: 25px;
-    display: inline-block;
-}
-
-.presentation-icon {
-    float: right;
-}
-
-.presentation-interaction {
-    float: left;
-}
-
-.presentationView-name {
-    font-size: 15px;
-    display: inline-block;
-}
-
-.presentation-button {
-    margin-right: 12.5%;
-    margin-left: 12.5%;
-    width: 25%;
-}
-
-.presentation-buttons {
-    padding: 10px;
-}
-
-.presentation-next:hover {
-    transition: all .1s;
-    background: #AAAAAA
-}
-
-.presentation-back:hover {
-    transition: all .1s;
-    background: #AAAAAA
-}
\ No newline at end of file
diff --git a/src/client/views/PresentationView.tsx b/src/client/views/PresentationView.tsx
deleted file mode 100644
index b6e0f0889..000000000
--- a/src/client/views/PresentationView.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { observer } from "mobx-react";
-import React = require("react");
-import { observable, action, runInAction, reaction } from "mobx";
-import "./PresentationView.scss";
-import { DocumentManager } from "../util/DocumentManager";
-import { Utils } from "../../Utils";
-import { Doc, DocListCast, DocListCastAsync } from "../../new_fields/Doc";
-import { listSpec } from "../../new_fields/Schema";
-import { Cast, NumCast, FieldValue, PromiseValue, StrCast, BoolCast } from "../../new_fields/Types";
-import { Id } from "../../new_fields/FieldSymbols";
-import { List } from "../../new_fields/List";
-import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
-
-export interface PresViewProps {
-    Document: Doc;
-}
-
-interface PresListProps extends PresViewProps {
-    deleteDocument(index: number): void;
-    gotoDocument(index: number): void;
-}
-
-
-@observer
-/**
- * Component that takes in a document prop and a boolean whether it's collapsed or not.
- */
-class PresentationViewList extends React.Component<PresListProps> {
-
-
-    /**
-     * Renders a single child document. It will just append a list element.
-     * @param document The document to render.
-     */
-    renderChild = (document: Doc, index: number) => {
-        let title = document.title;
-
-        //to get currently selected presentation doc
-        let selected = NumCast(this.props.Document.selectedDoc, 0);
-
-        let className = "presentationView-item";
-        if (selected === index) {
-            //this doc is selected
-            className += " presentationView-selected";
-        }
-        let onEnter = (e: React.PointerEvent) => { document.libraryBrush = true; }
-        let onLeave = (e: React.PointerEvent) => { document.libraryBrush = false; }
-        return (
-            <div className={className} key={document[Id] + index}
-                onPointerEnter={onEnter} onPointerLeave={onLeave}
-                style={{
-                    outlineColor: "maroon",
-                    outlineStyle: "dashed",
-                    outlineWidth: BoolCast(document.libraryBrush, false) || BoolCast(document.protoBrush, false) ? `1px` : "0px",
-                }}
-                onClick={e => { this.props.gotoDocument(index); e.stopPropagation(); }}>
-                <strong className="presentationView-name">
-                    {`${index + 1}. ${title}`}
-                </strong>
-                <button className="presentation-icon" onClick={e => { this.props.deleteDocument(index); e.stopPropagation(); }}>X</button>
-                <br></br>
-                <button className="presentation-interaction">A</button>
-                <button className="presentation-interaction">B</button>
-                <button className="presentation-interaction">C</button>
-                <button className="presentation-interaction">D</button>
-
-            </div>
-        );
-
-    }
-
-    render() {
-        const children = DocListCast(this.props.Document.data);
-
-        return (
-            <div className="presentationView-listCont">
-                {children.map(this.renderChild)}
-            </div>
-        );
-    }
-}
-
-
-@observer
-export class PresentationView extends React.Component<PresViewProps>  {
-    public static Instance: PresentationView;
-
-    //observable means render is re-called every time variable is changed
-    @observable
-    collapsed: boolean = false;
-    closePresentation = action(() => this.props.Document.width = 0);
-    next = () => {
-        const current = NumCast(this.props.Document.selectedDoc);
-        this.gotoDocument(current + 1);
-
-    }
-    back = () => {
-        const current = NumCast(this.props.Document.selectedDoc);
-        this.gotoDocument(current - 1);
-    }
-
-    @action
-    public RemoveDoc = (index: number) => {
-        const value = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
-        if (value) {
-            value.splice(index, 1);
-        }
-    }
-
-    public gotoDocument = async (index: number) => {
-        const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
-        if (!list) {
-            return;
-        }
-        if (index < 0 || index >= list.length) {
-            return;
-        }
-
-        this.props.Document.selectedDoc = index;
-        const doc = await list[index];
-        DocumentManager.Instance.jumpToDocument(doc);
-    }
-
-    //initilize class variables
-    constructor(props: PresViewProps) {
-        super(props);
-        PresentationView.Instance = this;
-    }
-
-    /**
-     * Adds a document to the presentation view
-     **/
-    @action
-    public PinDoc(doc: Doc) {
-        //add this new doc to props.Document
-        const data = Cast(this.props.Document.data, listSpec(Doc));
-        if (data) {
-            data.push(doc);
-        } else {
-            this.props.Document.data = new List([doc]);
-        }
-
-        this.props.Document.width = 300;
-    }
-
-    render() {
-        let titleStr = StrCast(this.props.Document.title);
-        let width = NumCast(this.props.Document.width);
-
-        //TODO: next and back should be icons
-        return (
-            <div className="presentationView-cont" style={{ width: width, overflow: "hidden" }}>
-                <div className="presentationView-heading">
-                    <div className="presentationView-title">{titleStr}</div>
-                    <button className='presentation-icon' onClick={this.closePresentation}>X</button>
-                </div>
-                <div className="presentation-buttons">
-                    <button className="presentation-button" onClick={this.back}>back</button>
-                    <button className="presentation-button" onClick={this.next}>next</button>
-                </div>
-                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} />
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 7750b9173..984cac9b9 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -23,7 +23,7 @@ import { CollectionVideoView } from "../collections/CollectionVideoView";
 import { CollectionView } from "../collections/CollectionView";
 import { ContextMenu } from "../ContextMenu";
 import { DocComponent } from "../DocComponent";
-import { PresentationView } from "../PresentationView";
+import { PresentationView } from "../presentationview/PresentationView";
 import { Template } from "./../Templates";
 import { DocumentContentsView } from "./DocumentContentsView";
 import "./DocumentView.scss";
diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
new file mode 100644
index 000000000..02d97ee4d
--- /dev/null
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -0,0 +1,115 @@
+import { observer } from "mobx-react";
+import React = require("react");
+import { Doc } from "../../../new_fields/Doc";
+import { NumCast, BoolCast } from "../../../new_fields/Types";
+import { Id } from "../../../new_fields/FieldSymbols";
+import { observable, action } from "mobx";
+import "./PresentationView.scss";
+
+
+
+interface PresentationElementProps {
+    mainDocument: Doc;
+    document: Doc;
+    index: number;
+    deleteDocument(index: number): void;
+    gotoDocument(index: number): void;
+    groupedMembers: [Doc[]];
+    allListElements: Doc[];
+
+}
+
+@observer
+export default class PresentationElement extends React.Component<PresentationElementProps> {
+
+    @observable selectedButtons: boolean[] = new Array(6);
+
+
+    @action
+    onGroupClick = (document: Doc, index: number, buttonStatus: boolean[] | boolean) => {
+        let p = this.props;
+        if (Array.isArray(buttonStatus)) {
+            if (buttonStatus[5]) {
+                buttonStatus[5] = false;
+                console.log("Reached!");
+                if (index >= 1) {
+                    if (p.groupedMembers[index].length >= 0) {
+                        p.groupedMembers[index].forEach((doc: Doc) => p.groupedMembers[index - 1] = p.groupedMembers[index - 1].slice(p.groupedMembers[index - 1].indexOf(doc), 1));
+                    }
+                }
+            } else {
+                buttonStatus[5] = true;
+                if (index >= 1) {
+                    if (p.groupedMembers[index].length >= 0) {
+                        p.groupedMembers[index].forEach((doc: Doc) => p.groupedMembers[index - 1].push(doc));
+                    }
+                    p.groupedMembers[index - 1].push(document);
+                    //this.onGroupClick()
+                }
+            }
+        } else {
+            if (!buttonStatus) {
+                if (p.groupedMembers[index].length >= 0) {
+                    p.groupedMembers[index].forEach((doc: Doc) => p.groupedMembers[index - 1] = p.groupedMembers[index - 1].slice(p.groupedMembers[index - 1].indexOf(doc), 1));
+                }
+            } else {
+                if (p.groupedMembers[index].length >= 0) {
+                    p.groupedMembers[index].forEach((doc: Doc) => { if (!p.groupedMembers[index - 1].includes(doc)) { p.groupedMembers[index - 1].push(doc); } });
+                }
+                if (!p.groupedMembers[index - 1].includes(document)) {
+                    p.groupedMembers[index - 1].push(document);
+                }
+            }
+        }
+        if (index >= 2) {
+            this.onGroupClick(p.allListElements[index - 1], index - 1, p.groupedMembers[index - 2].length !== 0);
+        }
+
+        p.groupedMembers.forEach((docArray: Doc[], index: number) => console.log("Index: ", index, " size: ", docArray.length));
+        console.log("Group Size: ", p.groupedMembers[index - 1].length);
+    }
+
+
+
+    render() {
+        let p = this.props;
+        let title = p.document.title;
+
+        //to get currently selected presentation doc
+        let selected = NumCast(p.mainDocument.selectedDoc, 0);
+
+        let className = "presentationView-item";
+        if (selected === p.index) {
+            //this doc is selected
+            className += " presentationView-selected";
+        }
+        let onEnter = (e: React.PointerEvent) => { p.document.libraryBrush = true; }
+        let onLeave = (e: React.PointerEvent) => { p.document.libraryBrush = false; }
+        return (
+            <div className={className} key={p.document[Id] + p.index}
+                onPointerEnter={onEnter} onPointerLeave={onLeave}
+                style={{
+                    outlineColor: "maroon",
+                    outlineStyle: "dashed",
+                    outlineWidth: BoolCast(p.document.libraryBrush, false) || BoolCast(p.document.protoBrush, false) ? `1px` : "0px",
+                }}
+                onClick={e => { p.gotoDocument(p.index); e.stopPropagation(); }}>
+                <strong className="presentationView-name">
+                    {`${p.index + 1}. ${title}`}
+                </strong>
+                <button className="presentation-icon" onClick={e => { this.props.deleteDocument(p.index); e.stopPropagation(); }}>X</button>
+                <br></br>
+                <button className={this.selectedButtons[0] ? "presentation-interaction-selected" : "presentation-interaction"}>A</button>
+                <button className={this.selectedButtons[1] ? "presentation-interaction-selected" : "presentation-interaction"}>B</button>
+                <button className={this.selectedButtons[2] ? "presentation-interaction-selected" : "presentation-interaction"}>C</button>
+                <button className={this.selectedButtons[3] ? "presentation-interaction-selected" : "presentation-interaction"}>D</button>
+                <button className={this.selectedButtons[4] ? "presentation-interaction-selected" : "presentation-interaction"}>E</button>
+                <button className={this.selectedButtons[5] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={(e) => {
+                    e.stopPropagation();
+                    this.onGroupClick(p.document, p.index, this.selectedButtons);
+                }}>F</button>
+
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss
new file mode 100644
index 000000000..07c3e69fd
--- /dev/null
+++ b/src/client/views/presentationview/PresentationView.scss
@@ -0,0 +1,88 @@
+.presentationView-cont {
+    position: absolute;
+    background: white;
+    z-index: 1;
+    box-shadow: #AAAAAA .2vw .2vw .4vw;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.presentationView-item {
+    padding: 10px;
+    display: inline-block;
+    width: 100%;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    transition: all .1s;
+}
+
+.presentationView-listCont {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.presentationView-item:hover {
+    transition: all .1s;
+    background: #AAAAAA
+}
+
+.presentationView-selected {
+    background: gray;
+}
+
+.presentationView-heading {
+    background: lightseagreen;
+    padding: 10px;
+    display: inline-block;
+    width: 100%;
+}
+
+.presentationView-title {
+    padding-top: 3px;
+    padding-bottom: 3px;
+    font-size: 25px;
+    display: inline-block;
+}
+
+.presentation-icon {
+    float: right;
+}
+
+.presentation-interaction {
+    float: left;
+}
+
+.presentation-interaction-selected {
+    background: #505050;
+    float: left;
+}
+
+.presentationView-name {
+    font-size: 15px;
+    display: inline-block;
+}
+
+.presentation-button {
+    margin-right: 12.5%;
+    margin-left: 12.5%;
+    width: 25%;
+}
+
+.presentation-buttons {
+    padding: 10px;
+}
+
+.presentation-next:hover {
+    transition: all .1s;
+    background: #AAAAAA
+}
+
+.presentation-back:hover {
+    transition: all .1s;
+    background: #AAAAAA
+}
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
new file mode 100644
index 000000000..5a7d38e28
--- /dev/null
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -0,0 +1,203 @@
+import { observer } from "mobx-react";
+import React = require("react");
+import { observable, action, runInAction, reaction } from "mobx";
+import "./PresentationView.scss";
+import { DocumentManager } from "../../util/DocumentManager";
+import { Utils } from "../../../Utils";
+import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
+import { listSpec } from "../../../new_fields/Schema";
+import { Cast, NumCast, FieldValue, PromiseValue, StrCast, BoolCast } from "../../../new_fields/Types";
+import { Id } from "../../../new_fields/FieldSymbols";
+import { List } from "../../../new_fields/List";
+import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
+import PresentationElement from "./PresentationElement";
+
+export interface PresViewProps {
+    Document: Doc;
+}
+
+interface PresListProps extends PresViewProps {
+    deleteDocument(index: number): void;
+    gotoDocument(index: number): void;
+    groupedMembers: [Doc[]];
+
+}
+
+
+@observer
+/**
+ * Component that takes in a document prop and a boolean whether it's collapsed or not.
+ */
+class PresentationViewList extends React.Component<PresListProps> {
+
+
+    // onGroupClick = (document: Doc, index: number, buttonStatus: boolean[]) => {
+    //     if (buttonStatus[5]) {
+    //         buttonStatus[5] = false;
+    //         if (index >= 1) {
+    //             if (this.groupedMembers[index].length >= 0) {
+    //                 this.groupedMembers[index].forEach((doc: Doc) => this.groupedMembers[index - 1].slice(this.groupedMembers[index - 1].indexOf(doc), 1));
+    //             }
+    //         }
+    //     } else {
+    //         buttonStatus[5] = true;
+    //         console.log("reached!! ", buttonStatus[5]);
+    //         if (index >= 1) {
+    //             if (this.groupedMembers[index].length >= 0) {
+    //                 this.groupedMembers[index].forEach((doc: Doc) => this.groupedMembers[index - 1].push(doc));
+    //             }
+    //             this.groupedMembers[index - 1].push(document);
+    //         }
+    //     }
+    // }
+    @action
+    initializeGroupArrays = (docList: Doc[]) => {
+        docList.forEach((doc: Doc, index: number) => {
+            if (this.props.groupedMembers.length < index + 1) {
+                this.props.groupedMembers[index] = new Array();
+            }
+        });
+    }
+
+    // /**
+    //  * Renders a single child document. It will just append a list element.
+    //  * @param document The document to render.
+    //  */
+    // renderChild = (document: Doc, index: number) => {
+    //     let title = document.title;
+
+    //     //to get currently selected presentation doc
+    //     let selected = NumCast(this.props.Document.selectedDoc, 0);
+
+    //     let className = "presentationView-item";
+    //     if (selected === index) {
+    //         //this doc is selected
+    //         className += " presentationView-selected";
+    //     }
+    //     let selectedButtons: boolean[] = new Array(6);
+    //     let onEnter = (e: React.PointerEvent) => { document.libraryBrush = true; }
+    //     let onLeave = (e: React.PointerEvent) => { document.libraryBrush = false; }
+    //     return (
+    //         <div className={className} key={document[Id] + index}
+    //             onPointerEnter={onEnter} onPointerLeave={onLeave}
+    //             style={{
+    //                 outlineColor: "maroon",
+    //                 outlineStyle: "dashed",
+    //                 outlineWidth: BoolCast(document.libraryBrush, false) || BoolCast(document.protoBrush, false) ? `1px` : "0px",
+    //             }}
+    //             onClick={e => { this.props.gotoDocument(index); e.stopPropagation(); }}>
+    //             <strong className="presentationView-name">
+    //                 {`${index + 1}. ${title}`}
+    //             </strong>
+    //             <button className="presentation-icon" onClick={e => { this.props.deleteDocument(index); e.stopPropagation(); }}>X</button>
+    //             <br></br>
+    //             <button className={selectedButtons[0] ? "presentation-interaction" : "presentation-interaction-selected"}>A</button>
+    //             <button className={selectedButtons[1] ? "presentation-interaction" : "presentation-interaction-selected"}>B</button>
+    //             <button className={selectedButtons[2] ? "presentation-interaction" : "presentation-interaction-selected"}>C</button>
+    //             <button className={selectedButtons[3] ? "presentation-interaction" : "presentation-interaction-selected"}>D</button>
+    //             <button className={selectedButtons[4] ? "presentation-interaction" : "presentation-interaction-selected"}>E</button>
+    //             <button className={selectedButtons[5] ? "presentation-interaction" : "presentation-interaction-selected"} onClick={() => this.onGroupClick(document, index, selectedButtons)}>F</button>
+
+    //         </div>
+    //     );
+
+    // }
+
+    render() {
+        const children = DocListCast(this.props.Document.data);
+        this.initializeGroupArrays(children);
+
+        return (
+            <div className="presentationView-listCont">
+                {children.map((doc: Doc, index: number) => <PresentationElement key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupedMembers={this.props.groupedMembers} allListElements={children} />)}
+            </div>
+        );
+    }
+}
+
+
+@observer
+export class PresentationView extends React.Component<PresViewProps>  {
+    public static Instance: PresentationView;
+
+    @observable groupedMembers: [Doc[]] = [[]];
+
+
+    //observable means render is re-called every time variable is changed
+    @observable
+    collapsed: boolean = false;
+    closePresentation = action(() => this.props.Document.width = 0);
+    next = () => {
+        const current = NumCast(this.props.Document.selectedDoc);
+        this.gotoDocument(current + 1);
+
+    }
+    back = () => {
+        const current = NumCast(this.props.Document.selectedDoc);
+        this.gotoDocument(current - 1);
+    }
+
+    @action
+    public RemoveDoc = (index: number) => {
+        const value = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
+        if (value) {
+            value.splice(index, 1);
+        }
+    }
+
+    public gotoDocument = async (index: number) => {
+        const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
+        if (!list) {
+            return;
+        }
+        if (index < 0 || index >= list.length) {
+            return;
+        }
+
+        this.props.Document.selectedDoc = index;
+        const doc = await list[index];
+        DocumentManager.Instance.jumpToDocument(doc);
+    }
+
+    //initilize class variables
+    constructor(props: PresViewProps) {
+        super(props);
+        PresentationView.Instance = this;
+    }
+
+    /**
+     * Adds a document to the presentation view
+     **/
+    @action
+    public PinDoc(doc: Doc) {
+        //add this new doc to props.Document
+        const data = Cast(this.props.Document.data, listSpec(Doc));
+        if (data) {
+            data.push(doc);
+        } else {
+            this.props.Document.data = new List([doc]);
+        }
+
+        this.props.Document.width = 300;
+    }
+
+    render() {
+        let titleStr = StrCast(this.props.Document.title);
+        let width = NumCast(this.props.Document.width);
+
+        //TODO: next and back should be icons
+        return (
+            <div className="presentationView-cont" style={{ width: width, overflow: "hidden" }}>
+                <div className="presentationView-heading">
+                    <div className="presentationView-title">{titleStr}</div>
+                    <button className='presentation-icon' onClick={this.closePresentation}>X</button>
+                </div>
+                <div className="presentation-buttons">
+                    <button className="presentation-button" onClick={this.back}>back</button>
+                    <button className="presentation-button" onClick={this.next}>next</button>
+                </div>
+                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupedMembers={this.groupedMembers} />
+            </div>
+        );
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2

