Delete projects

wrapper/actions.js

@@ -4,16 +4,20 @@ function onClickHome() {
   state._update("updateCurrentPage", "home");
   state._update('processorStart', false)
 }
-function onClickDeleteProject(){
-  //TODO
+function onClickDeleteProject(item){
+  if(confirm("are you sure you want to delete this project?")){
+    ipcRenderer.send("@delete-project", item)
+  }
 }
+
 function onClickCreateProject() {
   state._update("updateMachineState", {
     ...defaultMachineState,
     projects: state.machineState.projects,
   });
   state._update("updateCurrentPage", "project");
 }
+
 function onClickLoadProject(name) {
   const projects = state.machineState.projects;
   const result = getProject(projects, name)
@@ -26,7 +30,6 @@ function onClickLoadProject(name) {
     });
     state._update("updateCurrentPage", "project");
   } else {
-    console.log('failed to load')
     alert('That file already in a project or failed to open')
   }
 }
@@ -57,18 +60,13 @@ function saveProject() {
   const name = state.machineState.filename;
   const result = getProject(projects, name)
   if(result.status){
-    console.log('@save-project', {
-      ...projects[result.found],
-      filename: name,
-      deathmarks: state.deathmarks,
-    })
     ipcRenderer.send("@save-project", {
       ...projects[result.found],
       filename: name,
       deathmarks: state.deathmarks,
     });
   } else {
-    console.log('found failed')
+    // console.log('found failed')
   }
 }
 

wrapper/browser.js

@@ -62,17 +62,17 @@ function renderer(newState) {
 
 //Sync Data
 ipcRenderer.on("@machine-state", (event, arg) => {
-  console.log('updateMachineState', arg)
+  // console.log('updateMachineState', arg)
   state._update("updateMachineState", arg);
-  console.log("browser-state", state);
+  // console.log("browser-state", state);
 });
 //Sync Data
 ipcRenderer.on("@save-fail", (event, arg) => {
-  console.log('@save-fail', arg)
+  // console.log('@save-fail', arg)
   alert('save failed')
 });
 ipcRenderer.on("@save-fail", (event, arg) => {
-  console.log('@save-fail', arg)
+  // console.log('@save-fail', arg)
   alert('open failed')
 });
 

wrapper/canvas.js

@@ -108,11 +108,11 @@ processor.computeFrame = function computeFrame() {
   //perfect percentage of white and green any more is false positive
   const frameTime = (Math.round(this.video.currentTime))
   const color = {
-    w: whiteAmount.length, 
+    w: whiteAmount.length,
     g: greenAmount.length,
     r: redAmount.length
   }
-  console.log({ frameTime, ...color })
+  // console.log({ frameTime, ...color })
   if(whiteThres(color.w) && greenThres(color.g) && redThres(color.r)){
     white_frames[frameTime] = whiteAmount
     green_frames[frameTime] = greenAmount

wrapper/components.js

@@ -188,12 +188,15 @@ function HomePage(state) {
             Create Project ✨
           </div>
           ${state.machineState.projects.map((item) => {
-            return html`<div onclick="${() => onClickLoadProject(item.filename)}" class="item card">
+            return html`<div class="item card">
+              <div onclick="${() => onClickLoadProject(item.filename)}">
                   <video muted width="280" height="140" controls="false" src="${item.filename}"></video>
               <div class="info-panel">
                 <span>${getTitle(item.filename)}</span>
                 <small>${item.filename}</small>
               </div>
+              </div>
+              <button onclick="${() => { onClickDeleteProject(item) }}">X</button>
             </div>`;
           })}
         </div>

wrapper/main.css

@@ -79,11 +79,13 @@ body {
 }
 
 .card {
+  cursor: pointer;
   width: 280px;
   min-height: 148px;
   border-radius: 12px;
   margin: 14px;
   overflow: hidden;
+  position: relative;
 }
 .card .info-panel {
   background-color: #000;
@@ -127,6 +129,22 @@ body {
 .projects {
   max-width: 80vw;
 }
+
+.projects .card button {
+  font-weight: bold;
+  position: absolute;
+  background: var(--yellow);
+  border-radius: 100%;
+  width: 24px;
+  color: #000;
+  right: 4px;
+  top: 4px;
+  height: 24px;
+  line-height: 20px;
+  font-size: 10px;
+  overflow: hidden;
+}
+
 .single-project {
   height: 87vh
 }

wrapper/main.js

@@ -24,7 +24,6 @@ function createNewProject(state, nextFilename){
 
 function clickHandler(event, arg, db) {
   //Clear filename
-  console.log('state', state)
   switch (arg.action) {
     case 'open-file':
       state.filename = ""
@@ -40,7 +39,7 @@ function clickHandler(event, arg, db) {
             event.reply('@machine-state', state);
           }
         } else {
-          console.log("no file selected");
+          // console.log("no file selected");
           event.reply('@failed-open', state);
           state.filename = ""
         }
@@ -88,22 +87,22 @@ app.whenReady().then(() => {
   ipcMain.on('@click', (e,v) =>  { clickHandler(e,v,db) })
   ipcMain.on('@load-saved-state', (e, a) => {
     const v = db.get('state').value()
-    console.log('reanimatiing dead state', state)
+    // console.log('reanimatiing dead state', state)
     state = v;
     e.reply('@machine-state', v)
   })
   ipcMain.on('@get-machine-state', (e, a) => {
-      console.log('getting live state')
+      // console.log('getting live state')
       e.reply('@machine-state', state)
   })
   ipcMain.on('@save-state', (e, state) => {
     const _state = JSON.parse(state);
-    console.log('@save-state', _state)
+    // console.log('@save-state', _state)
     db.set('state', _state).write()
   })
   ipcMain.on('@save-project', (e, project) => {
     const result = projectExists(state, project.filename);
-    console.log('@save-project', result, state, project)
+    // console.log('@save-project', result, state, project)
     if(result.status) {
       state.projects[result.index] = project;
       state.filename = project.filename
@@ -113,6 +112,13 @@ app.whenReady().then(() => {
       e.reply('@save-fail', project)
     }
   })
+  ipcMain.on('@delete-project', (e, project) => {
+    state.projects = state.projects.filter(np => {
+      return np.filename !== project.filename
+    })
+    db.set('state', state).write()
+    e.reply('@machine-state', state)
+  })
 });
 
 function projectExists(state, filename) {