Detect connection to localhost (#1580)

* update confirm styling

* ask to connect to localhost

* fix codefactor issue

helper/discover.js

@@ -2,12 +2,23 @@
 /* eslint-disable import/no-commonjs */
 
 const compareVersions = require('compare-versions');
+const exec = require('child_process').exec;
 
 const minimumVersion = '1.3.5';
 let browser;
 let nodes = [];
 
-function discoverNodes(window) {
+function startDiscovery(window) {
+  exec('hostname', (err, stdout) => {
+    if (err) {
+      discoverNodes(window, null);
+    } else {
+      discoverNodes(window, `${stdout}.local`);
+    }
+  });
+}
+
+function discoverNodes(window, localDomain) {
   const bonjour = require('bonjour')();
   nodes = [];
   browser = bonjour.find({ type: 'octoprint' });
@@ -17,6 +28,7 @@ function discoverNodes(window) {
       name: service.name,
       version: service.txt.version,
       url: `http://${service.host.replace(/\.$/, '')}:${service.port}${service.txt.path}`,
+      local: service.host === localDomain,
       disable: compareVersions(minimumVersion, service.txt.version) === -1,
     });
     sendNodes(window);
@@ -38,4 +50,4 @@ function sendNodes(window) {
   window.webContents.send('discoveredNodes', nodes);
 }
 
-module.exports = { discoverNodes, stopDiscovery };
+module.exports = { startDiscovery, stopDiscovery };

helper/listener.js

@@ -4,7 +4,7 @@ const exec = require('child_process').exec;
 
 const sendCustomStyles = require('./styles');
 const { downloadUpdate, sendVersionInfo } = require('./update');
-const { discoverNodes, stopDiscovery } = require('./discover');
+const { startDiscovery, stopDiscovery } = require('./discover');
 const { readConfig, saveConfig, checkConfig } = require('./config');
 
 function activateScreenSleepListener(ipcMain) {
@@ -33,7 +33,7 @@ function activateUpdateListener(ipcMain, window) {
 }
 
 function activateDiscoverListener(ipcMain, window) {
-  ipcMain.on('discover', () => discoverNodes(window));
+  ipcMain.on('discover', () => startDiscovery(window));
 
   ipcMain.on('stopDiscover', () => stopDiscovery());
 }

src/app/config/setup/discover-octoprint/discover-octoprint.component.html

@@ -43,3 +43,14 @@
   </form>
   <div class="discover-octoprint__manual" (click)="searchForInstance()" style="margin-top: 5.5vh">search again</div>
 </div>
+
+<div class="confirm__wrapper" *ngIf="urlSplit">
+  <div class="confirm">
+    <h1>connect to localhost?</h1>
+    <p class="confirm__sub-heading">
+      are you trying to connect to OctoPrint that is running on the same machine as OctoDash?
+    </p>
+    <img class="confirm__icon" src="assets/confirm-small.svg" (click)="emitLocalOctoprintInstance(urlSplit)" />
+    <img class="confirm__icon" src="assets/cancel-small.svg" (click)="emitOctoprintInstance(urlSplit)" />
+  </div>
+</div>

src/app/config/setup/discover-octoprint/discover-octoprint.component.ts

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
 import { ElectronService } from 'ngx-electron';
 
+import { URLSplit } from '../../config.model';
 import { ConfigService } from '../../config.service';
 
 @Component({
@@ -19,6 +20,7 @@ export class DiscoverOctoprintComponent implements OnInit, OnDestroy {
 
   public manualURL = false;
   public octoprintNodes: OctoprintNodes;
+  public urlSplit: URLSplit;
 
   constructor(private configService: ConfigService, private electronService: ElectronService, private zone: NgZone) {}
 
@@ -50,8 +52,21 @@ export class DiscoverOctoprintComponent implements OnInit, OnDestroy {
 
   public setOctoprintInstance(node: OctoprintNodes): void {
     const urlSplit = this.configService.splitOctoprintURL(node.url);
+    if (node.local) {
+      this.urlSplit = urlSplit;
+    } else {
+      this.emitOctoprintInstance(urlSplit);
+    }
+  }
+
+  public emitLocalOctoprintInstance(urlSplit: URLSplit): void {
+    this.emitOctoprintInstance({ host: 'localhost', port: urlSplit.port } as URLSplit);
+  }
+
+  public emitOctoprintInstance(urlSplit: URLSplit): void {
     this.octoprintHostChange.emit(urlSplit.host);
     this.octoprintPortChange.emit(urlSplit.port);
+    this.urlSplit = undefined;
     this.increasePage.emit();
   }
 
@@ -71,5 +86,6 @@ interface OctoprintNodes {
   name: string;
   version: string;
   url: string;
+  local: boolean;
   disable: boolean;
 }

src/app/control/custom-actions/custom-actions.component.html

@@ -25,14 +25,14 @@
 
 <div class="confirm__wrapper" *ngIf="actionToConfirm">
   <div class="confirm">
-    <h1>Are you sure?</h1>
-    <p class="confirm__sub-heading">Do you want to execute the following GCode?</p>
+    <h1>are you sure?</h1>
+    <p class="confirm__sub-heading">do you want to execute the following command?</p>
     <p class="confirm__gcode">{{ actionToConfirm.command }}</p>
     <img
       class="confirm__icon"
-      src="assets/confirm.svg"
+      src="assets/confirm-small.svg"
       (click)="doAction(actionToConfirm.command, actionToConfirm.exit, false)"
     />
-    <img class="confirm__icon" src="assets/cancel.svg" (click)="hideConfirm()" />
+    <img class="confirm__icon" src="assets/cancel-small.svg" (click)="hideConfirm()" />
   </div>
 </div>

src/app/control/custom-actions/custom-actions.component.scss

@@ -60,41 +60,3 @@
     }
   }
 }
-
-.confirm {
-  position: fixed;
-  top: 22vh;
-  width: 64vw;
-  margin-left: 15vw;
-  background-color: #5a6675;
-  border-radius: 2vw;
-  padding: 3vh 3vw;
-  z-index: 10;
-
-  &__sub-heading {
-    font-size: 2.4vw;
-    padding-top: 2vh;
-  }
-
-  &__gcode {
-    font-size: 2.2vw;
-    padding: 2vh 1.5vw;
-    font-family: 'Cousine', monospace;
-  }
-
-  &__icon {
-    height: 15vh;
-    margin-top: 5vh;
-    margin-left: 15vw;
-  }
-
-  &__wrapper {
-    position: fixed;
-    z-index: 2;
-    background-color: rgba(0, 0, 0, 0.85);
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
-}

src/app/job-status/job-status.component.ts

@@ -36,7 +36,6 @@ export class JobStatusComponent implements OnInit, OnDestroy {
         if (jobStatus.file !== this.jobStatus?.file) {
           this.fileService.getThumbnail(jobStatus.fullPath).subscribe(thumbnail => {
             this.thumbnail = thumbnail;
-            console.log(this.thumbnail);
           });
         }
         this.jobStatus = jobStatus;

src/app/settings/settings.component.html

@@ -635,7 +635,6 @@
             <li>"Invalid Code" by Arthur Shlain from thenounproject.com</li>
             <li>"back" by Dwiky Setiawan from thenounproject.com</li>
             <li>"next" by Dwiky Setiawan from thenounproject.com</li>
-            <li>"checkmark" by Muhammad Faizal Rahman Hakim from thenounproject.com</li>
             <li>"delete" by Muhammad Faizal Rahman Hakim from thenounproject.com</li>
             <li>"Sliders" by Danny Lelieveld from thenounproject.com</li>
             <li>"Close" by Danny Lelieveld from thenounproject.com</li>
@@ -655,6 +654,8 @@
             <li>"Sort" by Adrien Coquet from thenounproject.com</li>
             <li>"height" by Ralf Schmitzer from thenounproject.com</li>
             <li>"connect" by Sebastian Belalcazar Lareo from thenounproject.com</li>
+            <li>"Close" by Arthur Shlain from thenounproject.com</li>
+            <li>"Confirm" by Arthur Shlain from thenounproject.com</li>
           </ul>
           <span class="settings__heading-2">Special Thanks</span>
           <p class="settings__text">

src/styles.scss

@@ -229,15 +229,42 @@ app-root {
   pointer-events: none;
 }
 
-.la-pacman {
-  overflow: visible;
-  margin-left: -4vw !important;
-  margin-top: -8vh !important;
+.confirm {
+  position: fixed;
+  top: 22vh;
+  width: 64vw;
+  margin-left: calc(15vw - 5px);
+  background-color: #353b48;
+  border: 5px solid rgba(255, 255, 255, 0.4);
+  border-radius: 2vw;
+  padding: 3vh 3vw;
+  z-index: 10;
+
+  &__sub-heading {
+    font-size: 2.4vw;
+    padding-top: 2vh;
+  }
 
-  &-text {
-    color: #f5f6fa;
-    font-size: 3vw;
-    font-weight: 500;
+  &__gcode {
+    font-size: 2.2vw;
+    padding: 2vh 1.5vw;
+    font-family: 'Cousine', monospace;
+  }
+
+  &__icon {
+    height: 15vh;
+    margin-top: 7vh;
+    margin-left: 15vw;
+  }
+
+  &__wrapper {
+    position: fixed;
+    z-index: 2;
+    background-color: rgba(0, 0, 0, 0.85);
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
   }
 }