Select group in dropdown when managing videos

frankhale · frankhale · commit c045a85cedb3 · 2016-05-23T22:25:33.000-04:00
diff --git a/README.md b/README.md
@@ -150,8 +150,8 @@ search box that will perform various things.
 Here is a list (there will be additional ones added soon):
 
 - `[name hint]` : Lists locally saved videos based on the [name hint]
-- `yt: [search term]` : Searches YouTube for the [search term]
-- `g: [group name]` : Lists the videos for the [group name]
+- `/yt [search term]` : Searches YouTube for the [search term]
+- `/g [group name]` : Lists the videos for the [group name]
 - `/list` : List all videos contained in the database
 - `/history` : Lists the recently played videos
 - `/rp` or `/recently-played` : List last 30 recently played videos
@@ -217,7 +217,7 @@ Recently Played {
 ## Author(s)
 
 Frank Hale &lt;frankhale@gmail.com&gt;  
-22 May 2016
+23 May 2016
 
 ## License
 
diff --git a/bower.json b/bower.json
@@ -11,7 +11,7 @@
   ],
   "dependencies": {
     "jquery": "^3.0.0-rc1",
-    "lodash": "^4.12.0",
+    "lodash": "^4.13.1",
     "react": "^15.1.0",
     "keymaster": "^1.6.3",
     "font-awesome": "^4.6.3"
diff --git a/data/videoDB b/data/videoDB
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
     <div id="loading">
       <i class="fa fa-spinner fa-spin fa-2x fa-fw margin-bottom"></i>
     </div>
-    <div id="content"></div>    
+    <div id="content"></div>
     <webview id="webview" allowtransparency></webview>
 
     <script src="./build/nw.js"></script>
diff --git a/nodemon.json b/nodemon.json
@@ -0,0 +1,14 @@
+{
+  "verbose": false,
+  "ignore": [
+    "src/*",
+    "public/*",
+    "build/*.map",
+    "build/api.js",
+    "build/db.js",
+    "build/index.js",
+    "clients/*",
+    "data/*",
+    "views/*"
+  ]
+}
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "express": "~4.13.4",
     "hbs": "~4.0.0",
     "killable": "^1.0.0",
-    "lodash": "^4.12.0",
+    "lodash": "^4.13.1",
     "morgan": "^1.6.1",
     "pegjs": "^0.9.0",
     "request": "^2.72.0",
diff --git a/public/stylesheets/app.css b/public/stylesheets/app.css
@@ -115,7 +115,9 @@ tr:hover td.border-right {
   text-decoration: none;
   margin-right: 2px;
 }
-
+.manageButton:hover {
+  color: #999;
+}
 .grayscale {
   -webkit-filter: grayscale(1);
 }
@@ -138,7 +140,6 @@ tr:hover td.border-right {
 ::-webkit-scrollbar-corner {
     background: #fff;
 }
-
 /* Select style borrowed from: http://codepen.io/AmrSubZero/pen/dxpri */
 select {
   background-color:#357;
@@ -160,25 +161,20 @@ select {
   -webkit-transition:0.3s ease all;
 	        transition:0.3s ease all;
 }
-
 select:focus, select:active {
   border:0;
   outline:0;
 }
-
 .groupDropDown:hover {
   background-color:#123;
 }
-
 .groupDropDownDisabled {
   margin-right: 5px;
   background-color:#333;
 }
-
 .groupDropDown {
   margin-right: 5px;
 }
-
 #version {
   position: fixed;
   bottom: 25px;
diff --git a/screenshots/toby-manage.png b/screenshots/toby-manage.png
diff --git a/src/api.js b/src/api.js
@@ -118,6 +118,7 @@ const API = (function(db) {
             finalResults.push({
               title: r.title,
               ytid: r.id,
+              group: r.group,
               isArchived: (found !== undefined) ? true : false
             });
           });
diff --git a/src/dropdown-ui.js b/src/dropdown-ui.js
@@ -63,12 +63,13 @@ class DropDown extends React.Component {
   }
   render() {
     let renderedItems =  this.state.items.map(function(e, i) {
-      if(e.selected) {
+      //console.log(`${e.name} === ${this.props.selected}`);
+      if(e.selected || (this.props.selected !== undefined && this.props.selected === e.name)) {
         return <option key={i} value={e.value} selected>{e.name}</option>
       } else {
         return <option key={i} value={e.value}>{e.name}</option>
       }
-    });
+    }.bind(this));
 
     return (
       <select id={this.state.name}
diff --git a/src/toby-ui.js b/src/toby-ui.js
@@ -196,6 +196,7 @@ class TobyUI extends React.Component {
         playVideo: this.playVideo.bind(this),
         title: v.title,
         ytid: v.ytid,
+        group: v.group,
         thumbnail: `https://i.ytimg.com/vi/${v.ytid}/default.jpg`,
         isArchived: v.isArchived
       });
@@ -277,7 +278,10 @@ class TobyUI extends React.Component {
     }
   }
   render() {
-    let versionDisplay = (this.state.searchResults.length > 0) ? false : true;
+    let versionDisplay = true;
+    if (this.state.searchResults !== undefined && this.state.searchResults.length > 0) {
+      versionDisplay = false;
+    }
 
     return (
       <div>
diff --git a/src/video-list-ui.js b/src/video-list-ui.js
@@ -26,7 +26,6 @@ class VideoList extends React.Component {
     this.state = {
       data: [],
       applyFilter: "",
-      manageButtonItems: [],
       onAddVideoButtonHandler: function() {},
       onUpdateVideoButtonHandler: function() {},
       onDeleteVideoButtonHandler: function() {}
@@ -66,25 +65,28 @@ class VideoList extends React.Component {
       });
     }
 
-    this.setState({
-      items: items,
-      data: nextProps.data.map(function(d, i) {
+    let videos = [];
+
+    if(nextProps.data !== undefined && nextProps.data.length > 0) {
+      videos = nextProps.data.map(function(d, i) {
+        //console.log(d);
+
         return {
           playVideo: d.playVideo,
           title: d.title,
           ytid: d.ytid,
+          group: d.group,
           thumbnail: d.thumbnail,
           isArchived: d.isArchived,
           justAdded: (d.justAdded !== undefined) ? d.justAdded : false
         };
-      }.bind(this)),
+      }.bind(this));
+    }
+
+    this.setState({
+      items: items,
+      data: videos,
       applyFilter: (nextProps.applyFilter !== undefined) ? nextProps.applyFilter : "",
-      manageButtonItems: nextProps.data.map(function(d, i) {
-        return {
-          title: d.title,
-          ytid: d.ytid
-        };
-      }),
       onAddVideoButtonHandler: nextProps.addVideoButtonHandler,
       onUpdateVideoButtonHandler: nextProps.updateVideoButtonHandler,
       onDeleteVideoButtonHandler: nextProps.deleteVideoButtonHandler,
@@ -95,7 +97,7 @@ class VideoList extends React.Component {
     e.preventDefault();
 
     let id = $(e.target).prop("id").replace("star-", ""),
-        video = _.find(this.state.manageButtonItems, { "ytid": id }),
+        video = _.find(this.state.data, { "ytid": id }),
         group = $(`#groupSelector-${video.ytid}`).val();
 
     if(group === "-1") return;
@@ -118,7 +120,7 @@ class VideoList extends React.Component {
     console.log($(e.target).prop("id").replace("star-", ""));
 
     let id = $(e.target).prop("id").replace("star-", ""),
-        video = _.find(this.state.manageButtonItems, { "ytid": id }),
+        video = _.find(this.state.data, { "ytid": id }),
         group = $(`#groupSelector-${video.ytid}`).val();
 
     if(group === "-1") return;
@@ -131,7 +133,7 @@ class VideoList extends React.Component {
     e.preventDefault();
 
     let id = $(e.target).prop("id").replace("star-", ""),
-        video = _.find(this.state.manageButtonItems, { "ytid": id });
+        video = _.find(this.state.data, { "ytid": id });
 
     if(this.state.onDeleteVideoButtonHandler !== undefined && video !== undefined) {
       this.state.onDeleteVideoButtonHandler(video);
@@ -178,7 +180,7 @@ class VideoList extends React.Component {
 
         manageButton =
           <td className="border-right buttonContainerWidth"><span>
-            <DropDown name={"groupSelector-" + d.ytid } items={this.state.items} className={dropDownClass} onDropDownChange={this.onDropDownChange} />
+            <DropDown name={"groupSelector-" + d.ytid } selected={d.group} items={this.state.items} className={dropDownClass} onDropDownChange={this.onDropDownChange} />
             <a href="#" id={"star-" + d.ytid} onClick={this.onUpdateVideoButtonHandler} className={updateButtonClass}></a>
             <a href="#" id={"star-" + d.ytid} onClick={this.onDeleteVideoButtonHandler} className={deleteButtonClass}></a>
           </span></td>;

Original file line number	Diff line number	Diff line change
`@@ -115,7 +115,9 @@ tr:hover td.border-right {`
`115`	`115`	`text-decoration: none;`
`116`	`116`	`margin-right: 2px;`
`117`	`117`	`}`
`118`		`-`
	`118`	`+.manageButton:hover {`
	`119`	`+ color: #999;`
	`120`	`+}`
`119`	`121`	`.grayscale {`
`120`	`122`	`-webkit-filter: grayscale(1);`
`121`	`123`	`}`
`@@ -138,7 +140,6 @@ tr:hover td.border-right {`
`138`	`140`	`::-webkit-scrollbar-corner {`
`139`	`141`	`background: #fff;`
`140`	`142`	`}`
`141`		`-`
`142`	`143`	`/* Select style borrowed from: http://codepen.io/AmrSubZero/pen/dxpri */`
`143`	`144`	`select {`
`144`	`145`	`background-color:#357;`
`@@ -160,25 +161,20 @@ select {`
`160`	`161`	`-webkit-transition:0.3s ease all;`
`161`	`162`	`transition:0.3s ease all;`
`162`	`163`	`}`
`163`		`-`
`164`	`164`	`select:focus, select:active {`
`165`	`165`	`border:0;`
`166`	`166`	`outline:0;`
`167`	`167`	`}`
`168`		`-`
`169`	`168`	`.groupDropDown:hover {`
`170`	`169`	`background-color:#123;`
`171`	`170`	`}`
`172`		`-`
`173`	`171`	`.groupDropDownDisabled {`
`174`	`172`	`margin-right: 5px;`
`175`	`173`	`background-color:#333;`
`176`	`174`	`}`
`177`		`-`
`178`	`175`	`.groupDropDown {`
`179`	`176`	`margin-right: 5px;`
`180`	`177`	`}`
`181`		`-`
`182`	`178`	`#version {`
`183`	`179`	`position: fixed;`
`184`	`180`	`bottom: 25px;`