Redrawing endpoints using jsPlumb - angularjs

I have been stuck with this a few days and want your help to know how to tackle this problem.
I created this application something like a flowchart to draw different types of plumb items with different endpoints attached to them. After it is being created as an element the endpoints are added dynamically according to the type of plumb item. is it like the following.
This is how I create the plumb items.
var element = document.createElement("div");
element.setAttribute("id",schema_id);
element.setAttribute("class","item " +control.Type);
element.setAttribute("style","left:" +posX + "px ; top: "+posY+"px");
var output = document.getElementById('container');
output.appendChild(element);
And then I add the endpoints according to its type.
jsPlumb.addEndpoint(element,<the style goes here>,{ anchor:<the location of the endpoint goes here>, uuid: <a new ID is created for this>});
And this is what it looks like
Screen One
I managed to grabbed the data from the method "GetConnections" and get it saved in the DB as a JSON. This JSON includes all the IDs which are for plumb items and all the endpoints.
But when I try to retrieve it back again to the UI, it appears like this. Everything appears great except the endpoints.
Screen Two
On redraw, the endpoints are created in the same way mentioned above. To reconnect the endpoints I am using this code.
jsPlumb.connect({ source:<source id>, target:<target id>,anchors:<location of the endpoint>,<style>);
The problem :
For the above code, Although I give the UUID of the endpoint to the source and target, it doesn't identify it as endpoints to connect from and to.
Is there a way to find the ID and get them connected? What I found out was that only the plumb items could be searched with "getElementById" with the UUID but not the endpoints.
The problem is how to make these endpoints get connected as originally drawn. How can connect each endpoint back again? I have all the IDs and when they are redrawn they are having the same IDs as it had when it was saved. But I couldn't find a way to connect the endpoints back again separately since this has different types of endpoints specific to each plumb item.
Any suggestions?
Sorry for the long post
Thank you in advance!!

Please see the connect method
If you connect ids, or elements, or Endpoints use
jsPlumb.connect({source:<source id>, target:<target id>});
but if you connect array of UUIDs of the two Endpoints use
jsPlumb.connect({uuids:<array of uuids>});

Related

how to store likes data in flutter

I'm developing an app in which I need to show come "coupons" I get from the API. I also have a "liked coupons" page where I need to show the ones the user has liked. I'm facing 2 problems here:
1- I don't know how to store likes, should I implement a local database for everything or should I ask our back-end team to save the liked/not liked state on the server?
2- I have a model class for coupons, and I have a coupon_list widget which is a horizontal listview.builder(). the problem is that some coupons are being showed in 2 or 3 different lists and I need them to all turn to liked when user likes an instance from a single list. how can I do that? (I want to do something like working with pointers in c++, passing the ACTUAL variable instead of it's value so it changes globally)
I would like to suggest you to store it in server as well. (Ask to your back-end team to add parameter) So that if user logout or sign in from different device "liked coupons" data will be available in all cases.
And for 2) multiple coupon entry you have to manage it via unique id. Like every coupon has its unique series no / pattern num. So you can put condition on that. i.e. Add "unique_no" to liked_list from all available list of coupon
Solution
Use Shared Preferences! This is something like a database on the device you are currently running. So if the user makes a like you can save that on their device!
To add Shared Preferences to your app look this video
Hope it helps!

Use query string in URL or use multiple URL?

If I want to display many posts in my web application but every post have its own type and I want to display each type in single page so, What's the best method to do that? Is put all all posts in one url and use query string to filter the posts upon the type and display it in the page?
For example : axios.get('/posts?type =sport')
Or I have to put every single type in separate Url
For example: axios.get('/posts/sport')
Also one more question please?
use one reducer to manage every posts or create one reducer for each post type?
you can add a dynamic route to every new type.
Ex:
'/transaction' -> component-1
'/transaction/:type' -> component-any (multiple)
welcome to Stackoverflow!
I can imagine you have a web API of some sort serving a URL /posts. You want to consume that endpoint from your web application, and you are using axios to do that. I can assume you are using JSON to return that data. Correct me if I'm wrong.
Now that the basic information is "clear", what data you serve from the endpoint, and how it is requested from the client is up to you. Do you want to ask the server what types are there first, and then do one AJAX request per type? Ok. Do you want to serve all posts independent of their type? Ok. Do you want to accept POST data in your controller so you can filter the results before returning a response? Ok.
If you are looking for a more specific answer, you must give more details, or specify more. But I hope I could be of help.
Edit: complete answer.
If you want to filter the results, you have to send some additional data in your POST request, in this case, your post type. In axios, this could be done like this:
axios.post('https://example.com/posts', {
type: 'sports'
}).then((data) => {
console.log(data);
});
You can obviously get the "type" value from a select input, other variable, even the current router page. I don't know your exact setup, but you can always come back and ask ;)
THEN, in your API controller you have to get that POST parameter type, and use it to filter the results. Again, I don't know your exact setup, but for MySQL if would be a WHERE statement in your query, or similar.

Axios requests ignoring parameters

I am sending requests to the the Firebase Realtime API. When I try to delete an from item within from a specific collection (e.g. journals) and specify which journal title using axios.delete("https://topxxx-xxx.firebaseio.com/journals.json", {title: "Nature"}}) all of the journals in the collection are deleted, not just "Nature". Similarly, if I do a get request and specify a title, all journals are returned.
I have also tried using "https://topxxx-xxx.firebaseio.com/journals.json", {params: {title: "Nature"}}. but that also returns all journals. Here are an example delete request:
axios.delete("https://topxxx-xxx.firebaseio.com/journals.json", {title: this.state.title})
.catch(error=> console.log("Error" + error))
The Firebase Realtime Database API doesn't support conditional deletes. To delete a node, you must specify the entire part to that node, and (in the REST API) either use the DELETE verb or use the X-HTTP-Method-Override: DELETE header.
So the two step process:
Perform a query to find the nodes with the title you're looking for:
https://topxxx-xxx.firebaseio.com/journals.json?orderBy="title"&equalTo="the title"
Delete the matching nodes by sending a DELETE to URLs like:
https://topxxx-xxx.firebaseio.com/journals/journalId1.json
You cannot delete a specify item from a json file like that in firebase, and also using GET will return the entire collection. It is working amazingly correct from firebase side. If you want something like how you are expecting, go for a small flask server or checkout cloud functions in firebase
You probably want to send that request to a back-end services that's connected to firebase (i'm assuming since you're using axios). Then call the remove method as demonstrated here

SuiteCommerce Advanced - Show a custom record on the PDP

I am looking to create a feature whereby a User can download any available documents related to the item from a tab on the PDP.
So far I have created a custom record called Documentation (customrecord_documentation) containing the following fields:
Related item : custrecord_documentation_related_item
Type : custrecord_documentation_type
Document : custrecord_documentation_document
Description : custrecord_documentation_description
Related Item ID : custrecord_documentation_related_item_id
The functionality works fine on the backend of NetSuite where I can assign documents to an Inventory item. The stumbling block is trying to fetch the data to the front end of the SCA webstore.
Any help on the above would be much appreciated.
I've come at this a number of ways.
One way is to create a Suitelet that returns JSON of the document names and urls. The urls can be the real Netsuite urls or they can be the urls of your suitelet where you set up the suitelet to return the doc when accessed with action=doc&id=_docid_ query params.
Add a target <div id="relatedDocs"></div> to the item_details.tpl
In your ItemDetailsView's init_Plugins add
$.getJSON('app/site/hosting/scriptlet.nl...?action=availabledoc').
then(function(data){
var asHtml = format(data); //however you like
$("#relatedDocs").html(asHtml);
});
You can also go the whole module route. If you created a third party module DocsView then you would add DocsView as a child view to ItemDetailsView.
That's a little more involved so try the option above first to see if it fits your needs. The nice thing is you can just about ignore Backbone with this approach. You can make this a little more portable by using a service.ss instead of the suitelet. You can create your own ssp app for the function so you don't have to deal with SCAs url structure.
It's been a while, but you should be able to access the JSON data from within the related Backbone View class. From there, within the return context, output the value you're wanting to the PDP. Hopefully you're extending the original class and not overwriting / altering the core code :P.
The model associated with the PDP should hold all the JSON data you're looking for. Model.get('...') sort of syntax.
I'd recommend against Suitelets for this, as that's extra execution time, and is a bit slower.
I'm sure you know, but you need to set the documents to be available as public as well.
Hope this helps, thanks.

Manipulating Soundcloud Stream with Chrome Extension Content Script

I am writing a Chrome extension using AngularJS to add functionality to the Soundcloud stream page. I want to allow the user to create groups of artists so that they may only see a stream with tracks/shares/playlists from that group of artists.
For example, I follow 500 artists, but I want to quickly see a stream from my favorite 10 artists or from the artists I follow that are on the same label.
I am looking for advice on how I could go about making this as seamless as possible. As of right now, my approach involves getting the tracks with the Soundcloud API and using angular's ng-repeat to display the tracks in a view injected into where the stream normally goes. I realized using the Soundcloud widget was too slow and can't be customized to resemble the native stream items, so I copy/pasted the HTML that an actual stream item uses, but obviously the waveform/comment canvas and button functionality don't work.
What are my options as far as how I can approach this? Am I going to need to write my own players that look like the native Soundcloud ones? Any suggestions would be greatly appreciated.
You should use the SoundCloud API which is very well documented.
If you have already the id's of the tracks / artist, you just have to request the url
GET
http://api.soundcloud.com/tracks/ID_OF_TRACK.json?client_id=YOUR_CLIENT_ID
to get all the informations you need about this track, like the waveform_url, and for the comments you was talking about :
GET
http://api.soundcloud.com/tracks/ID_OF_TRACK/comments.json?client_id=YOUR_CLIENT_ID
To reproduce the behaviour of the comments :
POST http://api.soundcloud.com/tracks/ID_OF_TRACK/comments.json?client_id=YOUR_CLIENT_ID
(with a body param which represents the text and a timestamp in ms since the beginnin of the song, note that you must be connected)
If you don't have the id of the track, you could also use the resolve which give you all the info about a ressource if you have only the URL :
GET
http://api.soundcloud.com/resolve.json?url=https://soundcloud.com/poldoore/pete-rock-c-l-smooth-they&client_id=YOUR_CLIENT_ID

Resources