Merge Contributors and Private Photos #71 from develop

[Release] Contributors and Private Photos #71
nbw · Feb 3, 2019 · c1e9251 · c1e9251
2 parents ccba53a + e00f24d
commit c1e9251
Show file tree

Hide file tree

Showing 89 changed files with 1,517 additions and 211 deletions.
diff --git a/assets/assets/images/contrib-1.jpg b/assets/assets/images/contrib-1.jpg
diff --git a/assets/assets/images/contrib-2.jpg b/assets/assets/images/contrib-2.jpg
diff --git a/assets/assets/images/contrib-3.jpg b/assets/assets/images/contrib-3.jpg
diff --git a/assets/assets/images/contrib-4.jpg b/assets/assets/images/contrib-4.jpg
diff --git a/assets/js/phoenix_html.js b/assets/js/phoenix_html.js
@@ -0,0 +1,75 @@
+"use strict";
+
+(function() {
+  var PolyfillEvent = eventConstructor();
+
+  function eventConstructor() {
+    if (typeof window.CustomEvent === "function") return window.CustomEvent;
+    // IE<=9 Support
+    function CustomEvent(event, params) {
+      params = params || {bubbles: false, cancelable: false, detail: undefined};
+      var evt = document.createEvent('CustomEvent');
+      evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+      return evt;
+    }
+    CustomEvent.prototype = window.Event.prototype;
+    return CustomEvent;
+  }
+
+  function buildHiddenInput(name, value) {
+    var input = document.createElement("input");
+    input.type = "hidden";
+    input.name = name;
+    input.value = value;
+    return input;
+  }
+
+  function handleClick(element) {
+    var to = element.getAttribute("data-to"),
+        method = buildHiddenInput("_method", element.getAttribute("data-method")),
+        csrf = buildHiddenInput("_csrf_token", element.getAttribute("data-csrf")),
+        form = document.createElement("form"),
+        target = element.getAttribute("target");
+
+    form.method = (element.getAttribute("data-method") === "get") ? "get" : "post";
+    form.action = to;
+    form.style.display = "hidden";
+
+    if (target) form.target = target;
+
+    form.appendChild(csrf);
+    form.appendChild(method);
+    document.body.appendChild(form);
+    form.submit();
+  }
+
+  window.addEventListener("click", function(e) {
+    var element = e.target;
+
+    while (element && element.getAttribute) {
+      var phoenixLinkEvent = new PolyfillEvent('phoenix.link.click', {
+        "bubbles": true, "cancelable": true
+      });
+
+      if (!element.dispatchEvent(phoenixLinkEvent)) {
+        e.preventDefault();
+        return false;
+      }
+
+      if (element.getAttribute("data-method")) {
+        handleClick(element);
+        e.preventDefault();
+        return false;
+      } else {
+        element = element.parentNode;
+      }
+    }
+  }, false);
+
+  window.addEventListener('phoenix.link.click', function (e) {
+    var message = e.target.getAttribute("data-confirm");
+    if(message && !window.confirm(message)) {
+      e.preventDefault();
+    }
+  }, false);
+})();
diff --git a/assets/jsx/components/adminNavbar.jsx b/assets/jsx/components/adminNavbar.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 class AdminNavbar extends React.Component {
     refreshClick(){
-        self = this;
+        var self = this;
         fetch('/admin/refresh', {
             method: 'POST',
             credentials: 'same-origin',
@@ -21,16 +21,17 @@ class AdminNavbar extends React.Component {
         .catch(function(error) {
             console.log('There has been a problem with your fetch operation: ' + error.message);
             alert('Response was not ok.');
-        });    
+        });
     }
     render() {
-        self = this;
+        var self = this;
         return (
             <div id="adminNavbar">
                 <div className="title"><a href="/">Treelib</a></div>
                 <div className="item"><a href="/family/new" >Add Family</a></div>
                 <div className="item"><a href="/genus/new" >Add Genus</a></div>
                 <div className="item"><a href="/species/new" >Add Species</a></div>
+                <div className="item"><a href="/admin/contributors" >Contributors</a></div>
                 <div className="item"><a href="/admin" >Master Tree</a></div>
                 <div className="refresh" onClick={(event) => self.refreshClick()}>Refresh</div>
             </div>

diff --git a/assets/jsx/components/basicNavbar.jsx b/assets/jsx/components/basicNavbar.jsx
@@ -13,11 +13,12 @@ class BasicNavbar extends React.Component {
                     <li className="search"><a href="/search">SEARCH</a></li>
                     <li className="about"><a href="/about">ABOUT</a></li>
                     <li className="contact"><a href="/contact">CONTACT</a></li>
+                    <li className="contributors"><a href="/contributors">CONTRIBUTORS</a></li>
                 </ul>
                 <div className="navBorder first"></div><div className="navBorder second"></div><div className="navBorder third"></div>
             </div>
         );
     }
 }
 
-export default BasicNavbar
+export default BasicNavbar
diff --git a/assets/jsx/components/contributors.jsx b/assets/jsx/components/contributors.jsx
@@ -0,0 +1,35 @@
+import React from 'react'
+
+class Contributors extends React.Component {
+  contributionsList(contributors){
+    var names = [];
+    for (var i = 0; i < contributors.length; i++) {
+      var name = contributors[i].first_name + " " + contributors[i].last_name;
+      names.push(<a key={"cont-" + contributors[i].id} href={"/contributors#cont-" + contributors[i].id}>{name}</a>);
+
+      if(contributors.length > 1) {
+        if (i == (contributors.length - 1)) {
+          names.splice(-1, 0, " and ");
+        } else {
+          names.push(", ");
+        }
+      }
+    }
+    return names;
+  }
+  render() {
+    var contributors = this.props.contributors;
+    if (contributors === undefined || contributors.length === 0 ) {
+      return "";
+    }
+    return (
+      <div className="contributors">
+        <h2>Contributors</h2>
+        <p>Additional contributions from {this.contributionsList(contributors)}.</p>
+      </div>
+    );
+  }
+}
+
+export default Contributors
+
diff --git a/assets/jsx/components/searchSidebar.jsx b/assets/jsx/components/searchSidebar.jsx
@@ -62,7 +62,7 @@ class SearchSidebar extends React.Component {
   }
 
   findGenus(genus_id) {
-    var families = self.props.tree,
+    var families = this.props.tree,
       genus = {};
     for(var f_index=0; f_index < families.length; f_index++) {
       genus = families[f_index].genera.find(function(g){ return g.id == genus_id;});
@@ -78,7 +78,7 @@ class SearchSidebar extends React.Component {
     return species;
   };
   render() {
-    self = this;
+    var self = this;
     var selectedFamily =  this.state.selectedFamily,
       selectedGenus = this.state.selectedGenus,
       selectedSpecies = this.state.selectedSpecies,

diff --git a/assets/jsx/components/species.jsx b/assets/jsx/components/species.jsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 
 import PhotoViewer from './photoViewer.jsx';
 import ShareLinker from './shareLinker.jsx';
+import Contributors from './contributors.jsx';
 
 class Species extends React.Component {
   constructor(props) {
@@ -97,6 +98,13 @@ class Species extends React.Component {
     }
   }
 
+  contributions() {
+    var contributors = this.props.contributors;
+    if(contributors && contributors.length > 0) {
+      return <Contributors contributors={contributors} />
+    }
+  }
+
   render() {
     var self = this,
       s = this.props.species,
@@ -137,22 +145,23 @@ class Species extends React.Component {
             {links}
           </ul>
         </div>
-        { (selectedPhoto != null) ? 
-            <PhotoViewer 
-              nextCallback={() => this.nextPhoto()} 
-              prevCallback={() => this.prevPhoto()} 
+        { (selectedPhoto != null) ?
+            <PhotoViewer
+              nextCallback={() => this.nextPhoto()}
+              prevCallback={() => this.prevPhoto()}
               closeCallback={() => this.closePhotoviewer()}
               isFullScreen={this.state.isFSPMode}
               hideSidebarCallback={() => (this.showFullSizePhoto())}
               showSidebarCallback={() => (this.closeFullSizePhoto())}
-              image={photos[selectedPhoto].medium} 
-              imageName={photos[selectedPhoto].name} 
-              imageDescription={photos[selectedPhoto].description} 
-              original = {photos[selectedPhoto].original} 
+              image={photos[selectedPhoto].medium}
+              imageName={photos[selectedPhoto].name}
+              imageDescription={photos[selectedPhoto].description}
+              original = {photos[selectedPhoto].original}
               flickr_url = {photos[selectedPhoto].flickr_url} /> : null }
             <div className="photos">
               {thumbs}
             </div>
+            { this.contributions() }
           </div>
     );
   }

diff --git a/assets/jsx/login.jsx b/assets/jsx/login.jsx
@@ -35,7 +35,7 @@ class App extends React.Component {
         }
     }
     updateTheMotherShip(){
-        self = this; 
+        var self = this;
         if( self.state.username.length === 0 || self.state.password.length === 0){
             alert('try again. something is missing.');
             return;
@@ -60,9 +60,7 @@ class App extends React.Component {
                 });
             } else {
                 alert("uh oh.");
-                console.log('Network response was not ok.');
-            }
-        })
+                console.log('Network response was not ok.'); } })
         .catch(function(error) {
             console.log('There has been a problem with your fetch operation: ' + error.message);
         });

diff --git a/assets/jsx/search.jsx b/assets/jsx/search.jsx
@@ -154,6 +154,7 @@ class App extends React.Component {
                 <Species
                   key={`s-${item.id}`}
                   species={item}
+                  contributors={item.contributors}
                   genus={this.findGenus(item.genus_id)}
                   handler={this.update.bind(this)} 
                   isFSPMode={this.state.fullScreenPhotoMode}

diff --git a/assets/jsx/species_page.jsx b/assets/jsx/species_page.jsx
@@ -11,7 +11,11 @@ class App extends React.Component {
     return (
       <div className="mainContainer">
         <BasicNavbar />
-        <Species species={pg.species} genus={pg.genus}/>
+        <Species
+          species={pg.species}
+          genus={pg.genus}
+          contributors={pg.contributors}
+        />
       </div>
     );
   }

diff --git a/assets/scss/_admin_general.scss b/assets/scss/_admin_general.scss
@@ -1,3 +1,5 @@
+@import "_colors";
+
 $font-primary-color: rgb(77, 78, 83);
 $textbox-width: 70%;
 
@@ -25,7 +27,7 @@ a {
         color:black;
     }
 }
-#app{
+#app.admin {
     > div {
         min-height: 100%;
         background-color: white;
@@ -77,6 +79,7 @@ a {
     text-align: center;
     vertical-align: middle;
     background-color: #67F;
+    font-size: 1.6rem;
 
     //shape & positioning stuff
     border-radius: 3px;
@@ -104,7 +107,7 @@ a {
     padding: 5px;
     vertical-align: middle;
     border: 1px solid rgba(0, 0, 0, 0.0);
-    border-radius: 3px;
+    border-radius: 2px;
     &:hover{
         color: $font-primary-color;
         border: 1px solid rgba(0, 0, 0, 0.7);
@@ -130,7 +133,20 @@ a {
     }
 }
 
-.mainContainer {
+.header-btn {
+    float: right;
+    font-size: 1.5rem;
+    padding: 1rem;
+    border-radius: 2px;
+    color: white;
+    min-width: 75px;
+    text-align: center;
+    &:hover {
+        color: white;
+    }
+}
+
+.admin .mainContainer {
     background-color: #AAA;
     min-height:100%;
 }
@@ -201,4 +217,57 @@ a {
 
 .inline > * {
     display: inline-block;
+}
+
+table.responsive {
+    width: 100%;
+    border-collapse:collapse;
+
+    tr:nth-child(even) {
+        background: #EEE;
+    }
+    td {
+        padding: 1.5rem;
+        padding-left: 2.5rem;
+    }
+    .center-column {
+        text-align: center;
+    }
+}
+
+table.admin {
+    .action {
+        display: inline-block;
+        min-width: 50px;
+        border: 0;
+        padding: 0.7rem;
+        border-radius: 2px;
+
+        color: white;
+        background-color: #888;
+        &:hover {
+            background-color: #666;
+        }
+
+    }
+}
+
+.success {
+    background-color: $color-fourth-3;
+    &:hover {
+        background-color: $color-fourth-4;
+    }
+}
+
+.edit, table.admin .action.edit {
+    background-color: $color-third-3;
+    &:hover {
+        background-color: $color-third-4;
+    }
+}
+.delete, table.admin .action.delete {
+    background-color: $color-first-0;
+    &:hover {
+        background-color: $color-first-4;
+    }
 }