I am trying to use npm module for nodejs called systray, when I try to run the example given on the npm page it throws
TypeError: SysTray is not a constructor
systray seems to be a popular module for a crossplatform system tray but it lacks in examples, below is the sample code that I am trying to run
var SysTray = require("systray")
const systray = new SysTray({
menu: {
// you should using .png icon in macOS/Linux, but .ico format in windows
icon: "",
title: "My Systray",
tooltip: "Tips",
items: [{
title: "aa",
tooltip: "bb",
// checked is implement by plain text in linux
checked: true,
enabled: true
}, {
title: "aa2",
tooltip: "bb",
checked: false,
enabled: true
}, {
title: "Exit",
tooltip: "bb",
checked: false,
enabled: true
}]
},
debug: false,
copyDir: true, // copy go tray binary to outside directory, useful for packing tool like pkg.
})
systray.onClick(action => {
if (action.seq_id === 0) {
systray.sendAction({
type: 'update-item',
item: {
...action.item,
checked: !action.item.checked,
},
seq_id: action.seq_id,
})
} else if (action.seq_id === 1) {
// open the url
console.log('open the url', action)
} else if (action.seq_id === 2) {
systray.kill()
}
})
Require it in this way:
const SysTray = require('systray').default;
But probably it is better to use import constructions and babel (https://babeljs.io/docs/en/babel-preset-typescript)
Seems that the npm package you are trying to use is meant to be used with typescript.
Related
I am very new to programming and working on a web project.
I used node-xlsx make a button that export excel data.
But I got an error "Cannot read properties of undefined (reading 'utils')".
I think not many people are having the same problem.
It will be grateful if someone advice me solutions.
My template only contains a button.
<template>
<v-card class="custm">
<v-btn #click="excelDown">excel</v-btn>
</v-card>
</template>
My Data: See bottom
<script lang="ts">
import Vue from "vue";
import XLSX from 'xlsx';
public incomeLogData = new Array<IncomeLog>();
get IncomeLogList() {
return this.incomeLogData;
}
mounted() {
this.setData();
}
setData() {
// header
this.headers = [
{
text: this.$t("income.item06").toString(),
align: "center",
sortable: false,
value: "userID"
},
{
text: this.$t("income.item07").toString(),
align: "end",
sortable: false,
value: "nickname"
},
{
text: this.$t("income.item08").toString(),
align: "end",
sortable: false,
value: "money"
},
{
text: this.$t("income.item09").toString(),
align: "end",
sortable: false,
value: "exp"
}
];
// Dummy Data
this.incomeLogData = [
{
"userID":"ACEJTH1",
"nickname":"aceth1",
"money":2000,
"exp":8000,
},
{
"userID":"aceSK1",
"nickname":"acesk1",
"money":2000,
"exp":8000,
}
];
// get excel button
excelDown() {
const dataWS = XLSX.utils.json_to_sheet(this.incomeLogData);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, dataWS, 'nameData');
XLSX.writeFile(wb, 'example.xlsx');
}
}
</script>
And I attached my dev tool error.
[enter image description here][1]
[1]: https://i.stack.imgur.com/2rEL1.png
I had this trouble with the 0.18.5 version. Uninstall an rollback to version 0.17.3. Everything worked fine!
I am deploying my Next.js app on Azure and it will throw a 404 on page refresh if I navigate to the module pages e.g www.site.com/overview.
I have followed the guide for deploying on azure here - https://learn.microsoft.com/en-us/azure/static-web-apps/deploy-nextjs.
However it has some conflicting advice, it says to export it using next build && next export and to also dynamically map the routes to avoid the 404 error, however when I do that Next.js throws an error:
Error occurred prerendering page "/modules/emergency-closing". Read more: https://err.sh/next.js/prerender-error
Error:
Error: you provided query values for /modules/emergency-closing which is an auto-exported page. These can not be applied since the page can no longer be re-rendered on the server. To disable auto-export for this page add `getInitialProps`
What is the correct way to export the app and run it on Azure?
next.config.js
const modules = require('./data/modules')
module.exports = {
trailingSlash: true,
async exportPathMap() {
const paths = {
'/': { page: '/' },
}
//
Object.keys(modules).map((module) => {
paths[`/modules/${modules[module].slug}`] = {
page: '/modules/[moduleSlug]',
query: { moduleSlug: modules[module].slug },
}
})
return paths
},
}
modules.js
module.exports = {
overview: {
id: 6,
name: 'overview',
slug: 'overview',
},
'special-features': {
id: 1,
name: 'Special features',
slug: 'special-features',
},
diagnosis: {
id: 3,
name: 'Diagnosis',
slug: 'diagnosis',
},
'emergency-closing': {
id: 4,
name: 'Emergency closing',
slug: 'emergency-closing',
},
'side-window-settings': {
id: 5,
name: 'Side window settings',
slug: 'side-window-settings',
},
}
package.json
"build": "next build && next export",
Basically I want to be able to generate html like <code>{a: true}</code>
As far as I can tell, the button should do the same thing as the "underline" button for example, except it will wrap the text in <code> instead of <u>;
I have tried using this:
{
buttons:
'bold,strikethrough,underline,italic,eraser,|,superscript,subscript,|,ul,ol,align,|,outdent,indent,|,font,fontsize,brush,paragraph,|,image,video,table,link,|,undo,redo,\n,selectall,cut,copy,paste,copyformat,|,hr,symbol,source,fullsize,print,code',
language: lang,
placeholder,
toolbarAdaptive: false,
uploader: {
insertImageAsBase64URI: true,
},
controls: {
code: {
name: 'code',
iconURL: 'someurl.com',
tagRegExp: '_PxEgEr_/^(code)$/i',
tags: ['code'],
tooltip: 'Code',
},
},
}
The button shows up in the toolbar, but nothing happens when I click it. The documentation shows buttons that insert text, but I need a button that wraps text instead.
Ok I figured it after going through their code, it's not well documented, but this is how you do it:
{
buttons: 'blockquote,code',
controls: {
code: {
name: 'code',
iconURL: 'someiconurl.com',
tooltip: 'Insert Code Block',
exec: function (editor) {
editor.execCommand('formatBlock', false, 'code');
},
isActive: (editor, control) => {
const current = editor.s.current();
return Boolean(
current && Jodit.modules.Dom.closest(current, 'code', editor.editor)
);
},
},
blockquote: {
name: 'blockquote',
iconURL: 'someiconurl.com',
tooltip: 'Insert blockqoute',
exec: function (editor) {
editor.execCommand('formatBlock', false, 'blockquote');
},
isActive: (editor, control) => {
const current = editor.s.current();
return Boolean(
current && Jodit.modules.Dom.closest(current, 'blockquote', editor.editor)
);
},
},
},
}
I have an Angular Formly-based form in my Angular-SPA. In one of the fields the user can enter data with the help of a physical barcode-scanner. The scanner enters the numbers from the barcode followed by 'enter' (keycode: 13).
When the 'enter' is entered, the form should preform an action (not a form submit-action, but an internal search to make sure the entered number doesn't already exists in the system), then the user can proceed to fill out the form.
In vanilla javascript, its possible to do this by a simple onKeypress-event:
function checkInput(event) {
if (event.keyCode == 13) {
console.log("Preforming search");
}
}
<input type="text" onKeypress="checkInput(event)">
In Formly however, it's possible to add a property 'onKeypress', but it doesn't seem to pass the same event as vanilla javascript. This is some of my Angular Formly code:
templateOptions : {
placeholder: "ISBN",
onKeypress: function(model, options, _this, event) {
console.log(model);
console.log(options);
console.log(_this);
console.log(event);
}
}
When I run this code, the event-object is 'undefined', instead of being the same event as in vanilla javascript.
Is there any way to access the actual event in the onKeypress-property of Angular Formly-forms?
Cheers!
Update
Found a solution! I was trying to do this to a custom type, which is then inherited to the actual input-element.
Seems like Formly doesn't allow inheritance of the onKeypress-property. I moved the onKeypress-property to the actual element, and I was able to solve the problem.
It's a bit unfortunate that this can not be inherited, but have to be defined for each element instead.
My problem (simplified) :
formlyConfig.setType({
name: 'multiInput',
templateUrl: 'app/editor/multiInput.html',
defaultOptions: {
wrapper: ['bootstrapLabel', 'boostrapHasError'],
templateOptions: {
inputOptions: {
type: 'input',
wrapper: null
},
onKeypress: function(model, options, _this, event) {
// DO SEARCH (NOT WORKING)
}
}
}
}
// --------------------------- //
{
className: 'col-xs-10',
type: "multiInput",
key: "isbns",
templateOptions: {
label: 'ISBN',
inputOptions: {
templateOptions: {
required: true,
disabled: true,
placeholder: 'ISBN'
}
},
key: "isbn",
}
}
}
My solution:
formlyConfig.setType({
name: 'multiInput',
templateUrl: 'app/editor/multiInput.html',
defaultOptions: {
wrapper: ['bootstrapLabel', 'boostrapHasError'],
templateOptions: {
inputOptions: {
type: 'input',
wrapper: null
}
}
}
}
// --------------- //
{
className: 'col-xs-10',
type: "multiInput",
key: "isbns",
templateOptions: {
label: 'ISBN',
inputOptions: {
templateOptions: {
required: true,
disabled: true,
placeholder: 'ISBN',
onKeypress: function(model, options, _this, event) {
// DO SEARCH (WORKING!)
}
}
},
key: "isbn"
}
}
}
It's not the best solution, I want more inputs to have the onKeypress-event. But it looks like I might have to add them separately.
I have a grid with five columns - username, email, enabled, locked and remove.
Username, email, enabled and locked are sourced from the server. Remove is a client-side element used to indicate that a row should be removed.
I would like to either inject the default value of remove in the store on the client side as the grid content is loading, or set it as the user interacts with the CheckBox widget.
How can I catch the code which is requesting the objects from the server and add another column?
Or, is there a better way to do this.
var TrackableRest = declare([Rest, SimpleQuery, Trackable]);
var store = new TrackableRest({target: '/api/users', useRangeHeaders: true, idProperty: 'username'});
aspect.after(store, "fetch", function (deferred) {
return deferred.then(function (response) {
response.remove = false;
return json(response);
})
});
var grid = new (declare([OnDemandGrid, Selection, Editor]))({
collection: store,
className: "dgrid-autoheight",
columns: {
username: {
label: core.username
},
email: {
label: core.email
},
enabled: {
label: core.enabled,
editor: CheckBox,
editOn: "click",
sortable: false,
renderCell: libGrid.renderGridCheckbox
},
locked: {
label: core.locked,
editor: CheckBox,
editOn: "click",
sortable: false,
renderCell: libGrid.renderGridCheckbox
},
remove: {
editor: CheckBox,
editorArgs: {"checked": false},
editOn: "click",
label: core.remove,
sortable: false,
className: "remove-cb",
renderHeaderCell: function (node) {
var inp = domConstruct.create("input", {id: "cb-all", type: "checkbox"});
return inp;
},
renderCell: libGrid.renderGridCheckbox
}
},
selectionMode: "none"
}, 'grid');
In addition, I don't want to send the remove column to the server.
My final implementation was to code the remove column like so:
remove: {
editor: CheckBox,
label: core.remove,
sortable: false,
className: "remove-cb",
renderHeaderCell: function (node) {
var inp = domConstruct.create("input", {id: "cb-all", type: "checkbox"});
return inp;
}
}
The code to perform the removes is as follows:
var removeBtn = new Button({
label: core.remove
}, 'user-remove-btn');
removeBtn.startup();
removeBtn.on("click", function (event) {
var markedForDeletion = query(".dgrid-row .remove-cb input:checked", "user-grid");
if( markedForDeletion.length > 0 ) {
lib.confirmAction(core.areyousure, function () {
markedForDeletion.forEach(function (node) {
var row = grid.row(node);
store.remove(row.data.username);
});
});
}
});
Thus the remove column became a client-side only control that was handled by the grid and the event handler.