visual indication about available course updates

Tarnadas · May 19, 2017 · b66c7fc · b66c7fc
1 parent 1c092fe
commit b66c7fc
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 16 deletions.
diff --git a/gui/actions/index.js b/gui/actions/index.js
@@ -55,14 +55,15 @@ export function closePackage () {
     }
 }
 
-export function downloadCourse (courseId, courseName, ownerName, videoId, courseType) {
+export function downloadCourse (courseId, courseName, ownerName, videoId, courseType, modified) {
     return {
         type: 'DOWNLOAD_COURSE',
         courseId,
         courseName,
         ownerName,
         videoId,
-        courseType
+        courseType,
+        modified
     }
 }
 

diff --git a/gui/components/InteractiveButton.js b/gui/components/InteractiveButton.js
@@ -88,8 +88,8 @@ class InteractiveButton extends React.Component {
         })();
     }
     downloadCourse () {
-        if (!this.props.progress && !this.props.complete) {
-            this.props.dispatch(downloadCourse(this.props.courseId, this.props.courseName, this.props.ownerName, this.props.videoId, this.props.courseType));
+        if (this.props.isModified || !this.props.progress && !this.props.complete) {
+            this.props.dispatch(downloadCourse(this.props.courseId, this.props.courseName, this.props.ownerName, this.props.videoId, this.props.courseType, this.props.modified));
         }
     }
     addCourse () {
@@ -119,7 +119,9 @@ class InteractiveButton extends React.Component {
         });
     }
     render () {
-        const progress = !!this.props.complete ? 100 : (!!this.props.progress ? this.props.progress*100 : 0);
+        const isModified = !!this.props.isModified;
+        //const progress = !!this.props.complete ? 100 : (!!this.props.progress ? this.props.progress*100 : 0);
+        const progress = !!this.props.progress ? this.props.progress*100 : 0;
         const isDisabled = !!this.props.isDownloaded ? false : this.props.isDownloaded === false;
         const isAdded = !!this.props.isAdded;
         const styles = ReactCSS({
@@ -131,7 +133,7 @@ class InteractiveButton extends React.Component {
                     height: '40px',
                     width: !!this.props.width ? this.props.width : '100%',
                     lineHeight: '40px',
-                    background: isAdded ? ('#33cc33') : (`linear-gradient(90deg, #99ff66 ${progress}%, #ffe500 ${progress}%)`),
+                    background: isModified ? (`linear-gradient(90deg, #99ff66 ${progress}%, #CC7034 ${progress}%)`) : (isAdded ? ('#33cc33') : (!!this.props.complete ? ('#99ff66') : (`linear-gradient(90deg, #99ff66 ${progress}%, #ffe500 ${progress}%)`))),
                     color: '#323245',
                     outline: 'none',
                     overflow: 'hidden',
@@ -148,7 +150,7 @@ class InteractiveButton extends React.Component {
                     height: '40px',
                     width: !!this.props.width ? this.props.width : '100%',
                     lineHeight: '40px',
-                    background: isAdded ? ('#33cc33') : (`linear-gradient(90deg, #99ff66 ${progress}%, #323245 ${progress}%)`),
+                    background: isModified ? (`linear-gradient(90deg, #99ff66 ${progress}%, #323245 ${progress}%)`) : (isAdded ? ('#33cc33') : (!!this.props.complete ? ('#99ff66') : (`linear-gradient(90deg, #99ff66 ${progress}%, #323245 ${progress}%)`))),
                     color: '#fff',
                     outline: 'none',
                     overflow: 'hidden',
@@ -281,6 +283,13 @@ class InteractiveButton extends React.Component {
                         <img style={styles.checked} src={'./assets/images/load.gif'} />
                     )
                 }
+                {
+                    (isModified && progress === 0) && (
+                        <svg style={styles.checked} xmlns="http://www.w3.org/2000/svg" width="439" height="439" viewBox="0 0 438.5 438.5">
+                            <path d="M409.1 109.2c-19.6-33.6-46.2-60.2-79.8-79.8C295.7 9.8 259.1 0 219.3 0c-39.8 0-76.5 9.8-110.1 29.4 -33.6 19.6-60.2 46.2-79.8 79.8C9.8 142.8 0 179.5 0 219.3c0 39.8 9.8 76.5 29.4 110.1 19.6 33.6 46.2 60.2 79.8 79.8 33.6 19.6 70.3 29.4 110.1 29.4s76.5-9.8 110.1-29.4c33.6-19.6 60.2-46.2 79.8-79.8 19.6-33.6 29.4-70.3 29.4-110.1C438.5 179.5 428.7 142.8 409.1 109.2zM361.4 231.8l-26 26c-3.6 3.6-7.9 5.4-12.8 5.4 -4.9 0-9.2-1.8-12.8-5.4l-54-54v143.3c0 4.9-1.8 9.2-5.4 12.8 -3.6 3.6-7.9 5.4-12.8 5.4h-36.5c-4.9 0-9.2-1.8-12.8-5.4 -3.6-3.6-5.4-7.9-5.4-12.8v-143.3l-54 54c-3.4 3.4-7.7 5.1-12.8 5.1 -5.1 0-9.4-1.7-12.8-5.1l-26-26c-3.4-3.4-5.1-7.7-5.1-12.9 0-5.1 1.7-9.4 5.1-12.8l103.4-103.4 26-26c3.4-3.4 7.7-5.1 12.8-5.1 5.1 0 9.4 1.7 12.8 5.1l26 26 103.4 103.4c3.4 3.4 5.1 7.7 5.1 12.8C366.6 224.1 364.9 228.4 361.4 231.8z" fill={this.state.hover ? '#fff' : '#323245'}/>
+                        </svg>
+                    )
+                }
             </div>
         )
     }

diff --git a/gui/components/LoadSaveView.js b/gui/components/LoadSaveView.js
@@ -200,7 +200,7 @@ class LoadSaveView extends React.Component {
                                 Go to <a href="http://smmdb.ddns.net" target="_blank">SMMDB</a> > Login > Profile > Show API Key
                             </div>
                             <div style={styles.apiKeyExplanationSmall}>
-                                (With an API Key, you will be able to upload courses, star courses, flag courses as completed)
+                                (With an API Key, you will be able to upload courses, star courses, flag courses as completed // in the near future)
                             </div>
                             <input style={styles.apiKeyInput} type="text" value={!this.state.apiKey ? "" : this.state.apiKey} onChange={this.handleChange} />
                             <InteractiveButton type="addApiKey" width="400px" apiKey={this.state.apiKey} value="Save" onClick={this.addApiKey} />

diff --git a/gui/components/SmmdbFile.js b/gui/components/SmmdbFile.js
@@ -33,6 +33,7 @@ export default class SmmdbFile extends React.Component {
         this.props.onClick(this.props.course)
     }
     render() {
+        const isModified = !!this.props.modified && this.props.course.lastmodified > this.props.modified;
         const progress = this.props.isDownloaded ? 100 : (!!this.props.progress ? this.props.progress*100 : 0);
         const styles = ReactCSS({
             'default': {
@@ -41,7 +42,7 @@ export default class SmmdbFile extends React.Component {
                     margin: '20px 0 0 20px',
                     width: '180px',
                     height: '160px',
-                    background: !!this.props.isAdded ? ('#33cc33') : (`linear-gradient(90deg, #99ff66 ${progress}%, #a0a0af ${progress}%)`),
+                    background: isModified ? ('#CC7034') : (!!this.props.isAdded ? ('#33cc33') : (`linear-gradient(90deg, #99ff66 ${progress}%, #a0a0af ${progress}%)`)),
                     color: '#fff',
                     overflow: 'hidden',
                     cursor: 'pointer'

diff --git a/gui/components/SmmdbFileDetails.js b/gui/components/SmmdbFileDetails.js
@@ -144,7 +144,7 @@ export default class SmmdbFileDetails extends React.Component {
                             )
                         }
                         <div style={styles.navigation}>
-                            <InteractiveButton type="downloadCourse" value="Download" progress={this.props.progress} complete={this.props.isDownloaded} courseId={this.props.course.id} courseName={this.props.course.title} ownerName={this.props.course.ownername} videoId={this.props.course.videoid} courseType={this.props.course.coursetype} />
+                            <InteractiveButton type="downloadCourse" value="Download" progress={this.props.progress} complete={this.props.isDownloaded} modified={this.props.course.lastmodified} isModified={!!this.props.modified && this.props.course.lastmodified > this.props.modified} courseId={this.props.course.id} courseName={this.props.course.title} ownerName={this.props.course.ownername} videoId={this.props.course.videoid} courseType={this.props.course.coursetype} />
                             {
                                 this.props.isPackage ? (
                                     <InteractiveButton type="addCourse" value="Show Package" isPackage={true} courseId={this.props.course.id} onOpenPackage={this.props.onOpenPackage} />

diff --git a/gui/components/SmmdbView.js b/gui/components/SmmdbView.js
@@ -197,6 +197,8 @@ class SmmdbView extends React.Component {
                                 !!this.state.course && !!this.props.currentSave && !!this.props.currentSave[this.state.course.id] && !!this.props.currentSave[this.state.course.id].addedToSave
                             } isPackage={
                                 !!this.state.course && !!this.props.downloads && !!this.props.downloads[this.state.course.id] && this.props.downloads[this.state.course.id].isPackage
+                            } modified={
+                                !!this.state.course && !!this.props.downloads && !!this.props.downloads[this.state.course.id] && this.props.downloads[this.state.course.id].modified
                             } />
                             <ul style={styles.ul}>
                                 {
@@ -209,6 +211,8 @@ class SmmdbView extends React.Component {
                                                 !!self.props.downloads && !!self.props.downloads[course.id]
                                             } isAdded={
                                                 !!self.props.currentSave && !!self.props.currentSave[course.id] && !!self.props.currentSave[course.id].addedToSave
+                                            } modified={
+                                                !!self.props.downloads && !!self.props.downloads[course.id] && self.props.downloads[course.id].modified
                                             } key={course.id} />
                                         }
                                     })())

diff --git a/gui/util/DownloadedCourse.js b/gui/util/DownloadedCourse.js
@@ -27,7 +27,7 @@ export default class DownloadedCourse {
         appSavePath = path;
     }
 
-    download (onStart, onProgress, onFinish, courseId, courseName, ownerName, videoId, courseType) {
+    download (onStart, onProgress, onFinish, courseId, courseName, ownerName, videoId, courseType, modified) {
 
         this.smmdbId = courseId;
 
@@ -81,6 +81,7 @@ export default class DownloadedCourse {
             });
             this.filePath = await this.moveFiles(coursePathTemp);
             this.isPackage = this.filePath.length > 1;
+            this.modified = modified;
 
             // fix thumbnails + maker + title
             if (courseType !== 2) { // !== Wii U Dump

diff --git a/gui/util/SaveFileEditor.js b/gui/util/SaveFileEditor.js
@@ -17,10 +17,10 @@ export default class SaveFileEditor {
 
     }
 
-    async downloadCourse (onStart, onProgress, onFinish, smmdbId, courseName, ownerName, videoId, courseType) {
+    async downloadCourse (onStart, onProgress, onFinish, smmdbId, courseName, ownerName, videoId, courseType, modified) {
 
         try {
-            this.downloadedCourses[smmdbId] = await (new DownloadedCourse(this.appSavePath)).download(onStart, onProgress, onFinish, smmdbId, courseName, ownerName, videoId, courseType);
+            this.downloadedCourses[smmdbId] = await (new DownloadedCourse(this.appSavePath)).download(onStart, onProgress, onFinish, smmdbId, courseName, ownerName, videoId, courseType, modified);
         } catch (err) {
             throw err;
         }

diff --git a/gui/util/SaveFileMiddleware.js b/gui/util/SaveFileMiddleware.js
@@ -28,7 +28,7 @@ export default function saveFileMiddleware (saveFileEditor) {
         };
         switch (action.type) {
             case 'DOWNLOAD_COURSE':
-                saveFileEditor.downloadCourse(onStart, onProgress, onFinish, action.courseId, action.courseName, action.ownerName, action.videoId, action.courseType);
+                saveFileEditor.downloadCourse(onStart, onProgress, onFinish, action.courseId, action.courseName, action.ownerName, action.videoId, action.courseType, action.modified);
                 break;
             case 'ADD_COURSE':
                 if (!!action.packageId) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cemu-smmdb",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Super Mario Maker Save File Editor",
   "main": "./main.bundle.js",
   "scripts": {
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "bluebird": "^3.5.0",
-    "cemu-smm": "git://github.com/Tarnadas/cemu-smm",
+    "cemu-smm": "git://github.com/Tarnadas/cemu-smm#dev",
     "copy-dir": "^0.3.0",
     "cross-unzip": "^0.2.1",
     "electron-log": "^2.2.3",