Related
I am making a help command, but I want to disable it when the embed title is the same as the button label. Except this error pops out:
C:\Users\admin\OneDrive\Documents\VSCode\JS\Discord
Bots\Testing3.JS\node_modules\discord.js\src\rest\RequestHandler.js:350
throw new DiscordAPIError(data, res.status, request);
^
DiscordAPIError: Invalid Form Body components[0]: The specified
component type is invalid in this context components[1]: The specified
component type is invalid in this context
at RequestHandler.execute (C:\Users\admin\OneDrive\Documents\VSCode\JS\Discord
Bots\Testing3.JS\node_modules\discord.js\src\rest\RequestHandler.js:350:13)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async RequestHandler.push (C:\Users\admin\OneDrive\Documents\VSCode\JS\Discord
Bots\Testing3.JS\node_modules\discord.js\src\rest\RequestHandler.js:51:14)
at async MessageManager.edit (C:\Users\admin\OneDrive\Documents\VSCode\JS\Discord
Bots\Testing3.JS\node_modules\discord.js\src\managers\MessageManager.js:132:15)
{ method: 'patch', path:
'/channels/956427421073158194/messages/965228940685897748', code:
50035, httpStatus: 400, requestData: {
json: {
content: undefined,
tts: false,
nonce: undefined,
embeds: [
{
title: 'Economy',
type: 'rich',
description: null,
url: null,
timestamp: null,
color: null,
fields: [ [Object], [Object], [Object], [Object] ],
thumbnail: null,
image: null,
author: null,
footer: null
}
],
components: [
{
custom_id: 'econ',
disabled: true,
emoji: { animated: false, name: '💵', id: null },
label: 'Economy',
style: 1,
type: 2,
url: null
},
{
custom_id: 'info',
disabled: false,
emoji: { animated: false, name: '📃', id: null },
label: 'Info',
style: 2,
type: 2,
url: null
}
],
username: undefined,
avatar_url: undefined,
allowed_mentions: undefined,
flags: 0,
message_reference: undefined,
attachments: undefined,
sticker_ids: undefined
},
files: [] } }
Code:
if (cmd === "help") {
const econ = new Discord.MessageButton()
.setCustomId('econ')
.setEmoji('💵')
.setLabel('Economy')
.setStyle('PRIMARY')
const info = new Discord.MessageButton()
.setCustomId('info')
.setEmoji('📃')
.setLabel('Info')
.setStyle('SECONDARY')
const row = new Discord.MessageActionRow().addComponents([econ, info]);
let helpMsg = await message.channel.send({
embeds: [
{
title: "Economy",
fields: [
{
name: `\`${cPrefix}bal | balance [user]\``,
value: 'Displays your balance or a user\'s balance.'
},
{
name: `\`${cPrefix}dep | deposit <amount>\``,
value: 'Deposits a specified amount of cash to your bank.'
},
{
name: `\`${cPrefix}with | withdraw <amount>\``,
value: 'Withdraws a specified amount of cash to your wallet.'
},
{
name: `\`${cPrefix}addcoins <user> <amount>\``,
value: 'Adds a specified amount of cash to a user. (Administrator)'
}
]
}
],
components: [row]
});
const collector = helpMsg.createMessageComponentCollector({
componentType: 'BUTTON',
time: 60000
});
collector.on('collect', async (b) => {
if (b.user.id === message.author.id) {
if (b.customId === 'econ') {
helpMsg.edit({
embeds: [
{
title: "Economy",
fields: [
{
name: `\`${cPrefix}bal | balance [user]\``,
value: 'Displays your balance or a user\'s balance.'
},
{
name: `\`${cPrefix}dep | deposit <amount>\``,
value: 'Deposits a specified amount of cash to your bank.'
},
{
name: `\`${cPrefix}with | withdraw <amount>\``,
value: 'Withdraws a specified amount of cash to your wallet.'
},
{
name: `\`${cPrefix}addcoins <user> <amount>\``,
value: 'Adds a specified amount of cash to a user. (Administrator)'
}
]
},
],
components: [row.components[0].setDisabled(true), row.components[1].setDisabled(false)]
});
}
if (b.customId === 'info') {
helpMsg.edit({
embeds: [
{
title: "Info",
fields: [
{
name: `${cPrefix}info <user|server> <user: user>`,
value: 'Displays an info of the server or a user'
},
{
name: `${cPrefix}ping`,
value: 'Displays the current client ping and the database connection'
},
{
name: `${cPrefix}help`,
value: 'Umm... You used this command'
},
]
}
],
components: [row.components[0].setDisabled(false), row.components[1].setDisabled(true)]
})
}
} else {
b.reply({ content: 'These buttons are not for you.', ephemeral: true })
}
});
collector.on('end', async () => {
helpMsg.edit({ components: [row.components[0].setDisabled(true), row.components[1].setDisabled(true)] })
});
}
Is there anything wrong in this code?
You can create a new MessageActionRow and set everything to disabled. This code is from my bot's help command (discord.js v13.6.0):
let btnraw = new Discord.MessageActionRow().addComponents(
[
new Discord.MessageButton().setCustomId("home").setStyle("SUCCESS").setLabel("Home"),
new Discord.MessageButton().setCustomId("general").setStyle("PRIMARY").setLabel("General"),
new Discord.MessageButton().setCustomId("info").setStyle("PRIMARY").setLabel("Information"),
new Discord.MessageButton().setCustomId("mod").setStyle("PRIMARY").setLabel("Moderation"),
new Discord.MessageButton().setCustomId("fun").setStyle("PRIMARY").setLabel("Fun"),
]
);
let dbtnraw = new Discord.MessageActionRow().addComponents(
[
new Discord.MessageButton().setCustomId("d_home").setStyle("SUCCESS").setLabel("Home").setDisabled(true),
new Discord.MessageButton().setCustomId("d_general").setStyle("PRIMARY").setLabel("General").setDisabled(true),
new Discord.MessageButton().setCustomId("d_info").setStyle("PRIMARY").setLabel("Information").setDisabled(true),
new Discord.MessageButton().setCustomId("d_mod").setStyle("PRIMARY").setLabel("Moderation").setDisabled(true),
new Discord.MessageButton().setCustomId("d_fun").setStyle("PRIMARY").setLabel("Fun").setDisabled(true),
]
);
Then you can edit the message to replace the original row like this:
helpMsg.edit({components: [d_btnraw]});
I would like to implement in React Js an application which can read file from a directory. Basically, given the root dir what we want is to run trough all the sub dirs and build a tree structure, maybe in JSON format but any suggestion is apprechiated.
I tried using node.js filesystem readdir function but how to build a tree of subfolders?
Below is the JSON I would like to build automatically after reading from the root folder.
Thanks to anyone who will answer me.
[
{
value: '/app',
label: 'app',
children: [
{
value: '/app/Http',
label: 'Http',
children: [
{
value: '/app/Http/Controllers',
label: 'Controllers',
children: [{
value: '/app/Http/Controllers/WelcomeController.js',
label: 'WelcomeController.js',
}],
},
{
value: '/app/Http/routes.js',
label: 'routes.js',
},
],
},
{
value: '/app/Providers',
label: 'Providers',
children: [{
value: '/app/Providers/EventServiceProvider.js',
label: 'EventServiceProvider.js',
}],
},
],
},
{
value: '/config',
label: 'config',
children: [
{
value: '/config/app.js',
label: 'app.js',
},
{
value: '/config/database.js',
label: 'database.js',
},
],
},
{
value: '/public',
label: 'public',
children: [
{
value: '/public/assets/',
label: 'assets',
children: [{
value: '/public/assets/style.css',
label: 'style.css',
}],
},
{
value: '/public/index.html',
label: 'index.html',
},
],
},
{
value: '/.env',
label: '.env',
},
{
value: '/.gitignore',
label: '.gitignore',
},
{
value: '/README.md',
label: 'README.md',
},
];
I am trying to change a hardcoded array within another JSX file.
the first file routes.js. I tried loading the array then changing it . it just changes the loaded data not the array directly from the other file. How do i write to the other JSX array from the main component.
const routes = [
{
type: "collapse",
name: "Our Mission",
key: "dashboards",
icon: <Shop size="12px" />,
collapse: [
{
name: "Ways We can Help",
key: "default",
route: "/dashboards/default",
component: Default,
},
{
name: "How It Works",
key: "automotive",
route: "/dashboards/automotive",
component: Automotive,
},
{
name: "Who We Are",
key: "smart-home",
route: "/dashboards/smart-home",
component: SmartHome,
},
],
},
{ type: "title", title: " ", key: "space1" },
{
type: "collapse",
name: "Services",
key: "services",
icon: <Shop size="12px" />,
href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
component: Default,
noCollapse: true,
},
{
type: "collapse",
name: "Products",
key: "products",
icon: <Shop size="12px" />,
href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
component: Default,
noCollapse: true,
},
];
export default routes;
code used in main jsx file. I want to be able to write to the remote array changing its values.
const handleSubmit = (event) => {
event.preventDefault();
// I want to push or filter with the code below
{
routes.length = 0;
routes.map((route) => console.log({ route }));
}
};
You can't change the array itself because it's a const. You could change it to a let and then export it like this:
EDIT
export let routes = [
{
type: "collapse",
name: "Our Mission",
key: "dashboards",
icon: <Shop size="12px" />,
collapse: [
{
name: "Ways We can Help",
key: "default",
route: "/dashboards/default",
component: Default,
},
{
name: "How It Works",
key: "automotive",
route: "/dashboards/automotive",
component: Automotive,
},
{
name: "Who We Are",
key: "smart-home",
route: "/dashboards/smart-home",
component: SmartHome,
},
],
},
{ type: "title", title: " ", key: "space1" },
{
type: "collapse",
name: "Services",
key: "services",
icon: <Shop size="12px" />,
href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
component: Default,
noCollapse: true,
},
{
type: "collapse",
name: "Products",
key: "products",
icon: <Shop size="12px" />,
href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
component: Default,
noCollapse: true,
},
];
Then to use it in another jsx component you can import it like this.
import {routes} from '../yourPathToIt/main'
in normal highchart i get svg code with code like this
var chart = $('#container').highcharts()
svg = chart.getSVG();
So, how can i get svg code with this highchart directive in angular js???
i try like normal code but i didn't get svg code.
i use this directive for my highchart
https://github.com/rootux/angular-highcharts-directive
and this my code in controller.js
$scope.chartLogisticGIGR = {
options: {
tooltip: {
shared: true
}
},
xAxis: { // Primary xAxis
categories: $scope.nameMonths,
title: {
text: 'Month'
},
labels: {
enabled: true
},
min:0
},
yAxis: [{ // Primary yAxis
title: {
text: 'GI / GR in IDR'
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value / 1000000,'0') + ' mil';
}
}
}, { // Secondary yAxis
title: {
text: 'Balance'
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value / 1000000,'0') + ' mil';
}
},
}],
series: [{
name: 'AGP - Goods Receipt',
type: 'column',
stacking: 'normal',
stack: '1',
data: $scope.dataLogisticGIGR_AGP_GR,
color: $rootScope.getColor('AGP Ext'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AGP - Goods Issue',
type: 'column',
stacking: 'normal',
stack: '1',
data: $scope.dataLogisticGIGR_AGP_GI,
color: $rootScope.getColor('AGP Int'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AGP - Balance',
type: 'spline',
data: $scope.dataLogisticGIGR_AGP_Balance,
color: $rootScope.getColor('AI 2'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AI - Goods Receipt',
type: 'column',
stacking: 'normal',
stack: '3',
data: $scope.dataLogisticGIGR_AI_GR,
color: $rootScope.getColor('AI'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AI - Goods Issue',
type: 'column',
stacking: 'normal',
stack: '3',
data: $scope.dataLogisticGIGR_AI_GI,
color: $rootScope.getColor('AP 2'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AI - Balance',
type: 'spline',
data: $scope.dataLogisticGIGR_AI_Balance,
color: $rootScope.getColor('AP'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
}],
title: {
text: ''
},
loading: false
};
in this is my code in directive highchart
'use strict';
angular.module('chartsExample.directives',[])
.directive('chart', function () {
return {
restrict: 'E',
template: '<div></div>',
scope: {
chartData: "=value"
},
transclude:true,
replace: true,
link: function (scope, element, attrs) {
var chartsDefaults = {
chart: {
renderTo: element[0],
type: attrs.type || null,
height: attrs.height || null,
width: attrs.width || null
}
};
//Update when charts data changes
scope.$watch(function() { return scope.chartData; }, function(value) {
if(!value) return;
// We need deep copy in order to NOT override original chart object.
// This allows us to override chart data member and still the keep
// our original renderTo will be the same
var newSettings = {};
angular.extend(newSettings, chartsDefaults, scope.chartData);
var chart = new Highcharts.Chart(newSettings);
});
}
};
});
Thank's....
I'm trying to build my container in the initialize() function by creating all my components then calling this.setItems([...]). For some reason, my components are being placed on top of each other, rather than after each other in the vbox.
I am able to grab the top component and move it down, as is shown in the attached image.
Simplified view with two components:
Ext.define("Sencha.view.DynamicView", {
extend: 'Ext.Container',
xtype: 'dynamic-view',
requires: [],
config: {
layout: {
type: 'vbox'
},
flex: 1,
cls: 'view-container',
store: null
},
createRadioSet: function() {
this.radioFieldSet = Ext.create('Ext.form.FormPanel', {
flex: 1,
items: [{
xtype: 'fieldset',
title: 'About You',
defaults: {
xtype: 'radiofield',
labelWidth: '40%'
},
instructions: 'Favorite color?',
items: [{
name: 'color',
value: 'red',
label: 'Red'
},
{
name: 'color',
value: 'green',
label: 'Green'
}
]
}]
});
return this.radioFieldSet;
},
createCheckboxSet: function() {
this.checkboxFieldSet = Ext.create('Ext.form.FormPanel', {
flex: 1,
items: [{
xtype: 'fieldset',
title: 'Check all that apply',
defaults: {
xtype: 'checkboxfield',
labelWidth: '40%'
},
instructions: 'Tell us all about yourself',
items: [{
name: 'firstName',
value: 'First',
label: 'First Name'
},
{
name: 'lastName',
value: 'Last',
label: 'Last Name'
}
]
}]
});
return this.checkboxFieldSet;
},
initialize: function() {
this.callParent(arguments); // #TDeBailleul - fixed
var r1 = this.createRadioSet();
var cbSet1 = this.createCheckboxSet();
// this.add(cbSet1);
// this.add(r1);
this.setItems([r1, cbSet1]);
}
});
My problem was that I was adding my components incorrectly in a tab controller. I'm including an example that creates buttons on one tab and the checkboxes on another tab.
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name : ('SF' || 'SenchaFiddle'),
createRadioSet: function () {
this.radioFieldSet = Ext.create('Ext.form.FormPanel', {
height: '300px',
width: '300px',
items: [
{
xtype: 'fieldset',
title: 'Title',
defaults: {
xtype: 'radiofield',
labelWidth: '40%'
},
instructions: 'Favorite color?',
items: [
{
name: 'color',
value: 'red',
label: 'Red'
},
{
name: 'color',
value: 'green',
label: 'Green'
}
]
}
]
});
return this.radioFieldSet;
},
createButton: function(i) {
return Ext.create('Ext.Button', {
text: 'hello' + i,
height: '50px',
width: '100px'
});
},
launch: function () {
var tabPanel = Ext.create('Ext.tab.Panel', {
layout: 'card',
padding: 2,
tabBarPosition: 'bottom',
items: [
{
id: 'tab1',
title: 'Home',
layout: 'hbox',
xtype: 'container',
iconCls: 'home'
},
{
id: 'tab2',
title: 'More',
layout: 'hbox',
xtype: 'container',
iconCls: 'star'
}
]
});
Ext.Viewport.add(tabPanel);
var a,b;
for (var i = 0; i < 3; i++) {
a = this.createButton(i);
b = this.createRadioSet();
// tabPanel.getAt(0).add(b); // Reference the proper component: Tab 1
Ext.getCmp('tab1').add(a);
Ext.getCmp('tab2').add(b);
}
}
});