diff --git a/.eslintrc.js b/.eslintrc.js index bba224ef07..5b09e9579c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,42 +1,43 @@ module.exports = { root: true, - parser: "@typescript-eslint/parser", - plugins: ["@typescript-eslint", "import", "simple-import-sort"], + parser: '@typescript-eslint/parser', + plugins: ['@typescript-eslint', 'import', 'simple-import-sort', 'prettier'], extends: [ - "eslint:recommended", - "plugin:@typescript-eslint/recommended", - "plugin:import/errors", - "plugin:import/warnings", - "plugin:import/typescript", + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:import/errors', + 'plugin:import/warnings', + 'plugin:import/typescript', ], parserOptions: { ecmaVersion: 2020, - sourceType: "module", + sourceType: 'module', }, rules: { - "@typescript-eslint/no-parameter-properties": "off", - "@typescript-eslint/no-use-before-define": "off", - "import/no-unresolved": "off", - camelcase: "warn", - "simple-import-sort/sort": "warn", - "sort-imports": "off", - "import/first": "warn", - "import/newline-after-import": "warn", - "import/no-duplicates": "warn", - "import/no-absolute-path": "warn", - "import/no-unused-modules": "warn", - "import/no-deprecated": "warn", - "import/no-self-import": "error", - "max-len": ["warn", { code: 170, tabWidth: 2, ignoreUrls: true }], + '@typescript-eslint/no-parameter-properties': 'off', + '@typescript-eslint/no-use-before-define': 'off', + 'import/no-unresolved': 'off', + camelcase: 'warn', + 'simple-import-sort/sort': 'warn', + 'sort-imports': 'off', + 'import/first': 'warn', + 'import/newline-after-import': 'warn', + 'import/no-duplicates': 'warn', + 'import/no-absolute-path': 'warn', + 'import/no-unused-modules': 'warn', + 'import/no-deprecated': 'warn', + 'import/no-self-import': 'error', + 'max-len': ['warn', { code: 170, tabWidth: 2, ignoreUrls: true }], + 'prettier/prettier': 'warn', }, overrides: [ { - files: "**/*.ts", + files: '**/*.ts', rules: { - "import/order": [ - "off", + 'import/order': [ + 'off', { - "newlines-between": "always", + 'newlines-between': 'always', }, ], }, diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000000..8e735d4169 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,13 @@ +{ + "tabWidth": 2, + "useTabs": false, + "arrowParens": "avoid", + "bracketSpacing": true, + "endOfLine": "lf", + "jsxBracketSameLine": true, + "printWidth": 120, + "semi": true, + "singleQuote": true, + "trailingComma": "all", + "htmlWhitespaceSensitivity": "ignore" +} diff --git a/browserslist b/browserslist deleted file mode 100644 index 80848532e4..0000000000 --- a/browserslist +++ /dev/null @@ -1,12 +0,0 @@ -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -> 0.5% -last 2 versions -Firefox ESR -not dead -not IE 9-11 # For IE 9-11 support, remove 'not'. \ No newline at end of file diff --git a/docs/js/main.js b/docs/js/main.js index 738bb41710..4c6ca0e683 100644 --- a/docs/js/main.js +++ b/docs/js/main.js @@ -115,7 +115,6 @@ AOS.init({ var scrollDown = function () { $('.mouse-icon').on('click', function (event) { - console.log("HERE") event.preventDefault(); $('html,body').animate({ @@ -131,7 +130,6 @@ AOS.init({ var gotoInstallation = function () { $('.goto-installation').on('click', function (event) { - console.log("HERE") event.preventDefault(); $('html,body').animate({ @@ -147,7 +145,6 @@ AOS.init({ var gotoFAQ = function () { $('.goto-faq').on('click', function (event) { - console.log("HERE") event.preventDefault(); $('html,body').animate({ @@ -163,7 +160,6 @@ AOS.init({ var gotoScreenshots = function () { $('.goto-screenshots').on('click', function (event) { - console.log("HERE") event.preventDefault(); $('html,body').animate({ @@ -179,7 +175,6 @@ AOS.init({ var gotoFeatures = function () { $('.goto-features').on('click', function (event) { - console.log("HERE") event.preventDefault(); $('html,body').animate({ diff --git a/main.js b/main.js index c1831379fc..cee8ce0bc9 100644 --- a/main.js +++ b/main.js @@ -1,35 +1,35 @@ /* eslint-disable no-undef */ /* eslint-disable @typescript-eslint/no-var-requires */ -const { app, BrowserWindow, ipcMain } = require("electron"); -const electronStore = require("electron-store"); -const fs = require("fs"); +const { app, BrowserWindow, ipcMain } = require('electron'); +const electronStore = require('electron-store'); +const fs = require('fs'); const got = require('got'); -const path = require("path"); -const url = require("url"); +const path = require('path'); +const url = require('url'); const stream = require('stream'); -const {promisify} = require('util'); +const { promisify } = require('util'); const progress = require('progress-stream'); -const exec = require("child_process").exec; +const exec = require('child_process').exec; const store = new electronStore(); const args = process.argv.slice(1); -const big = args.some((val) => val === "--big"); -const dev = args.some((val) => val === "--serve"); +const big = args.some(val => val === '--big'); +const dev = args.some(val => val === '--serve'); -app.commandLine.appendSwitch("touch-events", "enabled"); +app.commandLine.appendSwitch('touch-events', 'enabled'); app.allowRendererProcessReuse = true; let window; function createWindow() { - config = store.get("config"); - store.onDidChange("config", (newValue) => { + config = store.get('config'); + store.onDidChange('config', newValue => { config = newValue; }); - const { screen, session } = require("electron"); + const { screen, session } = require('electron'); if (!dev) { session.defaultSession.webRequest.onHeadersReceived((details, callback) => { @@ -49,26 +49,27 @@ function createWindow() { width: dev ? (big ? 1400 : 1080) : mainScreen.size.width, height: dev ? (big ? 502 : 342) : mainScreen.size.height, frame: dev ? true : false, - backgroundColor: "#353b48", + backgroundColor: '#353b48', webPreferences: { nodeIntegration: true, + enableRemoteModule: true, }, - icon: path.join(__dirname, "src", "assets", "icon", "icon.png"), + icon: path.join(__dirname, 'src', 'assets', 'icon', 'icon.png'), }); if (dev) { - require("electron-reload")(__dirname, { + require('electron-reload')(__dirname, { electron: require(`${__dirname}/node_modules/electron`), }); - window.loadURL("http://localhost:4200"); + window.loadURL('http://localhost:4200'); window.webContents.openDevTools(); } else { window.loadURL( url.format({ - pathname: path.join(__dirname, "dist/index.html"), - protocol: "file:", + pathname: path.join(__dirname, 'dist/index.html'), + protocol: 'file:', slashes: true, - }) + }), ); window.setFullScreen(true); } @@ -78,167 +79,165 @@ function createWindow() { activateReloadListener(); activateUpdateListener(); - window.on("closed", () => { + window.on('closed', () => { window = null; }); } function activateScreenSleepListener() { - ipcMain.on("screenSleep", () => { - exec("xset dpms force standby"); + ipcMain.on('screenSleep', () => { + exec('xset dpms force standby'); }); - ipcMain.on("screenWakeup", () => { - exec("xset s off"); - exec("xset -dpms"); - exec("xset s noblank"); + ipcMain.on('screenWakeup', () => { + exec('xset s off'); + exec('xset -dpms'); + exec('xset s noblank'); }); } function activateReloadListener() { - ipcMain.on("reload", () => { + ipcMain.on('reload', () => { window.loadURL( url.format({ - pathname: path.join(__dirname, "dist/index.html"), - protocol: "file:", + pathname: path.join(__dirname, 'dist/index.html'), + protocol: 'file:', slashes: true, - }) + }), ); }); } function activateAppInfoListener() { - ipcMain.on("appInfo", () => { + ipcMain.on('appInfo', () => { sendCustomStyles(); sendVersionInfo(); }); } function activateUpdateListener() { - ipcMain.on("update", (_, updateInfo) => { + ipcMain.on('update', (_, updateInfo) => { downloadUpdate(updateInfo); }); } function sendCustomStyles() { - fs.readFile(path.join(app.getPath("userData"), "custom-styles.css"), "utf-8", (err, data) => { + fs.readFile(path.join(app.getPath('userData'), 'custom-styles.css'), 'utf-8', (err, data) => { if (err) { - if (err.code === "ENOENT") { - fs.writeFile(path.join(app.getPath("userData"), "custom-styles.css"), "", (err) => { + if (err.code === 'ENOENT') { + fs.writeFile(path.join(app.getPath('userData'), 'custom-styles.css'), '', err => { if (err) { - window.webContents.send("customStylesError", err); + window.webContents.send('customStylesError', err); } else { - window.webContents.send("customStyles", ""); + window.webContents.send('customStyles', ''); } }); } else { - window.webContents.send("customStylesError", err); + window.webContents.send('customStylesError', err); } } else { - window.webContents.send("customStyles", data); + window.webContents.send('customStyles', data); } }); } function sendVersionInfo() { - window.webContents.send("versionInformation", { + window.webContents.send('versionInformation', { version: app.getVersion(), }); } function downloadUpdate(updateInfo) { - const downloadPath = "/tmp/octodash.deb"; + const downloadPath = '/tmp/octodash.deb'; - exec("arch", (err, stdout, stderr) => { + exec('arch', (err, stdout, stderr) => { if (err || stderr) { - window.webContents.send("updateError", { + window.webContents.send('updateError', { error: err ? err : { message: stderr }, }); } got(updateInfo.assetsURL) - .then((releaseFiles) => { - const reducer = (accumulator, currentValue) => accumulator + currentValue; - let averageETA = []; - let downloadURL; - let packageSize; - for (let package of JSON.parse(releaseFiles.body)) { - if (package.name.includes(stdout.trim())) { - downloadURL = package.browser_download_url; - packageSize = package.size; - } - } - if (downloadURL) { - const downloadPipeline = promisify(stream.pipeline); - let downloadProgress = progress({ - length: packageSize, - time: 300, - }); - - downloadProgress.on('progress', (progress) => { - averageETA.push(progress.eta); - if (averageETA.length > 4) averageETA.shift(); - window.webContents.send("updateDownloadProgress", { - percentage: progress.percentage, - transferred: (progress.transferred / 100000).toFixed(1), - total: (progress.length / 1000000).toFixed(1), - remaining: (progress.remaining / 100000).toFixed(1), - eta: new Date(averageETA.reduce(reducer) * 1000).toISOString().substr(14, 5), - runtime: new Date(progress.runtime * 1000).toISOString().substr(14, 5), - delta: (progress.delta / 100000).toFixed(1), - speed: (progress.speed / 1000000).toFixed(2), - }) - }) - - try { - if (fs.existsSync(downloadPath)) fs.unlinkSync(downloadPath) - } catch { - // no need to handle this properly + .then(releaseFiles => { + const reducer = (accumulator, currentValue) => accumulator + currentValue; + let averageETA = []; + let downloadURL; + let packageSize; + for (let package of JSON.parse(releaseFiles.body)) { + if (package.name.includes(stdout.trim())) { + downloadURL = package.browser_download_url; + packageSize = package.size; + } } + if (downloadURL) { + const downloadPipeline = promisify(stream.pipeline); + let downloadProgress = progress({ + length: packageSize, + time: 300, + }); + + downloadProgress.on('progress', progress => { + averageETA.push(progress.eta); + if (averageETA.length > 4) averageETA.shift(); + window.webContents.send('updateDownloadProgress', { + percentage: progress.percentage, + transferred: (progress.transferred / 100000).toFixed(1), + total: (progress.length / 1000000).toFixed(1), + remaining: (progress.remaining / 100000).toFixed(1), + eta: new Date(averageETA.reduce(reducer) * 1000).toISOString().substr(14, 5), + runtime: new Date(progress.runtime * 1000).toISOString().substr(14, 5), + delta: (progress.delta / 100000).toFixed(1), + speed: (progress.speed / 1000000).toFixed(2), + }); + }); + + try { + if (fs.existsSync(downloadPath)) fs.unlinkSync(downloadPath); + } catch { + // no need to handle this properly + } - downloadPipeline( - got.stream(downloadURL), - downloadProgress, - fs.createWriteStream(downloadPath) - ).catch((error) => { - window.webContents.send("updateError", { - error: { - message: `Can't download package! ${error.message}.` - } - }) - }).then(() => { - window.webContents.send("updateDownloadFinished"); - exec('sudo ~/scripts/update-octodash', (err, _, stderr) => { - if (err || stderr) { - window.webContents.send("updateError", { - error: err ? err : { message: stderr }, + downloadPipeline(got.stream(downloadURL), downloadProgress, fs.createWriteStream(downloadPath)) + .catch(error => { + window.webContents.send('updateError', { + error: { + message: `Can't download package! ${error.message}.`, + }, }); - } else { - window.webContents.send("updateInstalled"); - } - }) - }) - } else { - window.webContents.send("updateError", { - error: { - message: `Can't find matching package for architecture ${stdout}.` - } - }) - } - }) - .catch((error) => { - error.message = `Can't load releases. ${error.message}`; - window.webContents.send("updateError", {error}); - }) + }) + .then(() => { + window.webContents.send('updateDownloadFinished'); + exec('sudo ~/scripts/update-octodash', (err, _, stderr) => { + if (err || stderr) { + window.webContents.send('updateError', { + error: err ? err : { message: stderr }, + }); + } else { + window.webContents.send('updateInstalled'); + } + }); + }); + } else { + window.webContents.send('updateError', { + error: { + message: `Can't find matching package for architecture ${stdout}.`, + }, + }); + } + }) + .catch(error => { + error.message = `Can't load releases. ${error.message}`; + window.webContents.send('updateError', { error }); + }); }); } -app.on("ready", createWindow); +app.on('ready', createWindow); -app.on("window-all-closed", () => { +app.on('window-all-closed', () => { app.quit(); }); -app.on("activate", () => { +app.on('activate', () => { if (window === null) { createWindow(); } diff --git a/package-lock.json b/package-lock.json index be67fbfb65..dbb4cf3896 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7154,6 +7154,15 @@ } } }, + "eslint-plugin-prettier": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.4.tgz", + "integrity": "sha512-jZDa8z76klRqo+TdGDTFJSavwbnWK2ZpqGKNZ+VvweMW516pDUMmQ2koXvxEE4JhzNvTv+radye/bWGBmA6jmg==", + "dev": true, + "requires": { + "prettier-linter-helpers": "^1.0.0" + } + }, "eslint-plugin-simple-import-sort": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-5.0.3.tgz", @@ -7586,6 +7595,12 @@ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, + "fast-diff": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", + "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", + "dev": true + }, "fast-glob": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.4.tgz", @@ -12194,6 +12209,15 @@ "integrity": "sha512-lz28cCbA1cDFHVuY8vvj6QuqOwIpyIfPUYkSl8AZ/vxH8qBXMMjE2knfLHCrZCmUsK/H1bg1P0tOo0dJkTJHvw==", "dev": true }, + "prettier-linter-helpers": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", + "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", + "dev": true, + "requires": { + "fast-diff": "^1.1.2" + } + }, "process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", diff --git a/package.json b/package.json index aedf917089..25861b275d 100644 --- a/package.json +++ b/package.json @@ -104,6 +104,7 @@ "electron-reload": "^1.5.0", "eslint": "7.7.0", "eslint-plugin-import": "^2.22.0", + "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-simple-import-sort": "^5.0.3", "npm-run-all": "^4.1.5", "prettier": "^2.1.0", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index cdefd7777a..5b9b09aa0c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,9 +1,9 @@ -import { Component } from "@angular/core"; -import { Router } from "@angular/router"; -import _ from "lodash"; +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; +import _ from 'lodash'; -import { AppService } from "./app.service"; -import { ConfigService } from "./config/config.service"; +import { AppService } from './app.service'; +import { ConfigService } from './config/config.service'; declare global { interface Window { @@ -15,12 +15,12 @@ declare global { } @Component({ - selector: "app-root", - templateUrl: "./app.component.html", - styleUrls: ["./app.component.scss"], + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'], }) export class AppComponent { - public constructor(private configService: ConfigService, private service: AppService, private router: Router) { + public constructor(private service: AppService, private configService: ConfigService, private router: Router) { this.initialize(); } @@ -29,9 +29,9 @@ export class AppComponent { if (this.configService.isLoaded()) { if (this.configService.isValid()) { if (this.configService.isTouchscreen()) { - this.router.navigate(["/main-screen"]); + this.router.navigate(['/main-screen']); } else { - this.router.navigate(["/main-screen-no-touch"]); + this.router.navigate(['/main-screen-no-touch']); } } else { if (_.isEqual(this.configService.getErrors(), this.service.getUpdateError())) { @@ -39,14 +39,14 @@ export class AppComponent { this.initialize(); } else { this.configService.setUpdate(); - this.router.navigate(["/no-config"]); + this.router.navigate(['/no-config']); } } else { - this.router.navigate(["/invalid-config"]); + this.router.navigate(['/invalid-config']); } } } else { - this.router.navigate(["/no-config"]); + this.router.navigate(['/no-config']); } } else { setTimeout(this.initialize.bind(this), 1000); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index cd8c126bd3..b7657a9bff 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,39 +1,39 @@ -import { HttpClientModule } from "@angular/common/http"; -import { NgModule } from "@angular/core"; -import { FormsModule } from "@angular/forms"; -import { MatRippleModule } from "@angular/material/core"; -import { BrowserModule } from "@angular/platform-browser"; -import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; -import { FaIconLibrary, FontAwesomeModule } from "@fortawesome/angular-fontawesome"; -import { fas } from "@fortawesome/free-solid-svg-icons"; -import { RoundProgressModule } from "angular-svg-round-progressbar"; -import { NgxSpinnerModule } from "ngx-spinner"; +import { HttpClientModule } from '@angular/common/http'; +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatRippleModule } from '@angular/material/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome'; +import { fas } from '@fortawesome/free-solid-svg-icons'; +import { RoundProgressModule } from 'angular-svg-round-progressbar'; +import { NgxSpinnerModule } from 'ngx-spinner'; -import { AppComponent } from "./app.component"; -import { AppRoutingModule } from "./app.routing.module"; -import { AppService } from "./app.service"; -import { BottomBarComponent } from "./bottom-bar/bottom-bar.component"; -import { ConfigService } from "./config/config.service"; -import { InvalidConfigComponent } from "./config/invalid-config/invalid-config.component"; -import { NoConfigComponent } from "./config/no-config/no-config.component"; -import { ControlComponent } from "./control/control.component"; -import { FilamentComponent } from "./filament/filament.component"; -import { FilesComponent } from "./files/files.component"; -import { JobStatusComponent } from "./job-status/job-status.component"; -import { JobService } from "./job.service"; -import { LayerProgressComponent } from "./layer-progress/layer-progress.component"; -import { MainMenuComponent } from "./main-menu/main-menu.component"; -import { MainScreenComponent } from "./main-screen/main-screen.component"; -import { MainScreenNoTouchComponent } from "./main-screen/no-touch/main-screen-no-touch.component"; -import { NotificationComponent } from "./notification/notification.component"; -import { NotificationService } from "./notification/notification.service"; -import { PrintControlComponent } from "./print-control/print-control.component"; -import { PrinterStatusComponent } from "./printer-status/printer-status.component"; -import { PrinterService } from "./printer.service"; -import { SettingsComponent } from "./settings/settings.component"; -import { StandbyComponent } from "./standby/standby.component"; -import { UpdateComponent } from "./update/update.component"; -import { URLSafePipe } from "./url.pipe"; +import { AppComponent } from './app.component'; +import { AppRoutingModule } from './app.routing.module'; +import { AppService } from './app.service'; +import { BottomBarComponent } from './bottom-bar/bottom-bar.component'; +import { ConfigService } from './config/config.service'; +import { InvalidConfigComponent } from './config/invalid-config/invalid-config.component'; +import { NoConfigComponent } from './config/no-config/no-config.component'; +import { ControlComponent } from './control/control.component'; +import { FilamentComponent } from './filament/filament.component'; +import { FilesComponent } from './files/files.component'; +import { JobStatusComponent } from './job-status/job-status.component'; +import { JobService } from './job.service'; +import { LayerProgressComponent } from './layer-progress/layer-progress.component'; +import { MainMenuComponent } from './main-menu/main-menu.component'; +import { MainScreenComponent } from './main-screen/main-screen.component'; +import { MainScreenNoTouchComponent } from './main-screen/no-touch/main-screen-no-touch.component'; +import { NotificationComponent } from './notification/notification.component'; +import { NotificationService } from './notification/notification.service'; +import { PrintControlComponent } from './print-control/print-control.component'; +import { PrinterStatusComponent } from './printer-status/printer-status.component'; +import { PrinterService } from './printer.service'; +import { SettingsComponent } from './settings/settings.component'; +import { StandbyComponent } from './standby/standby.component'; +import { UpdateComponent } from './update/update.component'; +import { URLSafePipe } from './url.pipe'; @NgModule({ declarations: [ @@ -70,6 +70,7 @@ import { URLSafePipe } from "./url.pipe"; ], providers: [AppService, ConfigService, NotificationService, PrinterService, JobService], bootstrap: [AppComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AppModule { public constructor(library: FaIconLibrary) { diff --git a/src/app/app.routing.module.ts b/src/app/app.routing.module.ts index 56912272de..9212a9a2ae 100644 --- a/src/app/app.routing.module.ts +++ b/src/app/app.routing.module.ts @@ -1,52 +1,52 @@ -import { CommonModule } from "@angular/common"; -import { NgModule } from "@angular/core"; -import { RouterModule, Routes } from "@angular/router"; +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; -import { InvalidConfigComponent } from "./config/invalid-config/invalid-config.component"; -import { NoConfigComponent } from "./config/no-config/no-config.component"; -import { ControlComponent } from "./control/control.component"; -import { FilamentComponent } from "./filament/filament.component"; -import { FilesComponent } from "./files/files.component"; -import { MainScreenComponent } from "./main-screen/main-screen.component"; -import { MainScreenNoTouchComponent } from "./main-screen/no-touch/main-screen-no-touch.component"; -import { SettingsComponent } from "./settings/settings.component"; -import { StandbyComponent } from "./standby/standby.component"; +import { InvalidConfigComponent } from './config/invalid-config/invalid-config.component'; +import { NoConfigComponent } from './config/no-config/no-config.component'; +import { ControlComponent } from './control/control.component'; +import { FilamentComponent } from './filament/filament.component'; +import { FilesComponent } from './files/files.component'; +import { MainScreenComponent } from './main-screen/main-screen.component'; +import { MainScreenNoTouchComponent } from './main-screen/no-touch/main-screen-no-touch.component'; +import { SettingsComponent } from './settings/settings.component'; +import { StandbyComponent } from './standby/standby.component'; const routes: Routes = [ { - path: "main-screen", + path: 'main-screen', component: MainScreenComponent, }, { - path: "main-screen-no-touch", + path: 'main-screen-no-touch', component: MainScreenNoTouchComponent, }, { - path: "control", + path: 'control', component: ControlComponent, }, { - path: "filament", + path: 'filament', component: FilamentComponent, }, { - path: "files", + path: 'files', component: FilesComponent, }, { - path: "invalid-config", + path: 'invalid-config', component: InvalidConfigComponent, }, { - path: "no-config", + path: 'no-config', component: NoConfigComponent, }, { - path: "settings", + path: 'settings', component: SettingsComponent, }, { - path: "standby", + path: 'standby', component: StandbyComponent, }, ]; diff --git a/src/app/app.service.ts b/src/app/app.service.ts index 917e41f511..dfcc207929 100644 --- a/src/app/app.service.ts +++ b/src/app/app.service.ts @@ -1,11 +1,11 @@ -import { HttpClient } from "@angular/common/http"; -import { Injectable } from "@angular/core"; +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; -import { ConfigService } from "./config/config.service"; -import { NotificationService } from "./notification/notification.service"; +import { ConfigService } from './config/config.service'; +import { NotificationService } from './notification/notification.service'; @Injectable({ - providedIn: "root", + providedIn: 'root', }) export class AppService { private updateError: string[]; @@ -20,19 +20,19 @@ export class AppService { public constructor( private configService: ConfigService, private notificationService: NotificationService, - private http: HttpClient + private http: HttpClient, ) { try { - this.ipc = window.require("electron").ipcRenderer; + this.ipc = window.require('electron').ipcRenderer; this.enableVersionListener(); this.enableCustomCSSListener(); setTimeout(() => { - this.ipc.send("appInfo"); + this.ipc.send('appInfo'); }, 0); } catch (e) { this.notificationService.setError( "Can't connect to backend", - "Please restart your system. If the issue persists open an issue on GitHub." + 'Please restart your system. If the issue persists open an issue on GitHub.', ); } this.updateError = [ @@ -52,35 +52,35 @@ export class AppService { } private enableVersionListener(): void { - this.ipc.on("versionInformation", (_, versionInformation: VersionInformation): void => { + this.ipc.on('versionInformation', (_, versionInformation: VersionInformation): void => { this.version = versionInformation.version; this.checkUpdate(); }); } private enableCustomCSSListener(): void { - this.ipc.on("customStyles", (_, customCSS: string): void => { - const css = document.createElement("style"); - css.type = "text/css"; + this.ipc.on('customStyles', (_, customCSS: string): void => { + const css = document.createElement('style'); + css.type = 'text/css'; css.appendChild(document.createTextNode(customCSS)); document.head.append(css); }); - this.ipc.on("customStylesError", (_, customCSSError: string): void => { + this.ipc.on('customStylesError', (_, customCSSError: string): void => { this.notificationService.setError("Can't load custom styles!", customCSSError); }); } private checkUpdate(): void { - this.http.get("https://api.github.com/repos/UnchartedBull/OctoDash/releases/latest").subscribe( + this.http.get('https://api.github.com/repos/UnchartedBull/OctoDash/releases/latest').subscribe( (data: GitHubReleaseInformation): void => { - if (this.version !== data.name.replace("v", "")) { + if (this.version !== data.name.replace('v', '')) { this.updateAvailable = true; } - this.latestVersion = data.name.replace("v", ""); + this.latestVersion = data.name.replace('v', ''); this.latestVersionAssetsURL = data.assets_url; }, - (): void => null + (): void => null, ); setTimeout(this.checkUpdate.bind(this), 3600000); } @@ -95,13 +95,13 @@ export class AppService { public turnDisplayOff(): void { if (this.ipc) { - this.ipc.send("screenSleep", ""); + this.ipc.send('screenSleep', ''); } } public turnDisplayOn(): void { if (this.ipc) { - this.ipc.send("screenWakeup", ""); + this.ipc.send('screenWakeup', ''); } } @@ -126,9 +126,9 @@ export class AppService { } public convertDateToString(date: Date): string { - return `${("0" + date.getDate()).slice(-2)}.${("0" + (date.getMonth() + 1)).slice(-2)}.${date.getFullYear()} ${( - "0" + date.getHours() - ).slice(-2)}:${("0" + date.getMinutes()).slice(-2)}:${("0" + date.getSeconds()).slice(-2)}`; + return `${('0' + date.getDate()).slice(-2)}.${('0' + (date.getMonth() + 1)).slice(-2)}.${date.getFullYear()} ${( + '0' + date.getHours() + ).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`; } public convertSecondsToHours(input: number): string { @@ -140,7 +140,7 @@ export class AppService { roundedMinutes = 0; roundedHours += 1; } - return roundedHours + ":" + ("0" + roundedMinutes).slice(-2); + return roundedHours + ':' + ('0' + roundedMinutes).slice(-2); } public convertFilamentVolumeToWeight(filamentVolume: number): number { diff --git a/src/app/bottom-bar/bottom-bar.component.ts b/src/app/bottom-bar/bottom-bar.component.ts index b9fb700efd..1588e531a7 100644 --- a/src/app/bottom-bar/bottom-bar.component.ts +++ b/src/app/bottom-bar/bottom-bar.component.ts @@ -1,14 +1,14 @@ -import { Component, OnDestroy } from "@angular/core"; -import { Subscription } from "rxjs"; +import { Component, OnDestroy } from '@angular/core'; +import { Subscription } from 'rxjs'; -import { ConfigService } from "../config/config.service"; -import { EnclosureService } from "../plugin-service/enclosure.service"; -import { PrinterService, PrinterStatusAPI } from "../printer.service"; +import { ConfigService } from '../config/config.service'; +import { EnclosureService } from '../plugin-service/enclosure.service'; +import { PrinterService, PrinterStatusAPI } from '../printer.service'; @Component({ - selector: "app-bottom-bar", - templateUrl: "./bottom-bar.component.html", - styleUrls: ["./bottom-bar.component.scss"], + selector: 'app-bottom-bar', + templateUrl: './bottom-bar.component.html', + styleUrls: ['./bottom-bar.component.scss'], }) export class BottomBarComponent implements OnDestroy { private subscriptions: Subscription = new Subscription(); @@ -18,25 +18,25 @@ export class BottomBarComponent implements OnDestroy { public constructor( private printerService: PrinterService, private configService: ConfigService, - private enclosureService: EnclosureService + private enclosureService: EnclosureService, ) { if (this.configService.getAmbientTemperatureSensorName() !== null) { this.subscriptions.add( this.enclosureService.getObservable().subscribe((temperatureReading: TemperatureReading): void => { this.enclosureTemperature = temperatureReading; - }) + }), ); } else { this.enclosureTemperature = null; } this.printer = { name: this.configService.getPrinterName(), - status: "connecting ...", + status: 'connecting ...', }; this.subscriptions.add( this.printerService.getObservable().subscribe((printerStatus: PrinterStatusAPI): void => { this.printer.status = printerStatus.status; - }) + }), ); } diff --git a/src/app/config/config.service.ts b/src/app/config/config.service.ts index a43153e708..b2d971a298 100644 --- a/src/app/config/config.service.ts +++ b/src/app/config/config.service.ts @@ -1,12 +1,12 @@ -import { HttpHeaders } from "@angular/common/http"; -import { Injectable } from "@angular/core"; -import Ajv from "ajv"; -import _ from "lodash"; +import { HttpHeaders } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import Ajv from 'ajv'; +import _ from 'lodash'; -import { NotificationService } from "../notification/notification.service"; +import { NotificationService } from '../notification/notification.service'; @Injectable({ - providedIn: "root", + providedIn: 'root', }) export class ConfigService { // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -24,13 +24,14 @@ export class ConfigService { const ajv = new Ajv({ allErrors: true }); this.validator = ajv.compile(schema); try { - const Store = window.require("electron-store"); + const Store = window.require('electron-store'); this.store = new Store(); - this.initialize(this.store.get("config")); + this.initialize(this.store.get('config')); } catch (e) { + console.error(e); this.notificationService.setError( "Can't read config file!", - "Please restart your system. If the issue persists open an issue on GitHub." + 'Please restart your system. If the issue persists open an issue on GitHub.', ); } } @@ -41,10 +42,10 @@ export class ConfigService { if (this.valid) { this.httpHeaders = { headers: new HttpHeaders({ - "x-api-key": this.config.octoprint.accessToken, - "Cache-Control": "no-cache", - Pragma: "no-cache", - Expires: "0", + 'x-api-key': this.config.octoprint.accessToken, + 'Cache-Control': 'no-cache', + Pragma: 'no-cache', + Expires: '0', }), }; } @@ -52,7 +53,7 @@ export class ConfigService { } public getRemoteConfig(): Config { - return this.store.get("config"); + return this.store.get('config'); } public getCurrentConfig(): Config { @@ -74,10 +75,10 @@ export class ConfigService { public getErrors(): string[] { const errors = []; this.validator.errors.forEach((error): void => { - if (error.keyword === "type") { + if (error.keyword === 'type') { errors.push(`${error.dataPath} ${error.message}`); } else { - errors.push(`${error.dataPath === "" ? "." : error.dataPath} ${error.message}`); + errors.push(`${error.dataPath === '' ? '.' : error.dataPath} ${error.message}`); } }); console.error(errors); @@ -89,29 +90,29 @@ export class ConfigService { config = this.config; } if (window && window.process && window.process.type) { - this.store.set("config", config); - const configStored = this.store.get("config"); + this.store.set('config', config); + const configStored = this.store.get('config'); if (this.validateGiven(configStored)) { return null; } else { - return "Saved config is invalid!"; + return 'Saved config is invalid!'; } } else { - return 'Browser version doesn\'t support saving!'; + return "Browser version doesn't support saving!"; } } public updateConfig(): void { if (window && window.process && window.process.type) { this.update = false; - this.initialize(this.store.get("config")); + this.initialize(this.store.get('config')); } } public revertConfigForInput(config: Config): Config { config.octoprint.urlSplit = { - url: config.octoprint.url.split(":")[1].replace("//", ""), - port: parseInt(config.octoprint.url.split(":")[2].replace("/api/", ""), 10), + url: config.octoprint.url.split(':')[1].replace('//', ''), + port: parseInt(config.octoprint.url.split(':')[2].replace('/api/', ''), 10), }; if (isNaN(config.octoprint.urlSplit.port)) { config.octoprint.urlSplit.port = null; @@ -202,11 +203,11 @@ export class ConfigService { return this.config.filament.density; } - public getDefaultSortingAttribute(): "name" | "date" | "size" { + public getDefaultSortingAttribute(): 'name' | 'date' | 'size' { return this.config.octodash.fileSorting.attribute; } - public getDefaultSortingOrder(): "asc" | "dsc" { + public getDefaultSortingOrder(): 'asc' | 'dsc' { return this.config.octodash.fileSorting.order; } @@ -340,285 +341,285 @@ interface CustomAction { } interface FileSorting { - attribute: "name" | "date" | "size"; - order: "asc" | "dsc"; + attribute: 'name' | 'date' | 'size'; + order: 'asc' | 'dsc'; } const schema = { definitions: {}, - $schema: "http://json-schema.org/draft-07/schema#", - $id: "http://example.com/root.json", - type: "object", - required: ["octoprint", "printer", "filament", "plugins", "octodash"], + $schema: 'http://json-schema.org/draft-07/schema#', + $id: 'http://example.com/root.json', + type: 'object', + required: ['octoprint', 'printer', 'filament', 'plugins', 'octodash'], properties: { octoprint: { - $id: "#/properties/octoprint", - type: "object", - required: ["accessToken", "url"], + $id: '#/properties/octoprint', + type: 'object', + required: ['accessToken', 'url'], properties: { accessToken: { - $id: "#/properties/octoprint/properties/accessToken", - type: "string", - pattern: "^(.*)$", + $id: '#/properties/octoprint/properties/accessToken', + type: 'string', + pattern: '^(.*)$', }, url: { - $id: "#/properties/octoprint/properties/url", - type: "string", - pattern: "^(.*)$", + $id: '#/properties/octoprint/properties/url', + type: 'string', + pattern: '^(.*)$', }, }, }, printer: { - $id: "#/properties/printer", - type: "object", - required: ["name", "xySpeed", "zSpeed", "defaultTemperatureFanSpeed"], + $id: '#/properties/printer', + type: 'object', + required: ['name', 'xySpeed', 'zSpeed', 'defaultTemperatureFanSpeed'], properties: { name: { - $id: "#/properties/printer/properties/name", - type: "string", - pattern: "^(.*)$", + $id: '#/properties/printer/properties/name', + type: 'string', + pattern: '^(.*)$', }, xySpeed: { - $id: "#/properties/printer/properties/xySpeed", - type: "integer", + $id: '#/properties/printer/properties/xySpeed', + type: 'integer', }, zSpeed: { - $id: "#/properties/printer/properties/zSpeed", - type: "integer", + $id: '#/properties/printer/properties/zSpeed', + type: 'integer', }, defaultTemperatureFanSpeed: { - $id: "#/properties/printer/properties/defaultTemperatureFanSpeed", - type: "object", - required: ["hotend", "heatbed", "fan"], + $id: '#/properties/printer/properties/defaultTemperatureFanSpeed', + type: 'object', + required: ['hotend', 'heatbed', 'fan'], properties: { hotend: { - $id: "#/properties/printer/properties/defaultTemperatureFanSpeed/hotend", - type: "integer", + $id: '#/properties/printer/properties/defaultTemperatureFanSpeed/hotend', + type: 'integer', }, heatbed: { - $id: "#/properties/printer/properties/defaultTemperatureFanSpeed/heatbed", - type: "integer", + $id: '#/properties/printer/properties/defaultTemperatureFanSpeed/heatbed', + type: 'integer', }, fan: { - $id: "#/properties/printer/properties/defaultTemperatureFanSpeed/fan", - type: "integer", + $id: '#/properties/printer/properties/defaultTemperatureFanSpeed/fan', + type: 'integer', }, }, }, }, }, filament: { - $id: "#/properties/filament", - type: "object", - required: ["density", "thickness", "feedLength", "feedSpeed", "feedSpeedSlow", "purgeDistance", "useM600"], + $id: '#/properties/filament', + type: 'object', + required: ['density', 'thickness', 'feedLength', 'feedSpeed', 'feedSpeedSlow', 'purgeDistance', 'useM600'], properties: { density: { - $id: "#/properties/filament/properties/density", - type: "number", + $id: '#/properties/filament/properties/density', + type: 'number', }, thickness: { - $id: "#/properties/filament/properties/thickness", - type: "number", + $id: '#/properties/filament/properties/thickness', + type: 'number', }, feedLength: { - $id: "#/properties/filament/properties/feedLength", - type: "integer", + $id: '#/properties/filament/properties/feedLength', + type: 'integer', }, feedSpeed: { - $id: "#/properties/filament/properties/feedSpeed", - type: "integer", + $id: '#/properties/filament/properties/feedSpeed', + type: 'integer', }, feedSpeedSlow: { - $id: "#/properties/filament/properties/feedSpeedSlow", - type: "integer", + $id: '#/properties/filament/properties/feedSpeedSlow', + type: 'integer', }, purgeDistance: { - $id: "#/properties/filament/properties/purgeDistance", - type: "integer", + $id: '#/properties/filament/properties/purgeDistance', + type: 'integer', }, useM600: { - $id: "#/properties/filament/properties/useM600", - type: "boolean", + $id: '#/properties/filament/properties/useM600', + type: 'boolean', }, }, }, plugins: { - $id: "#/properties/plugins", - type: "object", + $id: '#/properties/plugins', + type: 'object', required: [ - "displayLayerProgress", - "enclosure", - "filamentManager", - "preheatButton", - "printTimeGenius", - "psuControl", + 'displayLayerProgress', + 'enclosure', + 'filamentManager', + 'preheatButton', + 'printTimeGenius', + 'psuControl', ], properties: { displayLayerProgress: { - $id: "#/properties/plugins/properties/displayLayerProgress", - type: "object", - required: ["enabled"], + $id: '#/properties/plugins/properties/displayLayerProgress', + type: 'object', + required: ['enabled'], properties: { enabled: { - $id: "#/properties/plugins/properties/displayLayerProgress/properties/enabled", - type: "boolean", + $id: '#/properties/plugins/properties/displayLayerProgress/properties/enabled', + type: 'boolean', }, }, }, enclosure: { - $id: "#/properties/plugins/properties/enclosure", - type: "object", - required: ["enabled", "ambientSensorID", "filament1SensorID", "filament2SensorID"], + $id: '#/properties/plugins/properties/enclosure', + type: 'object', + required: ['enabled', 'ambientSensorID', 'filament1SensorID', 'filament2SensorID'], properties: { enabled: { - $id: "#/properties/plugins/properties/enclosure/properties/enabled", - type: "boolean", + $id: '#/properties/plugins/properties/enclosure/properties/enabled', + type: 'boolean', }, ambientSensorID: { - $id: "#/properties/plugins/properties/enclosure/properties/ambientSensorID", - type: ["number", "null"], - pattern: "^(.*)$", + $id: '#/properties/plugins/properties/enclosure/properties/ambientSensorID', + type: ['number', 'null'], + pattern: '^(.*)$', }, filament1SensorID: { - $id: "#/properties/plugins/properties/enclosure/properties/filament1SensorID", - type: ["number", "null"], - pattern: "^(.*)$", + $id: '#/properties/plugins/properties/enclosure/properties/filament1SensorID', + type: ['number', 'null'], + pattern: '^(.*)$', }, filament2SensorID: { - $id: "#/properties/plugins/properties/enclosure/properties/filament2SensorID", - type: ["number", "null"], - pattern: "^(.*)$", + $id: '#/properties/plugins/properties/enclosure/properties/filament2SensorID', + type: ['number', 'null'], + pattern: '^(.*)$', }, }, }, filamentManager: { - $id: "#/properties/plugins/properties/filamentManager", - type: "object", - required: ["enabled"], + $id: '#/properties/plugins/properties/filamentManager', + type: 'object', + required: ['enabled'], properties: { enabled: { - $id: "#/properties/plugins/properties/filamentManager/properties/enabled", - type: "boolean", + $id: '#/properties/plugins/properties/filamentManager/properties/enabled', + type: 'boolean', }, }, }, preheatButton: { - $id: "#/properties/plugins/properties/preheatButton", - type: "object", - required: ["enabled"], + $id: '#/properties/plugins/properties/preheatButton', + type: 'object', + required: ['enabled'], properties: { enabled: { - $id: "#/properties/plugins/properties/preheatButton/properties/enabled", - type: "boolean", + $id: '#/properties/plugins/properties/preheatButton/properties/enabled', + type: 'boolean', }, }, }, printTimeGenius: { - $id: "#/properties/plugins/properties/printTimeGenius", - type: "object", - required: ["enabled"], + $id: '#/properties/plugins/properties/printTimeGenius', + type: 'object', + required: ['enabled'], properties: { enabled: { - $id: "#/properties/plugins/properties/printTimeGenius/properties/enabled", - type: "boolean", + $id: '#/properties/plugins/properties/printTimeGenius/properties/enabled', + type: 'boolean', }, }, }, psuControl: { - $id: "#/properties/plugins/properties/psuControl", - type: "object", - required: ["enabled", "turnOnPSUWhenExitingSleep"], + $id: '#/properties/plugins/properties/psuControl', + type: 'object', + required: ['enabled', 'turnOnPSUWhenExitingSleep'], properties: { enabled: { - $id: "#/properties/plugins/properties/printTimeGenius/properties/enabled", - type: "boolean", + $id: '#/properties/plugins/properties/printTimeGenius/properties/enabled', + type: 'boolean', }, turnOnPSUWhenExitingSleep: { - $id: "#/properties/plugins/properties/turnOnPSUWhenExitingSleep", - type: "boolean", + $id: '#/properties/plugins/properties/turnOnPSUWhenExitingSleep', + type: 'boolean', }, }, }, }, }, octodash: { - $id: "#/properties/octodash", - type: "object", + $id: '#/properties/octodash', + type: 'object', required: [ - "customActions", - "fileSorting", - "pollingInterval", - "touchscreen", - "turnScreenOffWhileSleeping", - "preferPreviewWhilePrinting", + 'customActions', + 'fileSorting', + 'pollingInterval', + 'touchscreen', + 'turnScreenOffWhileSleeping', + 'preferPreviewWhilePrinting', ], properties: { customActions: { - $id: "#/properties/octodash/properties/customActions", - type: "array", + $id: '#/properties/octodash/properties/customActions', + type: 'array', items: { - $id: "#/properties/octodash/properties/customActions/items", - type: "object", - required: ["icon", "command", "color", "confirm", "exit"], + $id: '#/properties/octodash/properties/customActions/items', + type: 'object', + required: ['icon', 'command', 'color', 'confirm', 'exit'], properties: { icon: { - $id: "#/properties/octodash/properties/customActions/items/properties/icon", - type: "string", - pattern: "^(.*)$", + $id: '#/properties/octodash/properties/customActions/items/properties/icon', + type: 'string', + pattern: '^(.*)$', }, command: { - $id: "#/properties/octodash/properties/customActions/items/properties/command", - type: "string", - pattern: "^(.*)$", + $id: '#/properties/octodash/properties/customActions/items/properties/command', + type: 'string', + pattern: '^(.*)$', }, color: { - $id: "#/properties/octodash/properties/customActions/items/properties/color", - type: "string", - pattern: "^(.*)$", + $id: '#/properties/octodash/properties/customActions/items/properties/color', + type: 'string', + pattern: '^(.*)$', }, confirm: { - $id: "#/properties/octodash/properties/customActions/items/properties/confirm", - type: "boolean", + $id: '#/properties/octodash/properties/customActions/items/properties/confirm', + type: 'boolean', }, exit: { - $id: "#/properties/octodash/properties/customActions/items/properties/exit", - type: "boolean", + $id: '#/properties/octodash/properties/customActions/items/properties/exit', + type: 'boolean', }, }, }, }, fileSorting: { - $id: "#/properties/octodash/properties/fileSorting", - type: "object", - required: ["attribute", "order"], + $id: '#/properties/octodash/properties/fileSorting', + type: 'object', + required: ['attribute', 'order'], properties: { attribute: { - $id: "#/properties/octodash/properties/fileSorting/properties/attribute", - type: "string", - pattern: "^(name|date|size)$", + $id: '#/properties/octodash/properties/fileSorting/properties/attribute', + type: 'string', + pattern: '^(name|date|size)$', }, order: { - $id: "#/properties/octodash/properties/fileSorting/properties/order", - type: "string", - pattern: "^(asc|dsc)$", + $id: '#/properties/octodash/properties/fileSorting/properties/order', + type: 'string', + pattern: '^(asc|dsc)$', }, }, }, pollingInterval: { - $id: "#/properties/octodash/properties/pollingInterval", - type: "integer", + $id: '#/properties/octodash/properties/pollingInterval', + type: 'integer', }, touchscreen: { - $id: "#/properties/octodash/properties/touchscreen", - type: "boolean", + $id: '#/properties/octodash/properties/touchscreen', + type: 'boolean', }, turnScreenOffWhileSleeping: { - $id: "#/properties/octodash/properties/turnScreenOffWhileSleeping", - type: "boolean", + $id: '#/properties/octodash/properties/turnScreenOffWhileSleeping', + type: 'boolean', }, preferPreviewWhilePrinting: { - $id: "#/properties/octodash/properties/preferPreviewWhilePrinting", - type: "boolean", + $id: '#/properties/octodash/properties/preferPreviewWhilePrinting', + type: 'boolean', }, }, }, diff --git a/src/app/config/invalid-config/invalid-config.component.scss b/src/app/config/invalid-config/invalid-config.component.scss index cdd92b4fa3..f336a3a883 100644 --- a/src/app/config/invalid-config/invalid-config.component.scss +++ b/src/app/config/invalid-config/invalid-config.component.scss @@ -24,13 +24,13 @@ font-size: 3.6vw; margin-top: 5vh; list-style-type: disc; - font-family: "Cousine", monospace; + font-family: 'Cousine', monospace; & li { margin-top: 2vh; &::before { - content: "-"; + content: '-'; margin-right: 2vw; } } diff --git a/src/app/config/invalid-config/invalid-config.component.ts b/src/app/config/invalid-config/invalid-config.component.ts index 405f55bc80..a3b8648811 100644 --- a/src/app/config/invalid-config/invalid-config.component.ts +++ b/src/app/config/invalid-config/invalid-config.component.ts @@ -1,11 +1,11 @@ -import { Component, OnInit } from "@angular/core"; +import { Component, OnInit } from '@angular/core'; -import { ConfigService } from "../config.service"; +import { ConfigService } from '../config.service'; @Component({ - selector: "app-invalid-config", - templateUrl: "./invalid-config.component.html", - styleUrls: ["./invalid-config.component.scss"], + selector: 'app-invalid-config', + templateUrl: './invalid-config.component.html', + styleUrls: ['./invalid-config.component.scss'], }) export class InvalidConfigComponent implements OnInit { public errors: string[]; diff --git a/src/app/config/no-config/no-config.component.html b/src/app/config/no-config/no-config.component.html index a1168d368b..3033ffabab 100644 --- a/src/app/config/no-config/no-config.component.html +++ b/src/app/config/no-config/no-config.component.html @@ -2,7 +2,8 @@ @@ -19,17 +21,24 @@
Hey there! - It looks like this is the first start of OctoDash.
- I'll help you set up your config and get you started.
- If you encounter any issues please check the troubleshooting guide in the GitHub Wiki.
+ It looks like this is the first start of OctoDash.
- Thanks for choosing OctoDash + I'll help you set up your config and get you started. +
+ If you encounter any issues please check the troubleshooting guide in the GitHub Wiki. +
+
+ Thanks for choosing OctoDash + - Sorry for bothering you again ...
- We've released an update, so awesome, we needed to change the config. Please review your new config!
+ Sorry for bothering you again ... +
+ We've released an update, so awesome, we needed to change the config. Please review your new config!
- Thanks for choosing OctoDash +
+ Thanks for choosing OctoDash +
@@ -48,16 +57,14 @@ required /> -
+
If you're unsure about any values during setup, just stick with the defaults. You can change all values (and even more stuff) in the settings menu anytime. There is also a description of each attribute available in the GitHub Wiki.
- - I also need some information about your extruder. - + I also need some information about your extruder.
- mm + mm
mm/s -
+
These values will be used during the Filament Change Process. Be sure to have your Feed Length (length between Extruder and Hotend) and Feed Speed configured correctly.
@@ -106,7 +113,7 @@ [(ngModel)]="this.config.octoprint.urlSplit.url" name="octoprintURLName" required - style="width: 42.5vw;" + style="width: 42.5vw" /> :
@@ -126,15 +133,13 @@ class="no-config__input" [(ngModel)]="this.config.octoprint.accessToken" name="accessToken" - style="width: 67vw;" + style="width: 67vw" required />
- - And now personalize me to your liking. - + And now personalize me to your liking.
@@ -151,20 +156,18 @@ [(ngModel)]="this.config.octodash.pollingInterval" name="octodashPolling" required - style="width: 11vw;" + style="width: 11vw" /> ms -
+
Don't set your Value Refresh Interval too low (und 1000ms) as this may effect the performance of the Raspberry Pi.
- - What plugins are you running? - -
+ What plugins are you running? +
- - Great! I'll check everything. - + Great! I'll check everything.
@@ -255,7 +256,8 @@ *ngIf="configValid && octoprintConnection && !configSaved" class="no-config__6-finish" (click)="finishWizard()" - >done + > + done
diff --git a/src/app/config/no-config/no-config.component.scss b/src/app/config/no-config/no-config.component.scss index 54ce9cd068..08440bf859 100644 --- a/src/app/config/no-config/no-config.component.scss +++ b/src/app/config/no-config/no-config.component.scss @@ -159,7 +159,7 @@ &-errors { font-size: 3.6vw; - font-family: "Cousine", monospace; + font-family: 'Cousine', monospace; display: block; margin-bottom: 4vh; } diff --git a/src/app/config/no-config/no-config.component.ts b/src/app/config/no-config/no-config.component.ts index 840b5eceb9..523f4157fb 100644 --- a/src/app/config/no-config/no-config.component.ts +++ b/src/app/config/no-config/no-config.component.ts @@ -1,19 +1,19 @@ -import { HttpClient, HttpErrorResponse, HttpHeaders } from "@angular/common/http"; -import { Component, OnInit } from "@angular/core"; -import { Router } from "@angular/router"; +import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http'; +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; -import { Config, ConfigService } from "../config.service"; +import { Config, ConfigService } from '../config.service'; @Component({ - selector: "app-no-config", - templateUrl: "./no-config.component.html", - styleUrls: ["./no-config.component.scss"], + selector: 'app-no-config', + templateUrl: './no-config.component.html', + styleUrls: ['./no-config.component.scss'], }) export class NoConfigComponent implements OnInit { public page = 0; public totalPages = 6; - private configUpdate: boolean; + public configUpdate: boolean; public config: Config; public configErrors: string[]; public configValid: boolean; @@ -30,11 +30,11 @@ export class NoConfigComponent implements OnInit { } else { this.config = { octoprint: { - url: "http://localhost:5000/api/", - accessToken: "", + url: 'http://localhost:5000/api/', + accessToken: '', }, printer: { - name: "", + name: '', xySpeed: 150, zSpeed: 5, defaultTemperatureFanSpeed: { @@ -79,51 +79,51 @@ export class NoConfigComponent implements OnInit { octodash: { customActions: [ { - icon: "home", - command: "G28", - color: "#dcdde1", + icon: 'home', + command: 'G28', + color: '#dcdde1', confirm: false, exit: true, }, { - icon: "ruler-vertical", - command: "G29", - color: "#44bd32", + icon: 'ruler-vertical', + command: 'G29', + color: '#44bd32', confirm: false, exit: true, }, { - icon: "fire-alt", - command: "M140 S50; M104 S185", - color: "#e1b12c", + icon: 'fire-alt', + command: 'M140 S50; M104 S185', + color: '#e1b12c', confirm: false, exit: true, }, { - icon: "snowflake", - command: "M140 S0; M104 S0", - color: "#0097e6", + icon: 'snowflake', + command: 'M140 S0; M104 S0', + color: '#0097e6', confirm: false, exit: true, }, { - icon: "redo-alt", - command: "[!RELOAD]", - color: "#7f8fa6", + icon: 'redo-alt', + command: '[!RELOAD]', + color: '#7f8fa6', confirm: true, exit: false, }, { - icon: "skull", - command: "[!KILL]", - color: "#e84118", + icon: 'skull', + command: '[!KILL]', + color: '#e84118', confirm: true, exit: false, }, ], fileSorting: { - attribute: "name", - order: "asc", + attribute: 'name', + order: 'asc', }, pollingInterval: 2000, touchscreen: true, @@ -142,10 +142,10 @@ export class NoConfigComponent implements OnInit { public testOctoprintAPI(): boolean { const httpHeaders = { headers: new HttpHeaders({ - "x-api-key": this.config.octoprint.accessToken, + 'x-api-key': this.config.octoprint.accessToken, }), }; - this.http.get(this.config.octoprint.url + "connection", httpHeaders).subscribe( + this.http.get(this.config.octoprint.url + 'connection', httpHeaders).subscribe( (): void => { this.octoprintConnection = true; this.saveConfig(); @@ -153,7 +153,7 @@ export class NoConfigComponent implements OnInit { (error: HttpErrorResponse): void => { this.octoprintConnection = false; this.octoprintConnectionError = error.message; - } + }, ); return true; } @@ -181,7 +181,7 @@ export class NoConfigComponent implements OnInit { public finishWizard(): void { this.configService.updateConfig(); - this.router.navigate(["/main-screen"]); + this.router.navigate(['/main-screen']); } public increasePage(): void { @@ -201,6 +201,6 @@ export class NoConfigComponent implements OnInit { } public changeProgress(): void { - document.getElementById("progressBar").style.width = this.page * (20 / this.totalPages) + "vw"; + document.getElementById('progressBar').style.width = this.page * (20 / this.totalPages) + 'vw'; } } diff --git a/src/app/control/control.component.html b/src/app/control/control.component.html index 4ebc9109d9..5be14249be 100644 --- a/src/app/control/control.component.html +++ b/src/app/control/control.component.html @@ -5,8 +5,9 @@ [src]="iFrameURL | url" onload="this.style.opacity=1;" sandbox="allow-forms, allow-modals, allow-popups, allow-same-origin, allow-scripts, allow-top-navigation-by-user-activation" - >That shouldn't happen ... + That shouldn't happen ... +
@@ -14,7 +15,8 @@
- back + + back @@ -11,7 +12,8 @@ - next + next +
- back + + back @@ -32,12 +34,14 @@
Control Screen - You can adjust the printhead speed in the settings (default 150mm/s for XY - 5mm/s for Z).
+ + You can adjust the printhead speed in the settings (default 150mm/s for XY - 5mm/s for Z). +
You can customize the 6 icons on the right. They can either send GCode Commands to the printer or call a few - predefined actions (like rebooting the Pi). Please visit the GitHub Wiki to get further information.
- Wiki page is called "CustomActions". + predefined actions (like rebooting the Pi). Please visit the GitHub Wiki to get further information. +
+ Wiki page is called "CustomActions". +
@@ -113,8 +117,7 @@ [icon]="['fas', customAction.icon]" class="control__custom-action-icon" [styles]="{ color: customAction.color }" - > - + > diff --git a/src/app/control/control.component.ts b/src/app/control/control.component.ts index d0998c1629..f833560947 100644 --- a/src/app/control/control.component.ts +++ b/src/app/control/control.component.ts @@ -1,19 +1,18 @@ -import { Component } from "@angular/core"; -import { SafeResourceUrl } from "@angular/platform-browser"; -import { Router } from "@angular/router"; - -import { ConfigService } from "../config/config.service"; -import { OctoprintService } from "../octoprint.service"; -import { PsuControlService } from "../plugin-service/psu-control.service"; -import { PrinterService } from "../printer.service"; -import { PrinterProfileService } from "../printerprofile.service"; +import { Component } from '@angular/core'; +import { SafeResourceUrl } from '@angular/platform-browser'; +import { Router } from '@angular/router'; +import { ConfigService } from '../config/config.service'; import { OctoprintPrinterProfileAPI } from '../octoprint-api/printerProfileAPI'; +import { OctoprintService } from '../octoprint.service'; +import { PsuControlService } from '../plugin-service/psu-control.service'; +import { PrinterService } from '../printer.service'; +import { PrinterProfileService } from '../printerprofile.service'; @Component({ - selector: "app-control", - templateUrl: "./control.component.html", - styleUrls: ["./control.component.scss"], + selector: 'app-control', + templateUrl: './control.component.html', + styleUrls: ['./control.component.scss'], }) export class ControlComponent { public printerProfile: OctoprintPrinterProfileAPI; @@ -21,7 +20,7 @@ export class ControlComponent { public jogDistance = 10; public customActions = []; public showHelp = false; - public iFrameURL: SafeResourceUrl = "about:blank"; + public iFrameURL: SafeResourceUrl = 'about:blank'; public actionToConfirm: ActionToConfirm; public constructor( @@ -30,21 +29,21 @@ export class ControlComponent { private octoprintService: OctoprintService, private configService: ConfigService, private psuControlService: PsuControlService, - private router: Router + private router: Router, ) { this.printerProfile = { - name: "_default", - model: "unknown", + name: '_default', + model: 'unknown', axes: { x: { inverted: false }, y: { inverted: false }, - z: { inverted: false } - } + z: { inverted: false }, + }, }; this.customActions = this.configService.getCustomActions(); - this.printerProfileService.getDefaultPrinterProfile().then((profile) => { + this.printerProfileService.getDefaultPrinterProfile().then(profile => { this.printerProfile = profile; }); } @@ -53,15 +52,14 @@ export class ControlComponent { this.jogDistance = distance; } - public moveAxis(axis: string, direction: "+" | "-"): void { - if (this.printerProfile.axes[axis].inverted == true) - { - direction = (direction === "+" ? "-" : "+"); + public moveAxis(axis: string, direction: '+' | '-'): void { + if (this.printerProfile.axes[axis].inverted == true) { + direction = direction === '+' ? '-' : '+'; } const distance = Number(direction + this.jogDistance); - this.printerService.jog(axis === "x" ? distance : 0, axis === "y" ? distance : 0, axis === "z" ? distance : 0); + this.printerService.jog(axis === 'x' ? distance : 0, axis === 'y' ? distance : 0, axis === 'z' ? distance : 0); } public doAction(command: string, exit: boolean, confirm: boolean): void { @@ -73,7 +71,7 @@ export class ControlComponent { } else { this.executeGCode(command); if (exit) { - this.router.navigate(["/main-screen"]); + this.router.navigate(['/main-screen']); } } } @@ -81,7 +79,7 @@ export class ControlComponent { public doActionConfirm(): void { this.executeGCode(this.actionToConfirm.command); if (this.actionToConfirm.exit) { - this.router.navigate(["/main-screen"]); + this.router.navigate(['/main-screen']); } else { this.actionToConfirm = null; } @@ -93,36 +91,36 @@ export class ControlComponent { private executeGCode(command: string): void { switch (command) { - case "[!DISCONNECT]": + case '[!DISCONNECT]': this.disconnectPrinter(); break; - case "[!STOPDASHBOARD]": + case '[!STOPDASHBOARD]': this.stopOctoDash(); break; - case "[!RELOAD]": + case '[!RELOAD]': this.reloadOctoPrint(); break; - case "[!REBOOT]": + case '[!REBOOT]': this.rebootPi(); break; - case "[!SHUTDOWN]": + case '[!SHUTDOWN]': this.shutdownPi(); break; - case "[!KILL]": + case '[!KILL]': this.kill(); break; - case "[!POWEROFF]": + case '[!POWEROFF]': this.psuControlService.changePSUState(false); break; - case "[!POWERON]": + case '[!POWERON]': this.psuControlService.changePSUState(true); break; - case "[!POWERTOGGLE]": + case '[!POWERTOGGLE]': this.psuControlService.togglePSU(); break; default: { - if (command.includes("[!WEB]")) { - this.openIFrame(command.replace("[!WEB]", "")); + if (command.includes('[!WEB]')) { + this.openIFrame(command.replace('[!WEB]', '')); } else { this.printerService.executeGCode(command); } @@ -143,17 +141,17 @@ export class ControlComponent { // [!RELOAD] public reloadOctoPrint(): void { - this.octoprintService.sendSystemCommand("restart"); + this.octoprintService.sendSystemCommand('restart'); } // [!REBOOT] public rebootPi(): void { - this.octoprintService.sendSystemCommand("reboot"); + this.octoprintService.sendSystemCommand('reboot'); } // [!SHUTDOWN] public shutdownPi(): void { - this.octoprintService.sendSystemCommand("shutdown"); + this.octoprintService.sendSystemCommand('shutdown'); } // [!KILL] @@ -165,19 +163,19 @@ export class ControlComponent { // [!WEB] public openIFrame(url: string): void { this.iFrameURL = url; - const iFrameDOM = document.getElementById("iFrame"); - iFrameDOM.style.display = "block"; + const iFrameDOM = document.getElementById('iFrame'); + iFrameDOM.style.display = 'block'; setTimeout((): void => { - iFrameDOM.style.opacity = "1"; + iFrameDOM.style.opacity = '1'; }, 50); } public hideIFrame(): void { - const iFrameDOM = document.getElementById("iFrame"); - iFrameDOM.style.opacity = "0"; + const iFrameDOM = document.getElementById('iFrame'); + iFrameDOM.style.opacity = '0'; setTimeout((): void => { - iFrameDOM.style.display = "none"; - this.iFrameURL = "about:blank"; + iFrameDOM.style.display = 'none'; + this.iFrameURL = 'about:blank'; }, 500); } } diff --git a/src/app/filament/filament.component.html b/src/app/filament/filament.component.html index 3ff776055a..8b397f269f 100644 --- a/src/app/filament/filament.component.html +++ b/src/app/filament/filament.component.html @@ -1,7 +1,8 @@
- back + + back @@ -10,7 +11,8 @@ - skip + skip +
@@ -20,24 +22,21 @@
- {{ - spool.profile.material - }} + + {{ spool.profile.material }} + {{ spool.displayName }} - {{ getSpoolWeightLeft(spool.weight, spool.used) }}g left + {{ getSpoolWeightLeft(spool.weight, spool.used) }} + g left
-
- no filament spools found -
-
- loading spools ... -
+
no filament spools found
+
loading spools ...
@@ -66,7 +65,8 @@ {{ isHeating ? hotendTemperature : hotendTarget }} °C - /{{ hotendTarget }} °C + /{{ hotendTarget }} + °C
@@ -100,13 +100,19 @@
- wait {{ automaticHeatingStartSeconds }}s or - + + wait + {{ automaticHeatingStartSeconds }} + s or - - start + start +
@@ -122,11 +128,11 @@
load new filament Only put a little filament in, I'll pull in the rest. -
+
{{ selectedSpool.displayName }}
-
+
I'll wait for you.
@@ -136,7 +142,7 @@
loading filament
-
+
{{ getFeedSpeed() }} mm/s
diff --git a/src/app/filament/filament.component.scss b/src/app/filament/filament.component.scss index 8c74f450e1..47013e5efa 100644 --- a/src/app/filament/filament.component.scss +++ b/src/app/filament/filament.component.scss @@ -49,7 +49,7 @@ padding-right: 1.5vw; &::before { - content: ""; + content: ''; width: 96vw; height: 68vh; position: fixed; @@ -57,12 +57,7 @@ top: 30.5vh; z-index: 2; pointer-events: none; - background: linear-gradient( - #353b48, - transparent 6%, - transparent 94%, - #353b48 - ); + background: linear-gradient(#353b48, transparent 6%, transparent 94%, #353b48); } td { diff --git a/src/app/filament/filament.component.ts b/src/app/filament/filament.component.ts index 4f336d0ec6..450f1dfafb 100644 --- a/src/app/filament/filament.component.ts +++ b/src/app/filament/filament.component.ts @@ -1,17 +1,17 @@ -import { Component, OnInit } from "@angular/core"; -import { Router } from "@angular/router"; +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; -import { ConfigService } from "../config/config.service"; -import { FilamentManagerService, FilamentSpool, FilamentSpoolList } from "../plugin-service/filament-manager.service"; -import { PrinterService, PrinterStatusAPI } from "../printer.service"; +import { ConfigService } from '../config/config.service'; +import { FilamentManagerService, FilamentSpool, FilamentSpoolList } from '../plugin-service/filament-manager.service'; +import { PrinterService, PrinterStatusAPI } from '../printer.service'; @Component({ - selector: "app-filament", - templateUrl: "./filament.component.html", - styleUrls: ["./filament.component.scss"], + selector: 'app-filament', + templateUrl: './filament.component.html', + styleUrls: ['./filament.component.scss'], }) export class FilamentComponent implements OnInit { - private selectedSpool: FilamentSpool; + public selectedSpool: FilamentSpool; private currentSpool: FilamentSpool; private totalPages = 5; @@ -35,7 +35,7 @@ export class FilamentComponent implements OnInit { private router: Router, private configService: ConfigService, private filamentManagerService: FilamentManagerService, - private printerService: PrinterService + private printerService: PrinterService, ) {} public ngOnInit(): void { @@ -54,7 +54,7 @@ export class FilamentComponent implements OnInit { if (this.page < this.totalPages) { this.setPage(this.page + 1); } else if (this.page === this.totalPages) { - this.router.navigate(["/main-screen"]); + this.router.navigate(['/main-screen']); } } @@ -62,11 +62,11 @@ export class FilamentComponent implements OnInit { public decreasePage(): void { if (this.page === 0) { - this.router.navigate(["/main-screen"]); + this.router.navigate(['/main-screen']); } else if (this.page === 1 && this.configService.isFilamentManagerEnabled()) { this.setPage(0); } else if (this.page === 1) { - this.router.navigate(["/main-screen"]); + this.router.navigate(['/main-screen']); } else if (this.page === 2 || this.page === 3) { this.setPage(1); } else if (this.page === 4 || this.page === 5) { @@ -114,7 +114,7 @@ export class FilamentComponent implements OnInit { this.page = page; if (this.page > 0) { setTimeout((): void => { - document.getElementById("progressBar").style.width = this.page * (20 / this.totalPages) + "vw"; + document.getElementById('progressBar').style.width = this.page * (20 / this.totalPages) + 'vw'; }, 200); } } @@ -151,8 +151,8 @@ export class FilamentComponent implements OnInit { } public getSpoolTemperatureOffset(): string { - return `${this.selectedSpool.temp_offset === 0 ? "±" : this.selectedSpool.temp_offset > 0 ? "+" : "-"}${Math.abs( - this.selectedSpool.temp_offset + return `${this.selectedSpool.temp_offset === 0 ? '±' : this.selectedSpool.temp_offset > 0 ? '+' : '-'}${Math.abs( + this.selectedSpool.temp_offset, )}`; } @@ -160,7 +160,7 @@ export class FilamentComponent implements OnInit { if (this.currentSpool) { return this.currentSpool.color; } else { - return "#44bd32"; + return '#44bd32'; } } @@ -168,7 +168,7 @@ export class FilamentComponent implements OnInit { if (this.selectedSpool) { return this.selectedSpool.color; } else { - return "#44bd32"; + return '#44bd32'; } } @@ -193,12 +193,12 @@ export class FilamentComponent implements OnInit { private unloadSpool(): void { this.printerService.extrude(this.getFeedLength() * -1, this.configService.getFeedSpeed()); setTimeout((): void => { - const unloadingProgressBar = document.getElementById("filamentUnloadBar"); + const unloadingProgressBar = document.getElementById('filamentUnloadBar'); unloadingProgressBar.style.backgroundColor = this.getCurrentSpoolColor(); const unloadTime = this.getFeedLength() / this.configService.getFeedSpeed() + 0.5; - unloadingProgressBar.style.transition = "width " + unloadTime + "s ease-in"; + unloadingProgressBar.style.transition = 'width ' + unloadTime + 's ease-in'; setTimeout((): void => { - unloadingProgressBar.style.width = "0vw"; + unloadingProgressBar.style.width = '0vw'; this.timeout = setTimeout((): void => { this.increasePage(); }, unloadTime * 1000 + 500); @@ -212,12 +212,12 @@ export class FilamentComponent implements OnInit { const loadTime = loadTimeFast + loadTimeSlow + 0.5; this.printerService.extrude(this.getFeedLength() * 0.75, this.configService.getFeedSpeed()); setTimeout((): void => { - const loadingProgressBar = document.getElementById("filamentLoadBar"); + const loadingProgressBar = document.getElementById('filamentLoadBar'); loadingProgressBar.style.backgroundColor = this.getSelectedSpoolColor(); - loadingProgressBar.style.transition = "width " + loadTime + "s ease-in"; + loadingProgressBar.style.transition = 'width ' + loadTime + 's ease-in'; setTimeout((): void => { - loadingProgressBar.style.width = "50vw"; + loadingProgressBar.style.width = '50vw'; this.timeout = setTimeout((): void => { this.printerService.extrude(this.getFeedLength() * 0.17, this.configService.getFeedSpeedSlow()); this.feedSpeedSlow = true; @@ -245,26 +245,26 @@ export class FilamentComponent implements OnInit { let bar: HTMLElement; const wrapper = (document.getElementsByClassName( - "filament__progress-bar-wrapper-wide" + 'filament__progress-bar-wrapper-wide', // eslint-disable-next-line @typescript-eslint/no-explicit-any )[0] as any) as HTMLElement; - if (document.getElementById("filamentLoadBar")) { - bar = document.getElementById("filamentLoadBar"); + if (document.getElementById('filamentLoadBar')) { + bar = document.getElementById('filamentLoadBar'); } else { - bar = document.getElementById("filamentUnloadBar"); + bar = document.getElementById('filamentUnloadBar'); } - bar.style.width = Math.floor(bar.getBoundingClientRect().width) + "px"; - wrapper.style.borderColor = "#c23616"; + bar.style.width = Math.floor(bar.getBoundingClientRect().width) + 'px'; + wrapper.style.borderColor = '#c23616'; } private disableExtruderStepper(): void { - this.printerService.executeGCode("M18 E "); + this.printerService.executeGCode('M18 E '); } private initiateM600FilamentChange(): void { - this.printerService.executeGCode("M600"); + this.printerService.executeGCode('M600'); } // NOZZLE HEATING diff --git a/src/app/files.service.ts b/src/app/files.service.ts index a032dcade6..bcf748971e 100644 --- a/src/app/files.service.ts +++ b/src/app/files.service.ts @@ -1,15 +1,15 @@ -import { HttpClient, HttpErrorResponse } from "@angular/common/http"; -import { Injectable } from "@angular/core"; -import _ from "lodash"; -import { Subscription } from "rxjs"; +import { HttpClient, HttpErrorResponse } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import _ from 'lodash'; +import { Subscription } from 'rxjs'; -import { AppService } from "./app.service"; -import { ConfigService } from "./config/config.service"; -import { NotificationService } from "./notification/notification.service"; -import { OctoprintFilesAPI, OctoprintFolderAPI, OctoprintFolderContentAPI } from "./octoprint-api/filesAPI"; +import { AppService } from './app.service'; +import { ConfigService } from './config/config.service'; +import { NotificationService } from './notification/notification.service'; +import { OctoprintFilesAPI, OctoprintFolderAPI, OctoprintFolderContentAPI } from './octoprint-api/filesAPI'; @Injectable({ - providedIn: "root", + providedIn: 'root', }) export class FilesService { private httpGETRequest: Subscription; @@ -21,25 +21,25 @@ export class FilesService { private configService: ConfigService, private http: HttpClient, private notificationService: NotificationService, - private service: AppService + private service: AppService, ) {} - public getFolder(folderPath = "/"): Promise<(File | Folder)[]> { + public getFolder(folderPath = '/'): Promise<(File | Folder)[]> { return new Promise((resolve, reject): void => { this.httpGETRequestTimeout = setTimeout(() => { this.httpGETRequest.unsubscribe(); - this.notificationService.setError("Can't retrieve folder!", "Operation timed out. Please try again."); + this.notificationService.setError("Can't retrieve folder!", 'Operation timed out. Please try again.'); reject(); }, 6000); - folderPath = folderPath === "/" ? "" : folderPath; + folderPath = folderPath === '/' ? '' : folderPath; if (this.httpGETRequest) { this.httpGETRequest.unsubscribe(); } this.httpGETRequest = this.http - .get(this.configService.getURL("files" + folderPath), this.configService.getHTTPHeaders()) + .get(this.configService.getURL('files' + folderPath), this.configService.getHTTPHeaders()) .subscribe( (data: OctoprintFolderAPI & OctoprintFolderContentAPI): void => { - if ("children" in data) { + if ('children' in data) { data.files = data.children; delete data.children; } @@ -47,9 +47,9 @@ export class FilesService { let localCount = 0; let sdCardCount = 0; data.files.forEach((fileOrFolder): void => { - if (fileOrFolder.type === "folder") { - if (folderPath === "") { - if (fileOrFolder.origin == "local") { + if (fileOrFolder.type === 'folder') { + if (folderPath === '') { + if (fileOrFolder.origin == 'local') { localCount += fileOrFolder.children.length; } else { sdCardCount += fileOrFolder.children.length; @@ -57,13 +57,13 @@ export class FilesService { } folder.push(({ - type: "folder", - path: "/" + fileOrFolder.origin + "/" + fileOrFolder.path, + type: 'folder', + path: '/' + fileOrFolder.origin + '/' + fileOrFolder.path, name: fileOrFolder.name, // TODO: Think of a way to retrieve number of children - files: fileOrFolder.children ? fileOrFolder.children.length : "-", + files: fileOrFolder.children ? fileOrFolder.children.length : '-', } as unknown) as Folder); - } else if (fileOrFolder.typePath.includes("gcode")) { + } else if (fileOrFolder.typePath.includes('gcode')) { let filamentLength = 0; if (fileOrFolder.gcodeAnalysis) { _.forEach(fileOrFolder.gcodeAnalysis.filament, (tool): void => { @@ -71,8 +71,8 @@ export class FilesService { }); } - if (folderPath === "") { - if (fileOrFolder.origin == "local") { + if (folderPath === '') { + if (fileOrFolder.origin == 'local') { localCount += 1; } else { sdCardCount += 1; @@ -80,8 +80,8 @@ export class FilesService { } folder.push(({ - type: "file", - path: "/" + fileOrFolder.origin + "/" + fileOrFolder.path, + type: 'file', + path: '/' + fileOrFolder.origin + '/' + fileOrFolder.path, name: fileOrFolder.name, date: fileOrFolder.date, size: this.service.convertByteToMegabyte(fileOrFolder.size), @@ -96,19 +96,19 @@ export class FilesService { }); data = null; - if (folderPath === "") { + if (folderPath === '') { if (localCount > 0 && sdCardCount > 0) { folder.length = 0; folder.push(({ - type: "folder", - path: "/local", - name: "local", + type: 'folder', + path: '/local', + name: 'local', files: localCount, } as unknown) as Folder); folder.push(({ - type: "folder", - path: "/sdcard", - name: "sdcard", + type: 'folder', + path: '/sdcard', + name: 'sdcard', files: sdCardCount, } as unknown) as Folder); } @@ -119,8 +119,8 @@ export class FilesService { (error: HttpErrorResponse): void => { if (error.status === 404) { this.notificationService.setError("Can't find specified folder!", error.message); - if (folderPath !== "/") { - this.getFolder(folderPath.substring(0, folderPath.lastIndexOf("/"))); + if (folderPath !== '/') { + this.getFolder(folderPath.substring(0, folderPath.lastIndexOf('/'))); } else { reject(); } @@ -131,7 +131,7 @@ export class FilesService { }, (): void => { clearTimeout(this.httpGETRequestTimeout); - } + }, ); }); } @@ -142,7 +142,7 @@ export class FilesService { this.httpGETRequest.unsubscribe(); } this.httpGETRequest = this.http - .get(this.configService.getURL("files" + filePath), this.configService.getHTTPHeaders()) + .get(this.configService.getURL('files' + filePath), this.configService.getHTTPHeaders()) .subscribe( (data: OctoprintFilesAPI): void => { let filamentLength = 0; @@ -152,8 +152,8 @@ export class FilesService { }); } const file = ({ - type: "file", - path: "/" + data.origin + "/" + data.path, + type: 'file', + path: '/' + data.origin + '/' + data.path, name: data.name, size: this.service.convertByteToMegabyte(data.size), ...(data.gcodeAnalysis @@ -164,8 +164,8 @@ export class FilesService { } : {}), thumbnail: data.thumbnail - ? this.configService.getURL(data.thumbnail).replace("/api/", "/") - : "assets/object.svg", + ? this.configService.getURL(data.thumbnail).replace('/api/', '/') + : 'assets/object.svg', } as unknown) as File; resolve(file); }, @@ -177,7 +177,7 @@ export class FilesService { this.notificationService.setError("Can't retrieve folder!", error.message); reject(); } - } + }, ); }); } @@ -188,18 +188,18 @@ export class FilesService { this.httpGETRequest.unsubscribe(); } this.httpGETRequest = this.http - .get(this.configService.getURL("files" + filePath), this.configService.getHTTPHeaders()) + .get(this.configService.getURL('files' + filePath), this.configService.getHTTPHeaders()) .subscribe( (data: OctoprintFilesAPI): void => { const thumbnail = data.thumbnail - ? this.configService.getURL(data.thumbnail).replace("/api/", "/") - : "assets/object.svg"; + ? this.configService.getURL(data.thumbnail).replace('/api/', '/') + : 'assets/object.svg'; resolve(thumbnail); }, (error: HttpErrorResponse): void => { this.notificationService.setError("Can't load thumbnail!", error.message); reject(); - } + }, ); }); } @@ -209,16 +209,16 @@ export class FilesService { this.httpPOSTRequest.unsubscribe(); } const loadFileBody = { - command: "select", + command: 'select', print: false, }; this.httpPOSTRequest = this.http - .post(this.configService.getURL("files" + filePath), loadFileBody, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('files' + filePath), loadFileBody, this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { this.notificationService.setError("Can't load the file!", error.message); - } + }, ); } @@ -227,16 +227,16 @@ export class FilesService { this.httpPOSTRequest.unsubscribe(); } const printFileBody = { - command: "select", + command: 'select', print: true, }; this.httpPOSTRequest = this.http - .post(this.configService.getURL("files" + filePath), printFileBody, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('files' + filePath), printFileBody, this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { this.notificationService.setError("Can't start print!", error.message); - } + }, ); } @@ -245,12 +245,12 @@ export class FilesService { this.httpDELETERequest.unsubscribe(); } this.httpDELETERequest = this.http - .delete(this.configService.getURL("files" + filePath), this.configService.getHTTPHeaders()) + .delete(this.configService.getURL('files' + filePath), this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { this.notificationService.setError("Can't delete file!", error.message); - } + }, ); } } diff --git a/src/app/files/files.component.html b/src/app/files/files.component.html index e79dc637eb..aa0ff2bac7 100644 --- a/src/app/files/files.component.html +++ b/src/app/files/files.component.html @@ -1,7 +1,8 @@ @@ -31,9 +33,7 @@

loading ...

-
- can't load files ... -
+
can't load files ...
- {{ content.files }}files + + {{ content.files }} + files +
{{ content.name }} @@ -64,13 +67,18 @@ >
- {{ content.size }}mb - {{ content.filamentWeight }}g - {{ content.printTime }}h + + {{ content.size }} + mb + + + {{ content.filamentWeight }} + g + + + {{ content.printTime }} + h +
{{ content.name }} @@ -89,12 +97,17 @@
- back + + back @@ -13,7 +14,8 @@ [matRippleUnbounded]="false" *ngIf="folderContent && folderContent.length > 0" > - sort + sort +
- +
{{ fileDetail.size }}mb + {{ fileDetail.size }} + mb + - {{ fileDetail.printTime }}h + {{ fileDetail.printTime }} + h - {{ fileDetail.filamentWeight }}g + {{ fileDetail.filamentWeight }} + g
@@ -135,7 +148,8 @@
- sort by
+ sort by +
@@ -159,7 +173,8 @@
- order
+ order +
diff --git a/src/app/files/files.component.scss b/src/app/files/files.component.scss index cab09f7116..a9960693fc 100755 --- a/src/app/files/files.component.scss +++ b/src/app/files/files.component.scss @@ -26,14 +26,14 @@ } &::before { - content: "/"; + content: '/'; padding: 0 0.9vw; pointer-events: none; } &:first-of-type { &::before { - content: ""; + content: ''; display: none; } } @@ -57,7 +57,7 @@ z-index: 1; &::before { - content: ""; + content: ''; width: 91vw; height: 77vh; position: fixed; @@ -65,12 +65,7 @@ top: 23vh; z-index: 2; pointer-events: none; - background: linear-gradient( - #353b48, - transparent 6%, - transparent 94%, - #353b48 - ); + background: linear-gradient(#353b48, transparent 6%, transparent 94%, #353b48); } &__error { diff --git a/src/app/files/files.component.ts b/src/app/files/files.component.ts index db526e9f51..12b226ff92 100644 --- a/src/app/files/files.component.ts +++ b/src/app/files/files.component.ts @@ -1,25 +1,25 @@ -import { Component } from "@angular/core"; -import { Router } from "@angular/router"; -import { NgxSpinnerService } from "ngx-spinner"; +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; +import { NgxSpinnerService } from 'ngx-spinner'; -import { AppService } from "../app.service"; -import { ConfigService } from "../config/config.service"; -import { File, FilesService, Folder } from "../files.service"; -import { JobService } from "../job.service"; +import { AppService } from '../app.service'; +import { ConfigService } from '../config/config.service'; +import { File, FilesService, Folder } from '../files.service'; +import { JobService } from '../job.service'; @Component({ - selector: "app-files", - templateUrl: "./files.component.html", - styleUrls: ["./files.component.scss"], + selector: 'app-files', + templateUrl: './files.component.html', + styleUrls: ['./files.component.scss'], }) export class FilesComponent { public currentFolder: string; public folderContent: (File | Folder)[]; public fileDetail: File; - public sortingAttribute: "name" | "date" | "size"; - public sortingOrder: "asc" | "dsc"; + public sortingAttribute: 'name' | 'date' | 'size'; + public sortingOrder: 'asc' | 'dsc'; public showSorting = false; - public homeFolder = "/"; + public homeFolder = '/'; public constructor( private filesService: FilesService, @@ -27,11 +27,11 @@ export class FilesComponent { private service: AppService, private router: Router, private jobService: JobService, - private configService: ConfigService + private configService: ConfigService, ) { this.showLoader(); this.folderContent = []; - this.currentFolder = "/"; + this.currentFolder = '/'; this.sortingAttribute = this.configService.getDefaultSortingAttribute(); this.sortingOrder = this.configService.getDefaultSortingOrder(); this.openFolder(this.currentFolder); @@ -44,12 +44,12 @@ export class FilesComponent { this.fileDetail = data; }) .catch((): void => { - this.fileDetail = ({ name: "error" } as unknown) as File; + this.fileDetail = ({ name: 'error' } as unknown) as File; }); - const fileDOMElement = document.getElementById("fileDetailView"); - fileDOMElement.style.display = "block"; + const fileDOMElement = document.getElementById('fileDetailView'); + fileDOMElement.style.display = 'block'; setTimeout((): void => { - fileDOMElement.style.opacity = "1"; + fileDOMElement.style.opacity = '1'; }, 50); } @@ -61,8 +61,8 @@ export class FilesComponent { .getFolder(folderPath) .then((data): void => { this.folderContent = data; - if (folderPath === "/" && !(data[0].name === "local" && data[1].name == "sdcard")) { - this.currentFolder = data[0].path.startsWith("/local") ? "/local" : "/sdcard"; + if (folderPath === '/' && !(data[0].name === 'local' && data[1].name == 'sdcard')) { + this.currentFolder = data[0].path.startsWith('/local') ? '/local' : '/sdcard'; this.homeFolder = this.currentFolder; } else { this.currentFolder = folderPath; @@ -78,40 +78,40 @@ export class FilesComponent { }, 300); } - public sortFolder(by: "name" | "date" | "size" = "name", order: "asc" | "dsc" = "asc"): void { + public sortFolder(by: 'name' | 'date' | 'size' = 'name', order: 'asc' | 'dsc' = 'asc'): void { switch (by) { - case "name": { + case 'name': { this.folderContent.sort((a, b): number => a.type === b.type - ? (order === "asc" ? a.name > b.name : a.name < b.name) + ? (order === 'asc' ? a.name > b.name : a.name < b.name) ? 1 : -1 - : a.type === "folder" + : a.type === 'folder' ? -1 - : 1 + : 1, ); break; } - case "date": { - this.sortFolder("name", order); + case 'date': { + this.sortFolder('name', order); this.folderContent.sort((a, b): number => { - if (a.type === b.type && a.type === "file") { + if (a.type === b.type && a.type === 'file') { const aFile = (a as unknown) as File; const bFile = (b as unknown) as File; - return (order === "asc" ? aFile.date > bFile.date : aFile.date < bFile.date) ? 1 : -1; + return (order === 'asc' ? aFile.date > bFile.date : aFile.date < bFile.date) ? 1 : -1; } else { - return a.type === "folder" ? -1 : 1; + return a.type === 'folder' ? -1 : 1; } }); break; } - case "size": { - this.sortFolder("name", order); + case 'size': { + this.sortFolder('name', order); this.folderContent.sort((a, b): number => { if (a.type === b.type && (a as File).type) { const aFile = (a as unknown) as File; const bFile = (b as unknown) as File; - return (order === "asc" ? aFile.size > bFile.size : aFile.size < bFile.size) ? 1 : -1; + return (order === 'asc' ? aFile.size > bFile.size : aFile.size < bFile.size) ? 1 : -1; } else { return 1; } @@ -122,10 +122,10 @@ export class FilesComponent { } public closeDetails(): void { - const fileDOMElement = document.getElementById("fileDetailView"); - fileDOMElement.style.opacity = "0"; + const fileDOMElement = document.getElementById('fileDetailView'); + fileDOMElement.style.opacity = '0'; setTimeout((): void => { - fileDOMElement.style.display = "none"; + fileDOMElement.style.display = 'none'; this.fileDetail = null; }, 500); } @@ -133,17 +133,17 @@ export class FilesComponent { public openSorting(): void { this.showSorting = true; setTimeout((): void => { - const sortingDOMElement = document.getElementById("sortingView"); - sortingDOMElement.style.opacity = "1"; + const sortingDOMElement = document.getElementById('sortingView'); + sortingDOMElement.style.opacity = '1'; }, 50); } public closeSorting(): void { - const sortingDOMElement = document.getElementById("sortingView"); - sortingDOMElement.style.opacity = "0"; + const sortingDOMElement = document.getElementById('sortingView'); + sortingDOMElement.style.opacity = '0'; this.sortFolder(this.sortingAttribute, this.sortingOrder); setTimeout((): void => { - sortingDOMElement.style.display = "none"; + sortingDOMElement.style.display = 'none'; this.showSorting = false; }, 500); } @@ -153,14 +153,14 @@ export class FilesComponent { this.filesService.loadFile(filePath); this.service.setLoadedFile(true); this.jobService.deleteJobInformation(); - this.router.navigate(["/main-screen"]); + this.router.navigate(['/main-screen']); }, 300); } public printFile(filePath: string): void { setTimeout((): void => { this.filesService.printFile(filePath); - this.router.navigate(["/main-screen"]); + this.router.navigate(['/main-screen']); }, 300); } @@ -174,10 +174,10 @@ export class FilesComponent { private showLoader(): void { this.spinner.show(undefined, { - bdColor: "#353b48", - color: "#f5f6fa", - size: "medium", - type: "pacman", + bdColor: '#353b48', + color: '#f5f6fa', + size: 'medium', + type: 'pacman', fullScreen: false, }); } diff --git a/src/app/job-status/job-status.component.html b/src/app/job-status/job-status.component.html index cb13c68d2c..490f8dbe68 100644 --- a/src/app/job-status/job-status.component.html +++ b/src/app/job-status/job-status.component.html @@ -8,30 +8,36 @@ [responsive]="true" [color]="'#44bd32'" > +
- {{ job.progress }}% + {{ job.progress }}% +
+
+
-
- {{ job.filename }}
- {{ job.filamentAmount }}g Filament + {{ job.filename }}
- {{ job.timeLeft.value }}{{ job.timeLeft.unit }} left, - elapsed: {{ job.timePrinted.value }}{{ job.timePrinted.unit }} + {{ job.filamentAmount }}g Filament +
+ + + {{ job.timeLeft.value }} + {{ job.timeLeft.unit }} left, + + elapsed: {{ job.timePrinted.value }}{{ job.timePrinted.unit }} + -
+
discard
- {{ job.filename }}
+ {{ job.filename }} +

- + {{ job.estimatedPrintTime.value }}{{ job.estimatedPrintTime.unit }} - - will finish ~{{ job.estimatedEndTime }} + - will finish ~{{ job.estimatedEndTime }}
- + - {{ job.filamentAmount }}g - - filament will be used - + {{ job.filamentAmount }}g + filament will be used
-
- loading info ... -
+
loading info ...
no job running ...
diff --git a/src/app/job-status/job-status.component.scss b/src/app/job-status/job-status.component.scss index 95028ca10c..b992ba5049 100644 --- a/src/app/job-status/job-status.component.scss +++ b/src/app/job-status/job-status.component.scss @@ -27,10 +27,11 @@ } &-preview { - margin-top: -30.3vh; - width: 12.5vw; - margin-left: 4.7vw; - display: block; + width: 13vw; + + &-container { + margin-top: -17vw; + } } } diff --git a/src/app/job-status/job-status.component.ts b/src/app/job-status/job-status.component.ts index 84e451a274..43ebeab980 100644 --- a/src/app/job-status/job-status.component.ts +++ b/src/app/job-status/job-status.component.ts @@ -1,15 +1,15 @@ -import { Component, OnDestroy, OnInit } from "@angular/core"; -import { Subscription } from "rxjs"; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Subscription } from 'rxjs'; -import { AppService } from "../app.service"; -import { ConfigService } from "../config/config.service"; -import { Job, JobService } from "../job.service"; -import { NotificationService } from "../notification/notification.service"; +import { AppService } from '../app.service'; +import { ConfigService } from '../config/config.service'; +import { Job, JobService } from '../job.service'; +import { NotificationService } from '../notification/notification.service'; @Component({ - selector: "app-job-status", - templateUrl: "./job-status.component.html", - styleUrls: ["./job-status.component.scss"], + selector: 'app-job-status', + templateUrl: './job-status.component.html', + styleUrls: ['./job-status.component.scss'], }) export class JobStatusComponent implements OnInit, OnDestroy { private subscriptions: Subscription = new Subscription(); @@ -19,7 +19,7 @@ export class JobStatusComponent implements OnInit, OnDestroy { private jobService: JobService, private service: AppService, private notificationService: NotificationService, - private configService: ConfigService + private configService: ConfigService, ) {} public ngOnInit(): void { @@ -44,8 +44,8 @@ export class JobStatusComponent implements OnInit, OnDestroy { public preheatDisabled(): void { this.notificationService.setWarning( - "Preheat Plugin is not enabled!", - "Please make sure to install and enable the Preheat Plugin to use this functionality." + 'Preheat Plugin is not enabled!', + 'Please make sure to install and enable the Preheat Plugin to use this functionality.', ); } @@ -67,4 +67,8 @@ export class JobStatusComponent implements OnInit, OnDestroy { public showPreview(): boolean { return this.jobService.showPreviewWhilePrinting(); } + + public hasProperty(object: Record, name: string): boolean { + return Object.hasOwnProperty.bind(object)(name); + } } diff --git a/src/app/job.service.ts b/src/app/job.service.ts index 50cea574fb..c2479ee8d9 100644 --- a/src/app/job.service.ts +++ b/src/app/job.service.ts @@ -1,16 +1,16 @@ -import { HttpClient, HttpErrorResponse } from "@angular/common/http"; -import { Injectable } from "@angular/core"; -import { Observable, Observer, Subscription, timer } from "rxjs"; -import { shareReplay } from "rxjs/operators"; +import { HttpClient, HttpErrorResponse } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable, Observer, Subscription, timer } from 'rxjs'; +import { shareReplay } from 'rxjs/operators'; -import { AppService } from "./app.service"; -import { ConfigService } from "./config/config.service"; -import { FilesService } from "./files.service"; -import { NotificationService } from "./notification/notification.service"; -import { JobCommand, OctoprintFilament, OctoprintJobAPI } from "./octoprint-api/jobAPI"; +import { AppService } from './app.service'; +import { ConfigService } from './config/config.service'; +import { FilesService } from './files.service'; +import { NotificationService } from './notification/notification.service'; +import { JobCommand, OctoprintFilament, OctoprintJobAPI } from './octoprint-api/jobAPI'; @Injectable({ - providedIn: "root", + providedIn: 'root', }) export class JobService { private httpGETRequest: Subscription; @@ -25,7 +25,7 @@ export class JobService { private http: HttpClient, private notificationService: NotificationService, private service: AppService, - private fileService: FilesService + private fileService: FilesService, ) { this.previewWhilePrinting = this.configService.showThumbnailByDefault(); this.observable = new Observable((observer: Observer): void => { @@ -35,26 +35,26 @@ export class JobService { this.httpGETRequest.unsubscribe(); } this.httpGETRequest = this.http - .get(this.configService.getURL("job"), this.configService.getHTTPHeaders()) + .get(this.configService.getURL('job'), this.configService.getHTTPHeaders()) .subscribe( async (data: OctoprintJobAPI): Promise => { let job: Job = null; if (data.job && data.job.file.name) { - this.printing = ["Printing", "Pausing", "Paused", "Cancelling", "Printing from SD"].includes( - data.state + this.printing = ['Printing', 'Pausing', 'Paused', 'Cancelling', 'Printing from SD'].includes( + data.state, ); try { job = { status: data.state, - filename: data.job.file.display.replace(".gcode", "").replace(".ufp", ""), + filename: data.job.file.display.replace('.gcode', '').replace('.ufp', ''), thumbnail: await this.fileService.getThumbnail( - "/" + data.job.file.origin + "/" + data.job.file.path + '/' + data.job.file.origin + '/' + data.job.file.path, ), progress: Math.round((data.progress.filepos / data.job.file.size) * 100), ...(data.job.filament !== null ? { filamentAmount: this.service.convertFilamentVolumeToWeight( - this.getTotalAmountOfFilament(data.job.filament) + this.getTotalAmountOfFilament(data.job.filament), ), } : {}), @@ -62,19 +62,19 @@ export class JobService { ? { timeLeft: { value: this.service.convertSecondsToHours(data.progress.printTimeLeft), - unit: "h", + unit: 'h', }, } : {}), timePrinted: { value: this.service.convertSecondsToHours(data.progress.printTime), - unit: "h", + unit: 'h', }, ...(data.job.estimatedPrintTime !== null ? { estimatedPrintTime: { value: this.service.convertSecondsToHours(data.job.estimatedPrintTime), - unit: "h", + unit: 'h', }, estimatedEndTime: this.calculateEndTime(data.job.estimatedPrintTime), } @@ -91,7 +91,7 @@ export class JobService { (error: HttpErrorResponse): void => { this.printing = false; this.notificationService.setError("Can't retrieve jobs!", error.message); - } + }, ); }); }).pipe(shareReplay(1)); @@ -103,7 +103,7 @@ export class JobService { for (const property in filamentAmount) { if ( Object.prototype.hasOwnProperty.call(filamentAmount, property) && - Object.prototype.hasOwnProperty.call(filamentAmount[property], "volume") + Object.prototype.hasOwnProperty.call(filamentAmount[property], 'volume') ) { filamentLength += filamentAmount[property].volume; } @@ -136,22 +136,22 @@ export class JobService { this.httpPOSTRequest.unsubscribe(); } const cancelPayload: JobCommand = { - command: "cancel", + command: 'cancel', }; this.httpPOSTRequest = this.http - .post(this.configService.getURL("job"), cancelPayload, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('job'), cancelPayload, this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { if (error.status === 409) { this.notificationService.setError( "Can't cancel Job!", - "There is no running job, that could be cancelled (409)" + 'There is no running job, that could be cancelled (409)', ); } else { this.notificationService.setError("Can't cancel Job!", error.message); } - } + }, ); } @@ -160,23 +160,23 @@ export class JobService { this.httpPOSTRequest.unsubscribe(); } const pausePayload: JobCommand = { - command: "pause", - action: "pause", + command: 'pause', + action: 'pause', }; this.httpPOSTRequest = this.http - .post(this.configService.getURL("job"), pausePayload, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('job'), pausePayload, this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { if (error.status === 409) { this.notificationService.setError( "Can't pause Job!", - "There is no running job, that could be paused (409)" + 'There is no running job, that could be paused (409)', ); } else { this.notificationService.setError("Can't pause Job!", error.message); } - } + }, ); } @@ -185,23 +185,23 @@ export class JobService { this.httpPOSTRequest.unsubscribe(); } const pausePayload: JobCommand = { - command: "pause", - action: "resume", + command: 'pause', + action: 'resume', }; this.httpPOSTRequest = this.http - .post(this.configService.getURL("job"), pausePayload, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('job'), pausePayload, this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { if (error.status === 409) { this.notificationService.setError( "Can't resume Job!", - "There is no paused job, that could be resumed (409)" + 'There is no paused job, that could be resumed (409)', ); } else { this.notificationService.setError("Can't resume Job!", error.message); } - } + }, ); } @@ -210,19 +210,19 @@ export class JobService { this.httpPOSTRequest.unsubscribe(); } const pausePayload: JobCommand = { - command: "start", + command: 'start', }; this.httpPOSTRequest = this.http - .post(this.configService.getURL("job"), pausePayload, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('job'), pausePayload, this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { if (error.status === 409) { - this.notificationService.setError("Can't start Job!", "There is already a job running (409)"); + this.notificationService.setError("Can't start Job!", 'There is already a job running (409)'); } else { this.notificationService.setError("Can't start Job!", error.message); } - } + }, ); } @@ -231,22 +231,22 @@ export class JobService { this.httpPOSTRequest.unsubscribe(); } const preheatPayload: JobCommand = { - command: "preheat", + command: 'preheat', }; this.httpPOSTRequest = this.http - .post(this.configService.getURL("plugin/preheat"), preheatPayload, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('plugin/preheat'), preheatPayload, this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { this.notificationService.setError("Can't preheat printer!", error.message); - } + }, ); } private calculateEndTime(duration: number): string { const date = new Date(); date.setSeconds(date.getSeconds() + duration); - return `${("0" + date.getHours()).slice(-2)}:${("0" + date.getMinutes()).slice(-2)}`; + return `${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}`; } } diff --git a/src/app/layer-progress/layer-progress.component.html b/src/app/layer-progress/layer-progress.component.html index 2f25794ff8..d544016a66 100644 --- a/src/app/layer-progress/layer-progress.component.html +++ b/src/app/layer-progress/layer-progress.component.html @@ -1,4 +1,6 @@ - Layer {{ layerProgress.current }} of + Layer + {{ layerProgress.current }} + of {{ layerProgress.total }} diff --git a/src/app/layer-progress/layer-progress.component.ts b/src/app/layer-progress/layer-progress.component.ts index bc412764ad..8b8eb7e86a 100644 --- a/src/app/layer-progress/layer-progress.component.ts +++ b/src/app/layer-progress/layer-progress.component.ts @@ -1,12 +1,12 @@ -import { Component, OnDestroy, OnInit } from "@angular/core"; -import { Subscription } from "rxjs"; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Subscription } from 'rxjs'; -import { DisplayLayerProgressAPI, LayerProgressService } from "../plugin-service/layer-progress.service"; +import { DisplayLayerProgressAPI, LayerProgressService } from '../plugin-service/layer-progress.service'; @Component({ - selector: "app-layer-progress", - templateUrl: "./layer-progress.component.html", - styleUrls: ["./layer-progress.component.scss"], + selector: 'app-layer-progress', + templateUrl: './layer-progress.component.html', + styleUrls: ['./layer-progress.component.scss'], }) export class LayerProgressComponent implements OnInit, OnDestroy { private subscriptions: Subscription = new Subscription(); @@ -24,7 +24,7 @@ export class LayerProgressComponent implements OnInit, OnDestroy { this.displayLayerProgressService.getObservable().subscribe((layerProgress: DisplayLayerProgressAPI): void => { this.layerProgress.current = layerProgress.current; this.layerProgress.total = layerProgress.total; - }) + }), ); } diff --git a/src/app/main-menu/main-menu.component.html b/src/app/main-menu/main-menu.component.html index 6482e15b95..6409e710d4 100644 --- a/src/app/main-menu/main-menu.component.html +++ b/src/app/main-menu/main-menu.component.html @@ -1,7 +1,8 @@
- OctoDash. + + + OctoDash. +
diff --git a/src/app/main-menu/main-menu.component.scss b/src/app/main-menu/main-menu.component.scss index cf8658a0e9..99fe96ad7a 100644 --- a/src/app/main-menu/main-menu.component.scss +++ b/src/app/main-menu/main-menu.component.scss @@ -9,7 +9,7 @@ font-size: 5vw; font-weight: 500; margin-top: 4vh; - font-family: "Arvo"; + font-family: 'Arvo'; } &__settings-icon { diff --git a/src/app/main-menu/main-menu.component.ts b/src/app/main-menu/main-menu.component.ts index bb3e874659..523e1a8399 100644 --- a/src/app/main-menu/main-menu.component.ts +++ b/src/app/main-menu/main-menu.component.ts @@ -1,11 +1,11 @@ -import { Component } from "@angular/core"; +import { Component } from '@angular/core'; -import { AppService } from "../app.service"; +import { AppService } from '../app.service'; @Component({ - selector: "app-main-menu", - templateUrl: "./main-menu.component.html", - styleUrls: ["./main-menu.component.scss"], + selector: 'app-main-menu', + templateUrl: './main-menu.component.html', + styleUrls: ['./main-menu.component.scss'], }) export class MainMenuComponent { public constructor(public service: AppService) {} diff --git a/src/app/main-screen/main-screen.component.scss b/src/app/main-screen/main-screen.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/app/main-screen/main-screen.component.ts b/src/app/main-screen/main-screen.component.ts index 520960fcda..b744bdce91 100644 --- a/src/app/main-screen/main-screen.component.ts +++ b/src/app/main-screen/main-screen.component.ts @@ -1,12 +1,11 @@ -import { Component } from "@angular/core"; +import { Component } from '@angular/core'; -import { AppService } from "../app.service"; -import { JobService } from "../job.service"; +import { AppService } from '../app.service'; +import { JobService } from '../job.service'; @Component({ - selector: "app-main-screen", - templateUrl: "./main-screen.component.html", - styleUrls: ["./main-screen.component.scss"], + selector: 'app-main-screen', + templateUrl: './main-screen.component.html', }) export class MainScreenComponent { public printing = false; diff --git a/src/app/main-screen/no-touch/main-screen-no-touch.component.scss b/src/app/main-screen/no-touch/main-screen-no-touch.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/app/main-screen/no-touch/main-screen-no-touch.component.ts b/src/app/main-screen/no-touch/main-screen-no-touch.component.ts index 1e31861687..6bdf345b30 100644 --- a/src/app/main-screen/no-touch/main-screen-no-touch.component.ts +++ b/src/app/main-screen/no-touch/main-screen-no-touch.component.ts @@ -1,8 +1,7 @@ -import { Component } from "@angular/core"; +import { Component } from '@angular/core'; @Component({ - selector: "app-main-screen-no-touch", - templateUrl: "./main-screen-no-touch.component.html", - styleUrls: ["./main-screen-no-touch.component.scss"], + selector: 'app-main-screen-no-touch', + templateUrl: './main-screen-no-touch.component.html', }) export class MainScreenNoTouchComponent {} diff --git a/src/app/notification/notification.component.html b/src/app/notification/notification.component.html index 1067184fd9..0fcfd50228 100644 --- a/src/app/notification/notification.component.html +++ b/src/app/notification/notification.component.html @@ -3,7 +3,7 @@ [ngClass]="['notification__border-' + notification.type, show ? 'notification__show' : '']" (click)="hideNotification()" > - {{ notification.heading }} - {{ notification.text }} + {{ notification.heading }} + {{ notification.text }}tap this card to close it ... diff --git a/src/app/notification/notification.component.ts b/src/app/notification/notification.component.ts index 77e6d00139..e7d6e77cdd 100644 --- a/src/app/notification/notification.component.ts +++ b/src/app/notification/notification.component.ts @@ -1,20 +1,20 @@ -import { Component, OnDestroy } from "@angular/core"; -import { Subscription } from "rxjs"; +import { Component, OnDestroy } from '@angular/core'; +import { Subscription } from 'rxjs'; -import { Notification, NotificationService } from "./notification.service"; +import { Notification, NotificationService } from './notification.service'; @Component({ - selector: "app-notification", - templateUrl: "./notification.component.html", - styleUrls: ["./notification.component.scss"], + selector: 'app-notification', + templateUrl: './notification.component.html', + styleUrls: ['./notification.component.scss'], }) export class NotificationComponent implements OnDestroy { private subscriptions: Subscription = new Subscription(); public notification: Notification = { - heading: "", - text: "", - type: "", + heading: '', + text: '', + type: '', }; public show = false; @@ -22,7 +22,7 @@ export class NotificationComponent implements OnDestroy { this.subscriptions.add( this.notificationService .getObservable() - .subscribe((notification: Notification | "close"): void => this.setNotification(notification)) + .subscribe((notification: Notification | 'close'): void => this.setNotification(notification)), ); } @@ -30,8 +30,8 @@ export class NotificationComponent implements OnDestroy { this.show = false; } - private setNotification(notification: Notification | "close"): void { - if (notification === "close") { + private setNotification(notification: Notification | 'close'): void { + if (notification === 'close') { this.hideNotification(); } else { this.notification = notification; diff --git a/src/app/notification/notification.service.ts b/src/app/notification/notification.service.ts index 713cb76390..d7fa69af8d 100644 --- a/src/app/notification/notification.service.ts +++ b/src/app/notification/notification.service.ts @@ -1,18 +1,18 @@ -import { Injectable } from "@angular/core"; -import { Observable, Observer } from "rxjs"; -import { shareReplay } from "rxjs/operators"; +import { Injectable } from '@angular/core'; +import { Observable, Observer } from 'rxjs'; +import { shareReplay } from 'rxjs/operators'; @Injectable({ - providedIn: "root", + providedIn: 'root', }) export class NotificationService { - private observable: Observable; - private observer: Observer; + private observable: Observable; + private observer: Observer; private hideNotifications = false; private bootGrace = true; public constructor() { - this.observable = new Observable((observer: Observer): void => { + this.observable = new Observable((observer: Observer): void => { this.observer = observer; setTimeout((): void => { this.bootGrace = false; @@ -23,32 +23,50 @@ export class NotificationService { public enableNotifications(): void { console.clear(); this.hideNotifications = false; - this.observer.next("close"); + this.observer.next('close'); } public disableNotifications(): void { console.clear(); this.hideNotifications = true; - this.observer.next("close"); + this.observer.next('close'); } public setError(heading: string, text: string): void { - if ((!this.hideNotifications && !this.bootGrace) || (this.bootGrace && !text.endsWith("0 Unknown Error"))) { - this.observer.next({ heading, text, type: "error" }); + if ((!this.hideNotifications && !this.bootGrace) || (this.bootGrace && !text.endsWith('0 Unknown Error'))) { + if (this.observer) { + this.observer.next({ heading, text, type: 'error' }); + } else { + setTimeout(() => { + this.setError(heading, text); + }, 1000); + } } } public setWarning(heading: string, text: string): void { if (!this.hideNotifications) { - this.observer.next({ heading, text, type: "warn" }); + if (this.observer) { + this.observer.next({ heading, text, type: 'warn' }); + } else { + setTimeout(() => { + this.setWarning(heading, text); + }, 1000); + } } } public setUpdate(heading: string, text: string): void { - this.observer.next({ heading, text, type: "update" }); + if (this.observer) { + this.observer.next({ heading, text, type: 'update' }); + } else { + setTimeout(() => { + this.setUpdate(heading, text); + }, 1000); + } } - public getObservable(): Observable { + public getObservable(): Observable { return this.observable; } diff --git a/src/app/octoprint-api/filesAPI.ts b/src/app/octoprint-api/filesAPI.ts index 3516d8b386..6a69191005 100644 --- a/src/app/octoprint-api/filesAPI.ts +++ b/src/app/octoprint-api/filesAPI.ts @@ -1,4 +1,4 @@ -import { OctoprintFilament } from "./jobAPI"; +import { OctoprintFilament } from './jobAPI'; export interface OctoprintFilesAPI { date: number; diff --git a/src/app/octoprint.service.ts b/src/app/octoprint.service.ts index 3ab4cc62f1..1c7e668b5b 100644 --- a/src/app/octoprint.service.ts +++ b/src/app/octoprint.service.ts @@ -1,12 +1,12 @@ -import { HttpClient, HttpErrorResponse } from "@angular/common/http"; -import { Injectable } from "@angular/core"; -import { Subscription } from "rxjs"; +import { HttpClient, HttpErrorResponse } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Subscription } from 'rxjs'; -import { ConfigService } from "./config/config.service"; -import { NotificationService } from "./notification/notification.service"; +import { ConfigService } from './config/config.service'; +import { NotificationService } from './notification/notification.service'; @Injectable({ - providedIn: "root", + providedIn: 'root', }) export class OctoprintService { private httpPOSTRequest: Subscription; @@ -14,7 +14,7 @@ export class OctoprintService { public constructor( private http: HttpClient, private configService: ConfigService, - private notificationService: NotificationService + private notificationService: NotificationService, ) {} public disconnectPrinter(): void { @@ -22,15 +22,15 @@ export class OctoprintService { this.httpPOSTRequest.unsubscribe(); } const disconnectPayload: DisconnectCommand = { - command: "disconnect", + command: 'disconnect', }; this.httpPOSTRequest = this.http - .post(this.configService.getURL("connection"), disconnectPayload, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('connection'), disconnectPayload, this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { this.notificationService.setError("Can't disconnect from Printer!", error.message); - } + }, ); } @@ -44,7 +44,7 @@ export class OctoprintService { (): void => null, (error: HttpErrorResponse): void => { this.notificationService.setError(`Can't execute ${command} command!`, error.message); - } + }, ); } } diff --git a/src/app/plugin-service/enclosure.service.ts b/src/app/plugin-service/enclosure.service.ts index 90c74e19de..e6b594b98d 100644 --- a/src/app/plugin-service/enclosure.service.ts +++ b/src/app/plugin-service/enclosure.service.ts @@ -1,14 +1,14 @@ -import { HttpClient, HttpErrorResponse } from "@angular/common/http"; -import { Injectable } from "@angular/core"; -import { Observable, Observer, Subscription, timer } from "rxjs"; -import { shareReplay } from "rxjs/operators"; +import { HttpClient, HttpErrorResponse } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable, Observer, Subscription, timer } from 'rxjs'; +import { shareReplay } from 'rxjs/operators'; -import { TemperatureReading } from "../bottom-bar/bottom-bar.component"; -import { ConfigService } from "../config/config.service"; -import { NotificationService } from "../notification/notification.service"; +import { TemperatureReading } from '../bottom-bar/bottom-bar.component'; +import { ConfigService } from '../config/config.service'; +import { NotificationService } from '../notification/notification.service'; @Injectable({ - providedIn: "root", + providedIn: 'root', }) export class EnclosureService { private httpGETRequest: Subscription; @@ -18,7 +18,7 @@ export class EnclosureService { public constructor( private http: HttpClient, private configService: ConfigService, - private notificationService: NotificationService + private notificationService: NotificationService, ) { this.observable = new Observable((observer: Observer): void => { timer(2500, 15000).subscribe((): void => { @@ -28,9 +28,9 @@ export class EnclosureService { this.httpGETRequest = this.http .get( this.configService - .getURL("plugin/enclosure/inputs/" + this.configService.getAmbientTemperatureSensorName()) - .replace("/api", ""), - this.configService.getHTTPHeaders() + .getURL('plugin/enclosure/inputs/' + this.configService.getAmbientTemperatureSensorName()) + .replace('/api', ''), + this.configService.getHTTPHeaders(), ) .subscribe( (data: EnclosurePluginAPI): void => { @@ -38,7 +38,7 @@ export class EnclosureService { observer.next(({ temperature: data.temp_sensor_temp, humidity: data.temp_sensor_humidity, - unit: data.use_fahrenheit ? "°F" : "°C", + unit: data.use_fahrenheit ? '°F' : '°C', } as unknown) as TemperatureReading); }, (error: HttpErrorResponse): void => { @@ -47,7 +47,7 @@ export class EnclosureService { } else { this.notificationService.setError("Can't retrieve enclosure temperature!", error.message); } - } + }, ); }); }).pipe(shareReplay(1)); diff --git a/src/app/plugin-service/filament-manager.service.ts b/src/app/plugin-service/filament-manager.service.ts index 93658a8dbe..a3a98bb841 100644 --- a/src/app/plugin-service/filament-manager.service.ts +++ b/src/app/plugin-service/filament-manager.service.ts @@ -1,14 +1,14 @@ -import { HttpClient, HttpErrorResponse } from "@angular/common/http"; -import { Injectable } from "@angular/core"; -import { Subscription } from "rxjs"; +import { HttpClient, HttpErrorResponse } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Subscription } from 'rxjs'; -import { ConfigService } from "../config/config.service"; -import { NotificationService } from "../notification/notification.service"; +import { ConfigService } from '../config/config.service'; +import { NotificationService } from '../notification/notification.service'; const colorRegexp = /\((.*)\)$/g; @Injectable({ - providedIn: "root", + providedIn: 'root', }) export class FilamentManagerService { private httpGETRequest: Subscription; @@ -17,7 +17,7 @@ export class FilamentManagerService { public constructor( private configService: ConfigService, private notificationService: NotificationService, - private http: HttpClient + private http: HttpClient, ) {} public getSpoolList(): Promise { @@ -27,8 +27,8 @@ export class FilamentManagerService { } this.httpGETRequest = this.http .get( - this.configService.getURL("plugin/filamentmanager/spools").replace("/api", ""), - this.configService.getHTTPHeaders() + this.configService.getURL('plugin/filamentmanager/spools').replace('/api', ''), + this.configService.getHTTPHeaders(), ) .subscribe( (spools: FilamentSpoolList): void => { @@ -36,9 +36,9 @@ export class FilamentManagerService { const match = colorRegexp.exec(spool.name); if (match) { spool.color = match[1]; - spool.displayName = `${spool.profile.vendor} - ${spool.name.replace(match[0], "")}`; + spool.displayName = `${spool.profile.vendor} - ${spool.name.replace(match[0], '')}`; } else { - spool.color = "#f5f6fa"; + spool.color = '#f5f6fa'; spool.displayName = `${spool.profile.vendor} - ${spool.name}`; } colorRegexp.lastIndex = 0; @@ -48,7 +48,7 @@ export class FilamentManagerService { (error: HttpErrorResponse): void => { this.notificationService.setError("Can't load filament spools!", error.message); reject(); - } + }, ); }); } @@ -60,8 +60,8 @@ export class FilamentManagerService { } this.httpGETRequest = this.http .get( - this.configService.getURL("plugin/filamentmanager/selections").replace("/api", ""), - this.configService.getHTTPHeaders() + this.configService.getURL('plugin/filamentmanager/selections').replace('/api', ''), + this.configService.getHTTPHeaders(), ) .subscribe( (selections: FilamentSelections): void => { @@ -71,9 +71,9 @@ export class FilamentManagerService { selections.selections[0].spool.color = match[1]; selections.selections[0].spool.displayName = `${ selections.selections[0].spool.profile.vendor - } - ${selections.selections[0].spool.name.replace(match[0], "")}`; + } - ${selections.selections[0].spool.name.replace(match[0], '')}`; } else { - selections.selections[0].spool.color = "#f5f6fa"; + selections.selections[0].spool.color = '#f5f6fa'; selections.selections[0].spool.displayName = `${selections.selections[0].spool.profile.vendor} - ${selections.selections[0].spool.name}`; } colorRegexp.lastIndex = 0; @@ -84,7 +84,7 @@ export class FilamentManagerService { (error: HttpErrorResponse): void => { this.notificationService.setError("Can't load filament spools!", error.message); reject(); - } + }, ); }); } @@ -99,9 +99,9 @@ export class FilamentManagerService { }; this.httpPOSTRequest = this.http .patch( - this.configService.getURL("plugin/filamentmanager/selections/0").replace("/api", ""), + this.configService.getURL('plugin/filamentmanager/selections/0').replace('/api', ''), setSpoolBody, - this.configService.getHTTPHeaders() + this.configService.getHTTPHeaders(), ) .subscribe( (selection: FilamentSelectionConfirm): void => { @@ -110,7 +110,7 @@ export class FilamentManagerService { } else { this.notificationService.setError( `Spool IDs didn't match`, - `Can't change spool. Please change spool manually in the OctoPrint UI.` + `Can't change spool. Please change spool manually in the OctoPrint UI.`, ); reject(); } @@ -118,7 +118,7 @@ export class FilamentManagerService { (error: HttpErrorResponse): void => { this.notificationService.setError("Can't set new spool!", error.message); reject(); - } + }, ); }); } diff --git a/src/app/plugin-service/layer-progress.service.ts b/src/app/plugin-service/layer-progress.service.ts index bed300beaf..76c580df77 100644 --- a/src/app/plugin-service/layer-progress.service.ts +++ b/src/app/plugin-service/layer-progress.service.ts @@ -1,14 +1,14 @@ -import { HttpClient, HttpErrorResponse } from "@angular/common/http"; -import { Injectable } from "@angular/core"; -import { Observable, Observer, Subscription, timer } from "rxjs"; -import { shareReplay } from "rxjs/operators"; +import { HttpClient, HttpErrorResponse } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable, Observer, Subscription, timer } from 'rxjs'; +import { shareReplay } from 'rxjs/operators'; -import { ConfigService } from "../config/config.service"; -import { NotificationService } from "../notification/notification.service"; -import { OctoprintLayerProgressAPI } from "../octoprint-api/layerProgressAPI"; +import { ConfigService } from '../config/config.service'; +import { NotificationService } from '../notification/notification.service'; +import { OctoprintLayerProgressAPI } from '../octoprint-api/layerProgressAPI'; @Injectable({ - providedIn: "root", + providedIn: 'root', }) export class LayerProgressService { private httpGETRequest: Subscription; @@ -17,7 +17,7 @@ export class LayerProgressService { public constructor( private configService: ConfigService, private notificationService: NotificationService, - private http: HttpClient + private http: HttpClient, ) { this.observable = new Observable((observer: Observer): void => { timer(1000, this.configService.getAPIPollingInterval()).subscribe((): void => { @@ -26,20 +26,20 @@ export class LayerProgressService { } this.httpGETRequest = this.http .get( - this.configService.getURL("plugin/DisplayLayerProgress/values").replace("/api", ""), - this.configService.getHTTPHeaders() + this.configService.getURL('plugin/DisplayLayerProgress/values').replace('/api', ''), + this.configService.getHTTPHeaders(), ) .subscribe( (data: OctoprintLayerProgressAPI): void => { observer.next({ - current: data.layer.current === "-" ? 0 : Number(data.layer.current), - total: data.layer.total === "-" ? 0 : Number(data.layer.total), - fanSpeed: data.fanSpeed === "-" ? 0 : data.fanSpeed === "Off" ? 0 : data.fanSpeed.replace("%", ""), + current: data.layer.current === '-' ? 0 : Number(data.layer.current), + total: data.layer.total === '-' ? 0 : Number(data.layer.total), + fanSpeed: data.fanSpeed === '-' ? 0 : data.fanSpeed === 'Off' ? 0 : data.fanSpeed.replace('%', ''), }); }, (error: HttpErrorResponse): void => { this.notificationService.setError("Can't retrieve layer progress!", error.message); - } + }, ); }); }).pipe(shareReplay(1)); diff --git a/src/app/plugin-service/psu-control.service.ts b/src/app/plugin-service/psu-control.service.ts index 0c543ff34c..476548d72a 100644 --- a/src/app/plugin-service/psu-control.service.ts +++ b/src/app/plugin-service/psu-control.service.ts @@ -1,13 +1,13 @@ -import { HttpClient, HttpErrorResponse } from "@angular/common/http"; -import { Injectable } from "@angular/core"; -import { Subscription } from "rxjs"; +import { HttpClient, HttpErrorResponse } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Subscription } from 'rxjs'; -import { ConfigService } from "../config/config.service"; -import { NotificationService } from "../notification/notification.service"; -import { JobCommand } from "../octoprint-api/jobAPI"; +import { ConfigService } from '../config/config.service'; +import { NotificationService } from '../notification/notification.service'; +import { JobCommand } from '../octoprint-api/jobAPI'; @Injectable({ - providedIn: "root", + providedIn: 'root', }) export class PsuControlService { private httpPOSTRequest: Subscription; @@ -15,7 +15,7 @@ export class PsuControlService { public constructor( private configService: ConfigService, private notificationService: NotificationService, - private http: HttpClient + private http: HttpClient, ) {} public changePSUState(on: boolean): void { @@ -23,15 +23,15 @@ export class PsuControlService { this.httpPOSTRequest.unsubscribe(); } const psuPayload: JobCommand = { - command: on ? "turnPSUOn" : "turnPSUOff", + command: on ? 'turnPSUOn' : 'turnPSUOff', }; this.httpPOSTRequest = this.http - .post(this.configService.getURL("plugin/psucontrol"), psuPayload, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('plugin/psucontrol'), psuPayload, this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { this.notificationService.setError("Can't control PSU!", error.message); - } + }, ); } @@ -40,15 +40,15 @@ export class PsuControlService { this.httpPOSTRequest.unsubscribe(); } const psuPayload: JobCommand = { - command: "togglePSU", + command: 'togglePSU', }; this.httpPOSTRequest = this.http - .post(this.configService.getURL("plugin/psucontrol"), psuPayload, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('plugin/psucontrol'), psuPayload, this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { this.notificationService.setError("Can't control PSU!", error.message); - } + }, ); } } diff --git a/src/app/print-control/print-control.component.html b/src/app/print-control/print-control.component.html index f38a39e99a..d2c6f72821 100644 --- a/src/app/print-control/print-control.component.html +++ b/src/app/print-control/print-control.component.html @@ -6,7 +6,10 @@
- +
back + + back +
@@ -24,10 +27,8 @@
- - cancel print? - -
+ cancel print? +
yes no
@@ -35,13 +36,14 @@
- +
back + + back +
- - print paused - + print paused
resume @@ -51,7 +53,8 @@ @@ -71,7 +74,8 @@ +
- {{ temperatureHotend }}°C + {{ temperatureHotend }} + °C
- {{ temperatureHeatbed }}°C + {{ temperatureHeatbed }} + °C
- {{ feedrate }}% + {{ feedrate }} + %
- {{ flowrate }}% + {{ flowrate }} + %
- back + + back
- Z {{ zOffset == 0 ? "±" : zOffset > 0 ? "+" : "-" }} - {{ getZOffset() }}mm + + Z + {{ zOffset == 0 ? '±' : zOffset > 0 ? '+' : '-' }} {{ getZOffset() }}mm +
- back + + back
- - Babystep Z - + Babystep Z
+ 0.02mm + + 0.02 + mm + + 0.01mm + + 0.01 + mm +
- {{ zOffset == 0 ? "±" : zOffset > 0 ? "+" : "-" }} + {{ zOffset == 0 ? '±' : zOffset > 0 ? '+' : '-' }} {{ getZOffset() }} mm @@ -217,15 +227,19 @@ matRipple [matRippleUnbounded]="false" (click)="babystepZ(-0.02)" - >- 0.02mm + - 0.02 + mm + - 0.01mm + - 0.01 + mm +
diff --git a/src/app/print-control/print-control.component.ts b/src/app/print-control/print-control.component.ts index 29af0aa8ac..eb973fe1f3 100644 --- a/src/app/print-control/print-control.component.ts +++ b/src/app/print-control/print-control.component.ts @@ -1,13 +1,13 @@ -import { Component } from "@angular/core"; -import { take } from "rxjs/operators"; +import { Component } from '@angular/core'; +import { take } from 'rxjs/operators'; -import { JobService } from "../job.service"; -import { PrinterService, PrinterStatusAPI } from "../printer.service"; +import { JobService } from '../job.service'; +import { PrinterService, PrinterStatusAPI } from '../printer.service'; @Component({ - selector: "app-print-control", - templateUrl: "./print-control.component.html", - styleUrls: ["./print-control.component.scss"], + selector: 'app-print-control', + templateUrl: './print-control.component.html', + styleUrls: ['./print-control.component.scss'], }) export class PrintControlComponent { public showControls = false; @@ -18,7 +18,7 @@ export class PrintControlComponent { public temperatureHeatbed: number; public feedrate: number; public flowrate: number; - private zOffset: number; + public zOffset: number; public constructor(private jobService: JobService, private printerService: PrinterService) { this.temperatureHotend = 0; diff --git a/src/app/printer-status/printer-status.component.html b/src/app/printer-status/printer-status.component.html index 91daa255e3..c69eb3e562 100644 --- a/src/app/printer-status/printer-status.component.html +++ b/src/app/printer-status/printer-status.component.html @@ -8,12 +8,14 @@ [matRippleUnbounded]="false" > - {{ printerStatus.nozzle.current }}°C - /{{ printerStatus.nozzle.set }}°C + + {{ printerStatus.nozzle.current }} + °C + + + /{{ printerStatus.nozzle.set }} + °C +
- {{ printerStatus.heatbed.current }}°C - /{{ printerStatus.heatbed.set }}°C + + {{ printerStatus.heatbed.current }} + °C + + + /{{ printerStatus.heatbed.set }} + °C + - {{ printerStatus.fan }}% + + {{ printerStatus.fan }} + % +
@@ -47,7 +52,8 @@
- back + + back { this.printerStatus.fan = layerProgress.fanSpeed; - }) + }), ); } @@ -79,14 +79,14 @@ export class PrinterStatusComponent implements OnInit, OnDestroy { private showQuickControl(): void { setTimeout((): void => { - const controlViewDOM = document.getElementById("quickControl"); - controlViewDOM.style.opacity = "1"; + const controlViewDOM = document.getElementById('quickControl'); + controlViewDOM.style.opacity = '1'; }, 50); } public hideQuickControl(): void { - const controlViewDOM = document.getElementById("quickControl"); - controlViewDOM.style.opacity = "0"; + const controlViewDOM = document.getElementById('quickControl'); + controlViewDOM.style.opacity = '0'; setTimeout((): void => { this.view = QuickControlView.NONE; }, 500); diff --git a/src/app/printer.service.ts b/src/app/printer.service.ts index 8c61832224..dceb8576d4 100644 --- a/src/app/printer.service.ts +++ b/src/app/printer.service.ts @@ -1,16 +1,16 @@ -import { HttpClient, HttpErrorResponse } from "@angular/common/http"; -import { Injectable } from "@angular/core"; -import { Router } from "@angular/router"; -import { Observable, Observer, Subscription, timer } from "rxjs"; -import { shareReplay } from "rxjs/operators"; +import { HttpClient, HttpErrorResponse } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Router } from '@angular/router'; +import { Observable, Observer, Subscription, timer } from 'rxjs'; +import { shareReplay } from 'rxjs/operators'; -import { ConfigService } from "./config/config.service"; -import { NotificationService } from "./notification/notification.service"; -import { OctoprintConnectionAPI } from "./octoprint-api/connectionAPI"; -import { OctoprintPrinterStatusAPI } from "./octoprint-api/printerStatusAPI"; +import { ConfigService } from './config/config.service'; +import { NotificationService } from './notification/notification.service'; +import { OctoprintConnectionAPI } from './octoprint-api/connectionAPI'; +import { OctoprintPrinterStatusAPI } from './octoprint-api/printerStatusAPI'; @Injectable({ - providedIn: "root", + providedIn: 'root', }) export class PrinterService { private httpGETRequest: Subscription; @@ -21,7 +21,7 @@ export class PrinterService { private http: HttpClient, private configService: ConfigService, private notificationService: NotificationService, - private router: Router + private router: Router, ) { this.observable = new Observable((observer: Observer): void => { timer(500, this.configService.getAPIPollingInterval()).subscribe((): void => { @@ -29,7 +29,7 @@ export class PrinterService { this.httpGETRequest.unsubscribe(); } this.httpGETRequest = this.http - .get(this.configService.getURL("printer"), this.configService.getHTTPHeaders()) + .get(this.configService.getURL('printer'), this.configService.getHTTPHeaders()) .subscribe( (data: OctoprintPrinterStatusAPI): void => { const printerStatus: PrinterStatusAPI = { @@ -49,7 +49,7 @@ export class PrinterService { if (error.status === 409) { this.isPrinterOffline().then((printerOffline): void => { if (printerOffline) { - this.router.navigate(["/standby"]); + this.router.navigate(['/standby']); } else { this.notificationService.setError("Can't retrieve printer status!", error.message); } @@ -82,7 +82,7 @@ export class PrinterService { observer.next(printerStatus); this.notificationService.setError("Can't retrieve printer status!", error.message); } - } + }, ); }); }).pipe(shareReplay(1)); @@ -93,24 +93,24 @@ export class PrinterService { } public stopMotors(): void { - this.executeGCode("M410"); + this.executeGCode('M410'); } public jog(x: number, y: number, z: number): void { const jogPayload: JogCommand = { - command: "jog", + command: 'jog', x, y, z, speed: z !== 0 ? this.configService.getZSpeed() * 60 : this.configService.getXYSpeed() * 60, }; this.httpPOSTRequest = this.http - .post(this.configService.getURL("printer/printhead"), jogPayload, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('printer/printhead'), jogPayload, this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { this.notificationService.setError("Can't move Printhead!", error.message); - } + }, ); } @@ -137,17 +137,17 @@ export class PrinterService { private moveExtruder(amount: number, speed: number): void { const extrudePayload: ExtrudeCommand = { - command: "extrude", + command: 'extrude', amount, speed: speed * 60, }; this.httpPOSTRequest = this.http - .post(this.configService.getURL("printer/tool"), extrudePayload, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('printer/tool'), extrudePayload, this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { this.notificationService.setError("Can't extrude Filament!", error.message); - } + }, ); } @@ -156,47 +156,47 @@ export class PrinterService { this.httpPOSTRequest.unsubscribe(); } const gCodePayload: GCodeCommand = { - commands: gCode.split("; "), + commands: gCode.split('; '), }; this.httpPOSTRequest = this.http - .post(this.configService.getURL("printer/command"), gCodePayload, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('printer/command'), gCodePayload, this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { this.notificationService.setError("Can't send GCode!", error.message); - } + }, ); } public setTemperatureHotend(temperature: number): void { const temperatureHotendCommand: TemperatureHotendCommand = { - command: "target", + command: 'target', targets: { tool0: temperature, }, }; this.httpPOSTRequest = this.http - .post(this.configService.getURL("printer/tool"), temperatureHotendCommand, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('printer/tool'), temperatureHotendCommand, this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { this.notificationService.setError("Can't set Hotend Temperature!", error.message); - } + }, ); } public setTemperatureHeatbed(temperature: number): void { const temperatureHeatbedCommand: TemperatureHeatbedCommand = { - command: "target", + command: 'target', target: temperature, }; this.httpPOSTRequest = this.http - .post(this.configService.getURL("printer/bed"), temperatureHeatbedCommand, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('printer/bed'), temperatureHeatbedCommand, this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { this.notificationService.setError("Can't set Heatbed Temperature!", error.message); - } + }, ); } @@ -205,16 +205,16 @@ export class PrinterService { return; } const feedrateCommand: FeedrateCommand = { - command: "feedrate", + command: 'feedrate', factor: feedrate, }; this.httpPOSTRequest = this.http - .post(this.configService.getURL("printer/printhead"), feedrateCommand, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('printer/printhead'), feedrateCommand, this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { this.notificationService.setError("Can't set Feedrate!", error.message); - } + }, ); } @@ -223,33 +223,33 @@ export class PrinterService { return; } const flowrateCommand: FeedrateCommand = { - command: "flowrate", + command: 'flowrate', factor: flowrate, }; this.httpPOSTRequest = this.http - .post(this.configService.getURL("printer/tool"), flowrateCommand, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('printer/tool'), flowrateCommand, this.configService.getHTTPHeaders()) .subscribe( (): void => null, (error: HttpErrorResponse): void => { this.notificationService.setError("Can't set Flowrate!", error.message); - } + }, ); } public setFanSpeed(percentage: number): void { - this.executeGCode("M106 S" + Math.round((percentage / 100) * 255)); + this.executeGCode('M106 S' + Math.round((percentage / 100) * 255)); } public isPrinterOffline(): Promise { return new Promise((resolve): void => { - this.http.get(this.configService.getURL("connection"), this.configService.getHTTPHeaders()).subscribe( + this.http.get(this.configService.getURL('connection'), this.configService.getHTTPHeaders()).subscribe( (data: OctoprintConnectionAPI): void => { - resolve(data.current.state === "Closed" || data.current.state.includes("Error:")); + resolve(data.current.state === 'Closed' || data.current.state.includes('Error:')); }, (error: HttpErrorResponse): void => { this.notificationService.setError("Can't retrieve connection state!", error.message); resolve(false); - } + }, ); }); } @@ -267,7 +267,7 @@ export interface PrinterValue { } interface JogCommand { - command: "jog"; + command: 'jog'; x: number; y: number; z: number; @@ -275,15 +275,15 @@ interface JogCommand { } interface ExtrudeCommand { - command: "extrude"; + command: 'extrude'; amount: number; speed: number; } interface ExtrudeCommand { - command: 'extrude'; - amount: number; - speed: number; + command: 'extrude'; + amount: number; + speed: number; } interface GCodeCommand { diff --git a/src/app/printerprofile.service.ts b/src/app/printerprofile.service.ts index 121d1b3de6..30563212ac 100644 --- a/src/app/printerprofile.service.ts +++ b/src/app/printerprofile.service.ts @@ -1,16 +1,15 @@ -import { HttpClient, HttpErrorResponse } from "@angular/common/http"; -import { Injectable } from "@angular/core"; -import { Router } from "@angular/router"; -import { Subscription } from "rxjs"; +import { HttpClient, HttpErrorResponse } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Router } from '@angular/router'; +import { Subscription } from 'rxjs'; -import { ConfigService } from "./config/config.service"; -import { NotificationService } from "./notification/notification.service"; -import { PrinterService } from "./printer.service"; - -import { OctoprintPrinterProfileAPI } from "./octoprint-api/printerProfileAPI"; +import { ConfigService } from './config/config.service'; +import { NotificationService } from './notification/notification.service'; +import { OctoprintPrinterProfileAPI } from './octoprint-api/printerProfileAPI'; +import { PrinterService } from './printer.service'; @Injectable({ - providedIn: "root", + providedIn: 'root', }) export class PrinterProfileService { private httpGETRequest: Subscription; @@ -20,8 +19,8 @@ export class PrinterProfileService { private configService: ConfigService, private notificationService: NotificationService, private printerStatusService: PrinterService, - private router: Router - ) { } + private router: Router, + ) {} public getDefaultPrinterProfile(): Promise { return new Promise((resolve, reject): void => { @@ -29,7 +28,7 @@ export class PrinterProfileService { this.httpGETRequest.unsubscribe(); } this.httpGETRequest = this.http - .get(this.configService.getURL("printerprofiles/_default"), this.configService.getHTTPHeaders()) + .get(this.configService.getURL('printerprofiles/_default'), this.configService.getHTTPHeaders()) .subscribe( (printerProfile: OctoprintPrinterProfileAPI): void => { resolve(printerProfile); @@ -38,7 +37,7 @@ export class PrinterProfileService { if (error.status === 409) { this.printerStatusService.isPrinterOffline().then((printerOffline): void => { if (printerOffline) { - this.router.navigate(["/standby"]); + this.router.navigate(['/standby']); } else { this.notificationService.setError("Can't retrieve printer profile!", error.message); } @@ -50,9 +49,8 @@ export class PrinterProfileService { this.notificationService.setError("Can't retrieve printer status!", error.message); } } - } + }, ); }); } - } diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html index 7d3b277f28..0101548a46 100644 --- a/src/app/settings/settings.component.html +++ b/src/app/settings/settings.component.html @@ -5,27 +5,42 @@
settings
    -
  • general
    • -
  • octodash
    • -
  • plugins
    • -
  • about
    • +
  • + general + +
    • +
  • + octodash + +
    • +
  • + plugins + +
    • +
  • + about + +
update available! + update available! + save - made with by - /u/UnchartedBull + + made with + + by /u/UnchartedBull +
- general + + general
OctoPrint Connection @@ -37,7 +52,7 @@ id="octoprintURLName" class="settings__input" name="octoprintURLName" - style="width: 23.2vw;" + style="width: 23.2vw" [(ngModel)]="this.config.octoprint.urlSplit.url" required /> @@ -47,7 +62,7 @@ id="octoprintURLPort" class="settings__input" name="octoprintURLPort" - style="width: 8vw;" + style="width: 8vw" [(ngModel)]="this.config.octoprint.urlSplit.port" required /> @@ -58,7 +73,7 @@ id="accessToken" class="settings__input" name="accessToken" - style="width: 44.94vw;" + style="width: 44.94vw" [(ngModel)]="this.config.octoprint.accessToken" required /> @@ -71,32 +86,38 @@ id="printerName" class="settings__input" name="printerName" - style="width: 44.94vw;" + style="width: 44.94vw" [(ngModel)]="config.printer.name" required /> - - -
- + + - + @@ -106,40 +127,49 @@ Default Temperatures & Fan Speed
- + + - +
- + + @@ -151,7 +181,7 @@
- - - - -
+
- + + - + +
- + + - +
- + + - + @@ -260,19 +304,21 @@
- octodash + + octodash
General - + @@ -310,7 +356,8 @@ - -
- sort by
+ sort by +
- order
+ order +
@@ -370,7 +418,7 @@ id="action-command" class="settings__input" name="action-command" - style="width: 44.94vw; margin-bottom: -2vh;" + style="width: 44.94vw; margin-bottom: -2vh" [(ngModel)]="config.octodash.customActions[number].command" required /> @@ -383,19 +431,19 @@ id="action-icon" class="settings__input" name="action-icon" - style="width: 14vw;" + style="width: 14vw" [(ngModel)]="config.octodash.customActions[number].icon" required />
+ @@ -426,7 +474,7 @@ +
- plugins + + plugins
Display Layer Progress @@ -471,13 +520,16 @@ enabled
- +
- about + + about
@@ -561,8 +614,10 @@ © 2019-2020 UnchartedBull License

- Licensed under the Apache 2.0 License.
- http://www.apache.org/licenses/LICENSE-2.0
+ Licensed under the Apache 2.0 License. +
+ http://www.apache.org/licenses/LICENSE-2.0 +

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts index 01e4f07d6f..9f0e22013e 100644 --- a/src/app/settings/settings.component.ts +++ b/src/app/settings/settings.component.ts @@ -1,31 +1,31 @@ -import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from "@angular/core"; +import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'; -import { AppService } from "../app.service"; -import { Config, ConfigService } from "../config/config.service"; -import { NotificationService } from "../notification/notification.service"; +import { AppService } from '../app.service'; +import { Config, ConfigService } from '../config/config.service'; +import { NotificationService } from '../notification/notification.service'; @Component({ - selector: "app-settings", - templateUrl: "./settings.component.html", - styleUrls: ["./settings.component.scss"], + selector: 'app-settings', + templateUrl: './settings.component.html', + styleUrls: ['./settings.component.scss'], }) export class SettingsComponent implements OnInit { @Output() closeFunction = new EventEmitter(); - @ViewChild("settingsMain") private settingsMain: ElementRef; - @ViewChild("settingsGeneral") private settingsGeneral: ElementRef; - @ViewChild("settingsOctoDash") private settingsOctoDash: ElementRef; - @ViewChild("settingsPlugins") private settingsPlugins: ElementRef; - @ViewChild("settingsCredits") private settingsCredits: ElementRef; + @ViewChild('settingsMain') private settingsMain: ElementRef; + @ViewChild('settingsGeneral') private settingsGeneral: ElementRef; + @ViewChild('settingsOctoDash') private settingsOctoDash: ElementRef; + @ViewChild('settingsPlugins') private settingsPlugins: ElementRef; + @ViewChild('settingsCredits') private settingsCredits: ElementRef; public fadeOutAnimation = false; public config: Config; public customActionsPosition = [ - "Top Left", - "Top Right", - "Middle Left", - "Middle Right", - "Bottom Left", - "Bottom Right", + 'Top Left', + 'Top Right', + 'Middle Left', + 'Middle Right', + 'Bottom Left', + 'Bottom Right', ]; private overwriteNoSave = false; private pages = []; @@ -36,16 +36,16 @@ export class SettingsComponent implements OnInit { public constructor( private configService: ConfigService, private notificationService: NotificationService, - public service: AppService + public service: AppService, ) { this.config = this.configService.getCurrentConfig(); this.config = this.configService.revertConfigForInput(this.config); try { - this.ipc = window.require("electron").ipcRenderer; + this.ipc = window.require('electron').ipcRenderer; } catch (e) { this.notificationService.setError( "Can't connect to backend", - "Please restart your system. If the issue persists open an issue on GitHub." + 'Please restart your system. If the issue persists open an issue on GitHub.', ); } } @@ -74,35 +74,35 @@ export class SettingsComponent implements OnInit { }, 800); } else { this.notificationService.setWarning( - "Configuration not saved!", - "You haven't saved your config yet, so your changes will not be applied. Click close again if you want to discard your changes!" + 'Configuration not saved!', + "You haven't saved your config yet, so your changes will not be applied. Click close again if you want to discard your changes!", ); this.overwriteNoSave = true; } } - public changePage(page: number, current: number, direction: "forward" | "backward"): void { - this.pages[current].classList.add("settings__content-slideout-" + direction); - this.pages[page].classList.remove("settings__content-inactive"); - this.pages[page].classList.add("settings__content-slidein-" + direction); + public changePage(page: number, current: number, direction: 'forward' | 'backward'): void { + this.pages[current].classList.add('settings__content-slideout-' + direction); + this.pages[page].classList.remove('settings__content-inactive'); + this.pages[page].classList.add('settings__content-slidein-' + direction); setTimeout((): void => { - this.pages[current].classList.add("settings__content-inactive"); - this.pages[current].classList.remove("settings__content-slideout-" + direction); - this.pages[page].classList.remove("settings__content-slidein-" + direction); + this.pages[current].classList.add('settings__content-inactive'); + this.pages[current].classList.remove('settings__content-slideout-' + direction); + this.pages[page].classList.remove('settings__content-slidein-' + direction); }, 470); } public updateConfig(): void { const config = this.configService.createConfigFromInput(this.config); if (!this.configService.validateGiven(config)) { - this.notificationService.setError("Config is invalid!", this.configService.getErrors().toString()); + this.notificationService.setError('Config is invalid!', this.configService.getErrors().toString()); } this.configService.saveConfig(config); this.overwriteNoSave = true; this.hideSettings(); this.configService.updateConfig(); - this.ipc.send("reload", ""); + this.ipc.send('reload', ''); } public showUpdate(): void { diff --git a/src/app/standby/standby.component.html b/src/app/standby/standby.component.html index 52066e547f..b99e89ab02 100644 --- a/src/app/standby/standby.component.html +++ b/src/app/standby/standby.component.html @@ -9,6 +9,4 @@ tap this card to close it ...

-
- connecting ... -
+
connecting ...
diff --git a/src/app/standby/standby.component.ts b/src/app/standby/standby.component.ts index cc16329aba..c72157873c 100644 --- a/src/app/standby/standby.component.ts +++ b/src/app/standby/standby.component.ts @@ -1,21 +1,21 @@ -import { HttpClient } from "@angular/common/http"; -import { Component, OnInit } from "@angular/core"; -import { Router } from "@angular/router"; +import { HttpClient } from '@angular/common/http'; +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; -import { AppService } from "../app.service"; -import { ConfigService } from "../config/config.service"; -import { NotificationService } from "../notification/notification.service"; -import { OctoprintConnectionAPI } from "../octoprint-api/connectionAPI"; -import { PsuControlService } from "../plugin-service/psu-control.service"; +import { AppService } from '../app.service'; +import { ConfigService } from '../config/config.service'; +import { NotificationService } from '../notification/notification.service'; +import { OctoprintConnectionAPI } from '../octoprint-api/connectionAPI'; +import { PsuControlService } from '../plugin-service/psu-control.service'; @Component({ - selector: "app-standby", - templateUrl: "./standby.component.html", - styleUrls: ["./standby.component.scss"], + selector: 'app-standby', + templateUrl: './standby.component.html', + styleUrls: ['./standby.component.scss'], }) export class StandbyComponent implements OnInit { public connecting = false; - public error = ""; + public error = ''; private connectionRetries = 3; private displaySleepTimeout: number; @@ -25,7 +25,7 @@ export class StandbyComponent implements OnInit { private router: Router, private service: AppService, private notificationService: NotificationService, - private psuControlService: PsuControlService + private psuControlService: PsuControlService, ) {} public ngOnInit(): void { @@ -47,21 +47,21 @@ export class StandbyComponent implements OnInit { private connectToPrinter(): void { this.http - .post(this.configService.getURL("connection"), connectPayload, this.configService.getHTTPHeaders()) + .post(this.configService.getURL('connection'), connectPayload, this.configService.getHTTPHeaders()) .subscribe( (): void => { setTimeout(this.checkConnection.bind(this), 5000); }, (): void => { this.setConnectionError(); - } + }, ); } private checkConnection(): void { - this.http.get(this.configService.getURL("connection"), this.configService.getHTTPHeaders()).subscribe( + this.http.get(this.configService.getURL('connection'), this.configService.getHTTPHeaders()).subscribe( (data: OctoprintConnectionAPI): void => { - if (data.current.state === "Closed") { + if (data.current.state === 'Closed') { if (this.connectionRetries <= 0) { this.connectionRetries = 3; this.setConnectionError(); @@ -69,7 +69,7 @@ export class StandbyComponent implements OnInit { this.connectionRetries--; setTimeout(this.connectToPrinter.bind(this), 500); } - } else if (data.current.state.includes("Error")) { + } else if (data.current.state.includes('Error')) { if (this.connectionRetries <= 1) { this.connectionRetries = 3; this.setConnectionError(); @@ -77,7 +77,7 @@ export class StandbyComponent implements OnInit { this.connectionRetries--; setTimeout(this.connectToPrinter.bind(this), 500); } - } else if (data.current.state === "Connecting") { + } else if (data.current.state === 'Connecting') { if (this.connectionRetries < 0) { this.connectionRetries = 3; this.setConnectionError(); @@ -93,7 +93,7 @@ export class StandbyComponent implements OnInit { this.connecting = false; this.error = "There is something really wrong, OctoDash can't get a response from OctoPrint. Please check your setup!"; - } + }, ); } @@ -113,13 +113,13 @@ export class StandbyComponent implements OnInit { setTimeout((): void => { this.connecting = false; this.notificationService.enableNotifications(); - this.router.navigate(["/main-screen"]); + this.router.navigate(['/main-screen']); }, 1000); } } const connectPayload: ConnectCommand = { - command: "connect", + command: 'connect', save: false, }; diff --git a/src/app/update/update.component.ts b/src/app/update/update.component.ts index 50bf316f11..92b43263f1 100644 --- a/src/app/update/update.component.ts +++ b/src/app/update/update.component.ts @@ -1,13 +1,13 @@ -import { ChangeDetectorRef, Component, EventEmitter, OnInit, Output } from "@angular/core"; +import { ChangeDetectorRef, Component, EventEmitter, OnInit, Output } from '@angular/core'; -import { AppService } from "../app.service"; -import { NotificationService } from "../notification/notification.service"; -import { OctoprintService } from "../octoprint.service"; +import { AppService } from '../app.service'; +import { NotificationService } from '../notification/notification.service'; +import { OctoprintService } from '../octoprint.service'; @Component({ - selector: "app-update", - templateUrl: "./update.component.html", - styleUrls: ["./update.component.scss"], + selector: 'app-update', + templateUrl: './update.component.html', + styleUrls: ['./update.component.scss'], }) export class UpdateComponent implements OnInit { @Output() closeFunction = new EventEmitter(true); @@ -18,12 +18,12 @@ export class UpdateComponent implements OnInit { public updateProgress: UpdateDownloadProgress = { percentage: 0, transferred: 0, - total: "--.-", + total: '--.-', remaining: 0, - eta: "--:--", - runtime: "--:--", + eta: '--:--', + runtime: '--:--', delta: 0, - speed: "--.-", + speed: '--.-', }; public page = 1; @@ -31,14 +31,14 @@ export class UpdateComponent implements OnInit { public service: AppService, private notificationService: NotificationService, private octoprintService: OctoprintService, - private changeDetector: ChangeDetectorRef + private changeDetector: ChangeDetectorRef, ) { try { - this.ipc = window.require("electron").ipcRenderer; + this.ipc = window.require('electron').ipcRenderer; } catch (e) { this.notificationService.setError( "Can't connect to backend", - "Please restart your system. If the issue persists open an issue on GitHub." + 'Please restart your system. If the issue persists open an issue on GitHub.', ); } } @@ -47,7 +47,7 @@ export class UpdateComponent implements OnInit { if (!this.service.latestVersion || !this.service.getLatestVersionAssetsURL()) { this.notificationService.setWarning( "Can't initiate update!", - "Some information is missing, please try again in an hour or update manually." + 'Some information is missing, please try again in an hour or update manually.', ); this.closeUpdateWindow(); } else { @@ -57,48 +57,48 @@ export class UpdateComponent implements OnInit { } private setupListeners(): void { - this.ipc.on("updateError", (_, updateError: UpdateError): void => { + this.ipc.on('updateError', (_, updateError: UpdateError): void => { this.notificationService.setError("Can't install update!", updateError.error.message); this.closeUpdateWindow(); }); - this.ipc.on("updateDownloadProgress", (_, updateDownloadProgress: UpdateDownloadProgress): void => { + this.ipc.on('updateDownloadProgress', (_, updateDownloadProgress: UpdateDownloadProgress): void => { this.updateProgress = updateDownloadProgress; this.changeDetector.detectChanges(); }); - this.ipc.on("updateDownloadFinished", (): void => { + this.ipc.on('updateDownloadFinished', (): void => { this.page = 2; this.changeDetector.detectChanges(); setTimeout(() => { - const updateProgressBar = document.getElementById("installUpdateProgress"); - updateProgressBar.style.marginLeft = "40vw"; + const updateProgressBar = document.getElementById('installUpdateProgress'); + updateProgressBar.style.marginLeft = '40vw'; this.installationAnimationInterval = setInterval(() => { - updateProgressBar.style.marginLeft = updateProgressBar.style.marginLeft === "0vw" ? "40vw" : "0vw"; + updateProgressBar.style.marginLeft = updateProgressBar.style.marginLeft === '0vw' ? '40vw' : '0vw'; }, 2050); }, 250); }); - this.ipc.on("updateInstalled", (): void => { + this.ipc.on('updateInstalled', (): void => { this.page = 3; this.changeDetector.detectChanges(); }); } - private closeUpdateWindow(): void { + public closeUpdateWindow(): void { this.page = 1; clearInterval(this.installationAnimationInterval); this.closeFunction.emit(); } private update(assetsURL: string): void { - this.ipc.send("update", { + this.ipc.send('update', { assetsURL: assetsURL, }); } public reboot(): void { - this.octoprintService.sendSystemCommand("reboot"); + this.octoprintService.sendSystemCommand('reboot'); } } diff --git a/src/app/url.pipe.ts b/src/app/url.pipe.ts index d607e58fdf..166f47036a 100644 --- a/src/app/url.pipe.ts +++ b/src/app/url.pipe.ts @@ -1,7 +1,7 @@ -import { Pipe, PipeTransform } from "@angular/core"; -import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser"; +import { Pipe, PipeTransform } from '@angular/core'; +import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; -@Pipe({ name: "url" }) +@Pipe({ name: 'url' }) export class URLSafePipe implements PipeTransform { public constructor(private sanitizer: DomSanitizer) {} diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 73269f2d3e..6599b060ad 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,4 +1,4 @@ export const environment = { production: true, - config: "assets/config.json", + config: 'assets/config.json', }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 5039a307f0..825adee705 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -4,7 +4,7 @@ export const environment = { production: false, - config: "assets/config.testing.json", + config: 'assets/config.testing.json', }; /* diff --git a/src/main.ts b/src/main.ts index aded854ae1..dac80b021a 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,8 +1,8 @@ -import { enableProdMode } from "@angular/core"; -import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from "./app/app.module"; -import { environment } from "./environments/environment"; +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); diff --git a/src/polyfills.ts b/src/polyfills.ts index 2b7fe10e38..2f258e56c6 100644 --- a/src/polyfills.ts +++ b/src/polyfills.ts @@ -55,7 +55,7 @@ /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ -import "zone.js/dist/zone"; // Included with Angular CLI. +import 'zone.js/dist/zone'; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS