Removed jQuery

This commit is contained in:
David Carley
2022-09-02 01:08:11 +00:00
parent c6a3732750
commit a5b2f39c5d
11 changed files with 95 additions and 104 deletions

View File

@@ -16,7 +16,6 @@ globals:
Vue: readonly Vue: readonly
THREE: readonly THREE: readonly
SvelteComponents: readonly SvelteComponents: readonly
$: readonly
Clusterize: readonly Clusterize: readonly
SockJS: readonly SockJS: readonly
rules: rules:
@@ -80,3 +79,5 @@ rules:
- error - error
template-curly-spacing: template-curly-spacing:
- error - error
require-await:
- error

View File

@@ -1,6 +1,7 @@
"use strict"; "use strict";
const api = require("./api"); const api = require("./api");
const utils = require("./utils");
const merge = require("lodash.merge"); const merge = require("lodash.merge");
const config_defaults = require("../resources/onefinity_defaults.json"); const config_defaults = require("../resources/onefinity_defaults.json");
@@ -34,10 +35,7 @@ module.exports = {
}, },
restore_config: function () { restore_config: function () {
// If we don't reset the form the browser may cache file if name is same utils.clickFileInput("restore-config");
// even if contents have changed
$(".restore-config")[0].reset();
$(".restore-config input").click();
}, },
restore: function (e) { restore: function (e) {
@@ -51,8 +49,9 @@ module.exports = {
let config; let config;
try { try {
config = JSON.parse(target.result); config = JSON.parse(target.result);
} catch (ex) { } catch (error) {
api.alert("Invalid config file"); console.error("Invalid config file:", error);
alert("Invalid config file");
return; return;
} }
@@ -64,7 +63,8 @@ module.exports = {
message: "Configuration restored" message: "Configuration restored"
}); });
} catch (error) { } catch (error) {
api.alert("Restore failed", error); console.error("Restore failed:", error);
alert("Restore failed");
} }
}; };
@@ -86,9 +86,9 @@ module.exports = {
title: "Success", title: "Success",
message: "Configuration restored" message: "Configuration restored"
}); });
} catch (err) { } catch (error) {
api.alert("Restore failed"); console.error("Restore failed:", error);
console.error("Restore failed", err); alert("Restore failed");
} }
}, },
@@ -101,10 +101,7 @@ module.exports = {
}, },
upload_firmware: function () { upload_firmware: function () {
// If we don't reset the form the browser may cache file if name is same utils.clickFileInput("upload-firmware");
// even if contents have changed
$(".upload-firmware")[0].reset();
$(".upload-firmware input").click();
}, },
upload: function (e) { upload: function (e) {

View File

@@ -1,17 +1,28 @@
"use strict"; "use strict";
async function callApi(method, url, body) { async function callApi(method, url, data) {
try { try {
const headers = {};
let body = undefined;
if (data) {
if (data instanceof FormData) {
body = data;
} else {
headers["Content-Type"] = "application/json; charset=utf-8";
body = JSON.stringify(data);
}
}
const response = await fetch(`/api/${url}`, { const response = await fetch(`/api/${url}`, {
method, method,
headers: { headers,
"Content-Type": "application/json" body,
}, cache: "no-cache",
body
}); });
if (response.ok) { if (response.ok) {
return response.json(); return await response.json();
} }
throw new Error(await response.text()); throw new Error(await response.text());

View File

@@ -225,7 +225,7 @@ module.exports = new Vue({
}, },
ready: function () { ready: function () {
$(window).on("hashchange", this.parse_hash); window.onhashchange = () => this.parse_hash();
this.connect(); this.connect();
SvelteComponents.registerControllerMethods({ SvelteComponents.registerControllerMethods({
@@ -268,37 +268,25 @@ module.exports = new Vue({
try { try {
await api.put("upgrade"); await api.put("upgrade");
this.firmwareUpgrading = true; this.firmwareUpgrading = true;
} catch (err) { } catch (error) {
api.alert("Error during upgrade."); console.error("Error during upgrade:", error);
console.error("Error during upgrade", err); alert("Error during upgrade");
} }
}, },
upload_confirmed: function () { upload_confirmed: async function () {
this.confirmUpload = false; this.confirmUpload = false;
const form = new FormData(); const form = new FormData();
form.append("firmware", this.firmware); form.append("firmware", this.firmware);
$.ajax({ try {
url: "/api/firmware/update", await api.put("firmware/update", form);
type: "PUT",
data: form,
cache: false,
contentType: false,
processData: false,
})
.success(
function () {
this.firmwareUpgrading = true; this.firmwareUpgrading = true;
}.bind(this) } catch (error) {
) console.error("Firmware update failed:", error);
.error( alert("Firmware update failed");
function (err) { }
api.alert("Firmware update failed");
console.error("Firmware update failed", err);
}.bind(this)
);
}, },
show_upgrade: function () { show_upgrade: function () {
@@ -418,7 +406,8 @@ module.exports = new Vue({
await api.put("config/save", this.config); await api.put("config/save", this.config);
this.modified = false; this.modified = false;
} catch (error) { } catch (error) {
api.alert("Save failed", error); console.error("Save failed:", error);
alert("Save failed");
} }
}, },
@@ -434,7 +423,7 @@ module.exports = new Vue({
// Acknowledge messages // Acknowledge messages
if (this.state.messages.length) { if (this.state.messages.length) {
const id = this.state.messages.slice(-1)[0].id; const id = this.state.messages.slice(-1)[0].id;
api.put("message/" + id + "/ack"); api.put(`message/${id}/ack`);
} }
}, },
}, },

View File

@@ -1,6 +1,7 @@
"use strict"; "use strict";
const api = require("./api"); const api = require("./api");
const utils = require("./utils");
const cookie = require("./cookie")("bbctrl-"); const cookie = require("./cookie")("bbctrl-");
module.exports = { module.exports = {
@@ -338,10 +339,7 @@ module.exports = {
}, },
open: function () { open: function () {
// If we don't reset the form the browser may cache file if name is same utils.clickFileInput("gcode-file-input");
// even if contents have changed
$(".gcode-file-input")[0].reset();
$(".gcode-file-input input").click();
}, },
upload: async function (e) { upload: async function (e) {

View File

@@ -17,8 +17,7 @@ module.exports = {
return { return {
empty: true, empty: true,
file: "", file: "",
line: -1, line: -1
scrolling: false
}; };
}, },
@@ -40,8 +39,8 @@ module.exports = {
ready: function () { ready: function () {
this.clusterize = new Clusterize({ this.clusterize = new Clusterize({
rows: [], rows: [],
scrollElem: $(this.$el).find(".clusterize-scroll")[0], scrollElem: this.$el.querySelector(".clusterize-scroll"),
contentElem: $(this.$el).find(".clusterize-content")[0], contentElem: this.$el.querySelector(".clusterize-content"),
no_data_text: "GCode view...", no_data_text: "GCode view...",
callbacks: {clusterChanged: this.highlight} callbacks: {clusterChanged: this.highlight}
}); });
@@ -66,7 +65,7 @@ module.exports = {
return; return;
} }
const response = await fetch(`/api/file/${file}?${Math.random()}`); const response = await fetch(`/api/file/${file}`, { cache: "no-cache" });
const text = await response.text(); const text = await response.text();
if (text.length > 20e6) { if (text.length > 20e6) {
@@ -101,14 +100,21 @@ module.exports = {
}, },
highlight: function () { highlight: function () {
let e = $(this.$el).find(".highlight"); const highlights = this.$el.querySelectorAll(".highlight");
if (e.length) { for (const highlight of highlights) {
e.removeClass("highlight"); highlight.className = (highlight.className || "")
.split(" ")
.filter(c => c !== "highlight")
.join(" ");
} }
e = $(this.$el).find(`.ln${this.line}`); const lines = this.$el.querySelectorAll(`.ln${this.line}`);
if (e.length) { for (const line of lines) {
e.addClass("highlight"); line.className = (line.className || "")
.split(" ")
.filter(c => c !== "highlight")
.concat(["highlight"])
.join(" ");
} }
}, },
@@ -133,26 +139,14 @@ module.exports = {
line = totalLines; line = totalLines;
} }
const e = $(this.$el).find(".clusterize-scroll"); const scroll = this.$el.querySelector(".clusterize-scroll");
const lineHeight = e[0].scrollHeight / totalLines; const lineHeight = scroll.scrollHeight / totalLines;
const linesPerPage = Math.floor(e[0].clientHeight / lineHeight); const linesPerPage = Math.floor(scroll.clientHeight / lineHeight);
const current = e[0].scrollTop / lineHeight;
const target = line - 1 - Math.floor(linesPerPage / 2); const target = line - 1 - Math.floor(linesPerPage / 2);
// Update scroll position // Update scroll position
if (!this.scrolling) { scroll.scrollTop = target * lineHeight;
if (target < current - 20 || current + 20 < target) {
e[0].scrollTop = target * lineHeight;
} else {
this.scrolling = true;
e.animate({scrollTop: target * lineHeight}, {
complete: function () {
this.scrolling = false;
}.bind(this)
});
}
}
Vue.nextTick(this.highlight); Vue.nextTick(this.highlight);
} }

View File

@@ -39,7 +39,7 @@ function uuid(length) {
return s; return s;
} }
$(function () { window.onload = function () {
if (typeof cookie_get("client-id") == "undefined") { if (typeof cookie_get("client-id") == "undefined") {
cookie_set("client-id", uuid(), 10000); cookie_set("client-id", uuid(), 10000);
} }
@@ -145,4 +145,4 @@ $(function () {
// Vue app // Vue app
require("./app"); require("./app");
}); };

View File

@@ -1,7 +1,7 @@
"use strict"; "use strict";
// Must match modbus.c // Must match modbus.c
const exports = { const constants = {
DISCONNECTED: 0, DISCONNECTED: 0,
OK: 1, OK: 1,
CRC: 2, CRC: 2,
@@ -9,15 +9,15 @@ const exports = {
TIMEDOUT: 4 TIMEDOUT: 4
}; };
exports.status_to_string = module.exports = {
function (status) { ...constants,
status_to_string: function (status) {
switch (status) { switch (status) {
case exports.OK: return "Ok"; case constants.OK: return "Ok";
case exports.CRC: return "CRC error"; case constants.CRC: return "CRC error";
case exports.INVALID: return "Invalid response"; case constants.INVALID: return "Invalid response";
case exports.TIMEDOUT: return "Timedout"; case constants.TIMEDOUT: return "Timedout";
default: return "Disconnected"; default: return "Disconnected";
} }
}; }
};
module.exports = exports;

View File

@@ -26,7 +26,7 @@ module.exports = {
computed: { computed: {
target: function () { target: function () {
return $(this.$el).find(".path-viewer-content")[0]; return this.$el.querySelector(".path-viewer-content");
}, },
webglAvailable: function() { webglAvailable: function() {
@@ -122,7 +122,7 @@ module.exports = {
} }
async function get(url) { async function get(url) {
const response = await fetch(`${url}?${Math.random()}`); const response = await fetch(`${url}`, { cache: "no-cache" });
const arrayBuffer = await response.arrayBuffer(); const arrayBuffer = await response.arrayBuffer();
return new Float32Array(arrayBuffer); return new Float32Array(arrayBuffer);
@@ -187,10 +187,12 @@ module.exports = {
}, },
get_dims: function () { get_dims: function () {
const t = $(this.target); const computedStyle = window.getComputedStyle(this.target);
const width = t.innerWidth();
const height = t.innerHeight(); return {
return {width: width, height: height}; width: parseInt(computedStyle.width),
height: parseInt(computedStyle.height)
};
}, },
update_view: function () { update_view: function () {

View File

@@ -173,7 +173,6 @@ html(lang="en")
#templates: include ../../build/templates.pug #templates: include ../../build/templates.pug
iframe#download-target(style="display:none") iframe#download-target(style="display:none")
script: include ../static/js/jquery-1.11.3.min.js
script: include ../static/js/vue.js script: include ../static/js/vue.js
script: include ../static/js/sockjs.min.js script: include ../static/js/sockjs.min.js
script: include ../static/js/clusterize.min.js script: include ../static/js/clusterize.min.js

View File

@@ -24,18 +24,18 @@ async function doFetch(method: HttpMethod, url: string, data: any, config: Reque
} }
} }
export async function GET(url: string, config: RequestInit = {}) { export function GET(url: string, config: RequestInit = {}) {
return doFetch("GET", url, undefined, config); return doFetch("GET", url, undefined, config);
} }
export async function PUT(url: string, data: any = undefined, config: RequestInit = {}) { export function PUT(url: string, data: any = undefined, config: RequestInit = {}) {
return doFetch("PUT", url, data, config); return doFetch("PUT", url, data, config);
} }
export async function POST(url: string, data: any = undefined, config: RequestInit = {}) { export function POST(url: string, data: any = undefined, config: RequestInit = {}) {
return doFetch("POST", url, data, config); return doFetch("POST", url, data, config);
} }
export async function DELETE(url: string, config = {}) { export function DELETE(url: string, config = {}) {
return doFetch("DELETE", url, undefined, config); return doFetch("DELETE", url, undefined, config);
} }