Using variables from Struts2 with ReactJS - ajax

So here`s the deal. At my workplace, we are trying to introduce ReactJS components in our web app (JSP/Struts2 etc).
So far I've built a component that is supposed to display a tree based on an object, here's a sample:
export default {
name: 'Global',
nodeid: 99,
toggled: true,
children: [
{
name: 'Mid Node',
nodeid: 0,
chosen: false,
pushed: false,
toggled: false,
children: [
{ name: 'Lower Node',
nodeid: 1,
chosen: false,
pushed: false,
toggled: false,
children: [{
name : "Low Child 1",
pushed: false,
toggled: false,
chosen:false
}]
}
]
}
]
};
What I want to do is receive this from a struts action response, rather than having it hard coded to a file which is what I did in my example.
import React from 'react';
import TreeComponent from 'proj-1/TreeComponent';
import HierarchyJson from './internal/Data';
export default function ExampleTreeComponent() {
return <TreeComponent hierarchyJson={HierarchyJson} functionMode={2} htmlId="tree1"/>
}
I've seen a ton of posts where spring is used, but I don't know what are my options in this case. I don't want to have to write an AJAX call to get the data after my JSP page has already rendered.

Related

Highstock dataGrouping not working with live data

I am currently working on a project for my company, where I need to plot highstock charts, which show energy-data of our main buildings.
Since it is live data, new datapoints come per Websocket every few-or-so seconds. However, the graph should only show one datapoint every hour. I wanted to clear this with the highstock dataGrouping, but it does not really work. It groups the points yes, but it still shows the „transmission“, the graph-line, between them. Thus making the whole graph completely irreadable.
In an other Version of the project, the graph only shows the latest datapoint of each group (as specified in the „approximate“ object in the chart options), but also does not start a new group after the chosen Interval runs through.
I've been sitting on this problem for about 3 days now and have not found any proper completely working solution yet.
Unfortunately, due company policy and due to hooks and components necessary, which are only used here in the company, I'm not able to give you a jsfilddle or similar, even though I'd really love to. What I can do is give you the config, mabye you find something wrong there?
const options = {
plotOptions: {
series: {
dataGrouping: {
anchor: 'end',
approximation: function (groupData: unknown[]) {
return groupData[groupData.length - 1];
},
enabled: true,
forced: true,
units: [['second', [15]]],
},
marker: {
enabled: false,
radius: 2.5,
},
pointInterval: minutesToMilliseconds(30),
pointStart: currentWeekTraversed?.[0]?.[0],
},
},
}
This would be the plotOptions.
If you need any more information, let me know. I'll see then, what and how I can send it to you.
Thank you for helping. ^^
This is example how dataGrouping works with live data,
try to recreate your case in addition or use another demo from official Highcharts React wrapper page.
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 15,
text: '15S',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['second', [15]]
]
}
}, {
type: 'hour',
count: 1,
text: '1M',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['minute', [1]]
]
}
}
},
Demo: https://jsfiddle.net/BlackLabel/sr3oLkvu/

Angular 8 multiple targets in proxy.conf.json with context set

so my current configuration is as follows:
I'm using a context array in order to group multiple paths to the same target
const TARGET_URL1 = 'https://target-url-1.xyz';
const PROXY_CONFIG = [
{
context: [
'/api/link1',
'/api/link2',
],
target: TARGET_URL1,
secure: false,
changeOrigin: true,
ws: true,
},
];
But right now, I need a new target for a new context path and I can't find any example on how to implement while keeping the context.
The correct way of implementation is to duplicate the whole object and change your context and targets:
const TARGET_URL1 = 'https://target-url-1.xyz';
const TARGET_URL2 = 'https://target-url-2.xyz';
const PROXY_CONFIG = [
{
context: [
'/api/link1',
'/api/link2',
],
target: TARGET_URL1,
secure: false,
changeOrigin: true,
ws: true,
},
{
context: [
'/api/new-different-link',
],
target: TARGET_URL2,
secure: false,
changeOrigin: true,
},
];

CKEditor Custom ACF disabling all plugins

I am trying to set an explicit list of allowed contents in my ck editor, but it seems that I'm not being inclusive enough in my list because almost all my plugins are disabled. If I set the ACF back to auto (delete allowedContent) then all the plugins come back. Here is my allowedConent in the config.js
config.allowedContent =
{
h1: true,
h2: true,
h3: true,
'span, p, ul, ol, li,': {
styles: 'color, margin-left, margin-right, font-size'
},
'a[!href,target,name]': true,
b: true,
u: true,
i: true,
}
Yet the only buttons that seem to be enabled are bold, underline, and italics. I'm trying to figure out why my other plugins aren't working. For instance, the link plugin has the following:
var allowed = 'a[!href]',
required = 'a[href]';
// Add the link and unlink buttons.
editor.addCommand( 'link', new CKEDITOR.dialogCommand( 'link', {
allowedContent: allowed,
requiredContent: required
} ) );
editor.addCommand( 'anchor', new CKEDITOR.dialogCommand( 'anchor', {
allowedContent: 'a[!name,id]',
requiredContent: 'a[name]'
} ) );
As you can see, I have anchor with the necessary properties defined (anchor with an href and name), yet the button doesn't show up! I have verified my syntax is correct by printing out CKEDITOR.instances["editor-1"].filter.allowedContent and it shows the object I'm expecting. I have also tried adding a bunch of common elements like to see if adding one of them brings the plugins back, but it does not. So what am I missing?
Well it seems that I was mixing my object syntax and my string syntax. Once I corrected this, the anchor and font-size buttons started appearing. The following is what I have so far:
config.allowedContent =
{
h1: true,
h2: true,
h3: true,
a: {
attributes: ['!href','target','name']
},
b: true,
u: true,
i: true,
// font-size
span: {
styles: { 'font-size': '#(size)' },
overrides: [ { element :'font', attributes: { 'size': null } } ]
}
}
I still need to figure out the proper definition for font-color and a few others, but that's just a matter of inspecting the plugins' code and seeing what they expect.

`itemLimit` count is off after deleting images with scaled versions

I am using the following and having an issue you delete an image that was uploaded.
The itemLimit is set to 6 since there are "3" image per uploaded item.
hideScaled: true
so it is only showing the one thumbnail with a single delete button.
How can I get the system to delete the three images form the internal object.
This happens if up upload images and delete a couple of times.
Thanks
$("#fine-uploader").fineUploader({
session: {
endpoint: 'imageStatus.cfm',
params : {transaction_id : 11205}
},
debug: true,
request: {
endpoint: 'upload.cfm',
params : {details : "2_250/786_05072014|4483|786|11205|2"}
},
validation: {
itemLimit: 6,
allowedExtensions: ["jpeg", "jpg", "gif" , "png"],
sizeLimit: 8000000 // 8 MiB
},
messages : {
tooManyItemsError : "Sorry but you are only able to upload 2 images"
},
deleteFile: {
enabled: true, // defaults to false
endpoint: 'upload_delete.cfm',
method: 'post',
params : {wallid : "786"}
},
retry: {
enableAuto: false
},
scaling: {
sendOriginal: true,
hideScaled: true,
sizes: [
{name: "THUMB_XX", maxSize: 113},
{name: "FULLIMAGE", maxSize: 450}
]
}
})
You can use the onDelete callback to manually delete the scaled images. When you hide the scaled images, the Id of the original image will be the highest id. So for instance, if you upload a single file, the original file will have an id=2, and the scaled images will have an id=1 and id=0. If you upload a 2nd image, the original id would be 5, and the scaled images would be 3 and 4.
You just need to detect which id is being delete, and then use the callback to also delete the previous 2 id's.
The following example should do the trick:
$('#fine-uploader').fineUploader({
validation: {
allowedExtensions: ["gif", "jpeg", "jpg", "png", "bmp"],
acceptFiles: "image/gif, image/jpeg, image/png, image/bmp",
sizeLimit: 5000000,
itemLimit: 6
},
deleteFile: {
enabled: true,
endpoint: "/MyEndPoint/DeleteImage",
method: 'POST',
},
scaling: {
sendOriginal: true,
hideScaled: true,
sizes: [
{ name: "small", maxSize: 350 },
{ name: "large", maxSize: 800 },
]
},
callbacks: {
onDelete: function (id) {
if (id == 2)
{
$("#fine-uploader").fineUploader("deleteFile", 0);
$("#fine-uploader").fineUploader("deleteFile", 1);
}
else if (id = 5)
{
$("#fine-uploader").fineUploader("deleteFile", 3);
$("#fine-uploader").fineUploader("deleteFile", 4);
}
},
},
});
The documentation is serious when it says that the hideScaled option literally only hides the scaled file items in the UI. If you elect to hide these items AND you are using a strict itemLimit, you'll need to listen for delete status changes for the original files and trigger code that deletes the scaled items as well through the API.

Example with discreteMapper

I'd like to use the discreteMapper of CytoscapeWeb 2.0 (that is, the jQuery-based CytoscapeWeb) but need some example code showing what exactly I have to do.
I already tried with some code taken from the Flash-based CytoscapeWeb and tried
var entityColorMapper = {
attrName: "etype",
entries: [ { attrValue: "protein", value: "#ff0000" },
{ attrValue: "compound", value: "#00ff00" },
{ attrValue: "group", value: "#0000ff" }
]
};
and then in the "style" structure I have
"node.E": {
fillColor: {
discreteMapper: entityColorMapper
}
}
but this does not seem to work.
It's different in Cytoscape Web 2:
https://github.com/cytoscape/cytoscapeweb/wiki/StyleObject
// example discrete mapper
fillColor: {
defaultValue: "grey",
discreteMapper: {
attr: "type", // field in ele.data() to map to
mapped: {
"foo": "red", // field value : visual property value
"bar": "blue"
}
}
}
You don't really need to use a discrete mapper, since you could be using selectors in your style:
"node[type='foo']": { fillColor: "red", borderColor: "pink" },
"node[type='bar']": { fillColor: "blue" }
It's better to use the second approach, since you can separate the style for [type='blah'] for several visual properties at once (e.g. borderColor), much like CSS.
Remember: Make sure to always work with the latest prerelease version while Cytoscape Web 2 until the first official release is made.
https://github.com/cytoscape/cytoscapeweb/downloads

Resources