I know tis might be a silly problem but I'm not sure how to frame this line of code to do what I need. I'm using Vue CLI and I have a some objects within an array in my data. one of those objects have several image links with key that goes -> img1 : ./link, img2: ./link2. In my function i need to change the target elements source to the next image i.e from img1 to img2 where I have a counter that stores the number that i want img to change to. however the results only show NaN.
here is my some HTML:
<img #click="storyboard" v-else :src="slide.img1" />
<div class="counter hide">
<p>{{ counter }} / 5</p>
</div>
here is some JS
data() {
return {
slides: [
{ title: 'Landing Page', img1: require("../assets/wadah/proposal.mp4"), info: "Wadah Archive is an alternative museum where everyday artefacts are given meaning through crowdsourced nostalgia. The online archive stresses on the idea that the stories and conversations about the artefact by people visiting the archive should be a part of the artefact itself. It is a reflection on traditional methods of preserving and displaying objects through proposing an alternative navigation system by translating physical artefacts into a digital space.", makeSmall: false
}, {
title: "Interacting with 3D objects", img1: require("../assets/wadah/pinStill.jpg"), info: "dummydata", makeSmall: false
}, {
title: "Designing Pins and Signage", img1: require("../assets/wadah/pins.png"), info: "dummydata", makeSmall: true
},{
title: "Home and Index Navigation", img1: require("../assets/wadah/home1.jpg"), img2: require("../assets/wadah/home3.jpg"), img3: require("../assets/wadah/home2.jpg"), img4: require("../assets/wadah/index.jpg"), img5: require("../assets/wadah/index2.jpg"), info: "dummydata", makeSmall: false
},{
title: "User Flow", img1: require("../assets/wadah/wireflow.png"), info: "dummydata", makeSmall: false
},
],
visibleSlide: 0,
counter: 1
}
}
methods: {
storyboard(event) {
if (this.visibleSlide === 3) {
let ele = event.target
this.counter++
ele.src = this.slides[3].img + this.counter
// console.log(this.slides[3].img + 2)
// console.log(ele.src, this.counter)
}
}
}
const obj = {
title: "Home and Index Navigation",
img1: "../assets/wadah/home1.jpg",
img2: "../assets/wadah/home3.jpg",
img3: "../assets/wadah/home2.jpg",
img4: "../assets/wadah/index.jpg",
}
let counter = 2
console.log("Incorrect:", obj.img + counter) // obj.img does not exists = undefined
console.log("Correct:", obj["img"+counter])
Related
I want to show en edit icon next to value in Amount column. This is because the Amount column is actually editable.But to give that as a hint to user, i want to show some edit icon next to it. How to do that in aurelia slickgrid?
Or maybe there is a way to highlight a field on hover ?
I am using aurelia slickgrid and looking if there is some option in aurelia slickgrid itself.
Go to the aurelia slickgrid example link and click on the link of example's source code
When you open it, there is a method called defineGrids
/* Define grid Options and Columns */
defineGrids() {
this.columnDefinitions1 = [
...,
...,
...,
...,
...,
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true, minWidth: 100 }
];
... rest of the code
}
The row with id effort-driven is where the icons are placed. On the other words, when you push a data collection(usually array of json object) to the table, values of the data objects with key name effort-driven are given to column with id effort-driven. Furthermore, for each passed value to the column, the method myCustomCheckmarkFormatter reformat it(for example 0 -> false or null -> not filled) and place it to the corresponding table's cell. look at the below method:
// create my custom Formatter with the Formatter type
const myCustomCheckmarkFormatter: Formatter<DataItem> = (_row, _cell, value) => {
// you can return a string of a object (of type FormatterResultObject), the 2 types are shown below
return value ? `<i class="fa fa-fire red" aria-hidden="true"></i>` : { text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', addClasses: 'lightblue', toolTip: 'Freezing' };
};
As you can see, when the method is called, it returns an icon such as <i class="fa fa-fire red" aria-hidden="true"></i> which is placed in the table's cell.
I added an edit icon next to Amount,
{
id: "Edit",
field: "edit",
excludeFromColumnPicker: true,
excludeFromExport: true,
excludeFromQuery: true,
excludeFromGridMenu: true,
excludeFromHeaderMenu: true,
minWidth: 30,
maxWidth: 30,
formatter: Formatters.editIcon,
},
and used this custom format from ghiscoding comment:
const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, dataContext, grid) => {
const isEditable = !!columnDef.editor;
value = (value === null || value === undefined) ? '' : value;
return isEditable ? `<div style="background-color: aliceblue">${value}</div>` : value;
};
The result is as shown in the picture.
I am trying to add/use a variable inside the pipe to get the name of an object from a different object. Here is what I got so far:
I have an array of IDs allOutgoingNodes which I am using in the pipe.
Then I filter results using tableItemId property and then I am adding additional property externalStartingPoint and after that I would like to add name of tableItem from tableItems object to content -> html using concat.
const startingPointId = 395;
const allNodes = {
"818": {
"id": "818",
"content": {
"html": "<p>1</p>"
},
"outgoingNodes": [
"819"
],
"tableItemId": 395
},
"821": {
"id": "821",
"content": {
"html": "<p>4</p>"
},
"tableItemId": 396
}
}
const tableItems = {
"395": {
"id": "395",
"name": "SP1",
"code": "SP1"
},
"396": {
"id": "396",
"name": "SP2",
"code": "SP2"
}
}
const allOutgoingNodes = R.pipe(
R.values,
R.pluck('outgoingNodes'),
R.flatten
)(tableItemNodes);
const result = R.pipe(
R.pick(allOutgoingNodes),
R.reject(R.propEq('tableItemId', startingPointId)),
R.map(
R.compose(
R.assoc('externalStartingPoint', true),
SomeMagicFunction(node.tableItemId),
R.over(
R.lensPath(['content', 'html']),
R.concat(R.__, '<!-- Table item name should display here -->')
)
)
),
)(allNodes);
Here is a complete working example: ramda editor
Any help and suggestions on how to improve this piece of code will be appreciated.
Thank you.
Update
In the comments, OriDrori noted a problem with my first version. I didn't really understand one of the requirements. This version tries to address that issue.
const {compose, chain, prop, values, lensPath,
pipe, pick, reject, propEq, map, assoc, over} = R
const getOutgoing = compose (chain (prop('outgoingNodes')), values)
const htmlLens = lensPath (['content', 'html'])
const addName = (tableItems) => ({tableItemId}) => (html) =>
html + ` <!-- ${tableItems [tableItemId] ?.name} -->`
const convert = (tableItemNodes, tableItems, startingPointId) => pipe (
pick (getOutgoing (tableItemNodes)),
reject (propEq ('tableItemId', startingPointId)),
map (assoc ('externalStartingPoint', true)),
map (chain (over (htmlLens), addName (tableItems)))
)
const startingPointId = 395;
const tableItemNodes = {818: {id: "818", content: {html: "<p>1</p>"}, outgoingNodes: ["819"], tableItemId: 395}, 819: {id: "819", content: {html: "<p>2</p>"}, outgoingNodes: ["820"], tableItemId: 395}};
const tableItems = {395: {id: "395", name: "SP1", code: "SP1"}, 396: {id: "396", name: "SP2", code: "SP2"}}
const allNodes = {818: {id: "818", content: {html: "<p>1</p>"}, outgoingNodes: ["819"], tableItemId: 395}, 819: {id: "819", content: {html: "<p>2</p>"}, outgoingNodes: ["820"], tableItemId: 395}, 820: {id: "820", content: {html: "<p>3</p>"}, outgoingNodes: ["821"], tableItemId: 396}, 821: {id: "821", content: {html: "<p>4</p>"}, tableItemId: 396}}
console .log (
convert (tableItemNodes, tableItems, startingPointId) (allNodes)
)
.as-console-wrapper {max-height: 100% !important; top: 0}
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.min.js"></script>
As well as most of the comments on the version below still applying, we should also note that chain, when applied to functions acts like this:
chain (f, g) (x) //~> f (g (x)) (x)
So chain (over (htmlLens), addName (tableItems))
ends up being something like
(node) => over (htmlLens) (addName (tableItems) (node)) (node)
which in Ramda is equivalent to
(node) => over (htmlLens, addName (tableItems) (node), node)
which we then map over the nodes coming to it. (You can also see this in the Ramda REPL.)
Original Answer
It's not trivial to weave extra arguments through a pipeline because pipelines are designed for the simple purpose of passing a single argument down the line, transforming it at every step. There are of course techniques we could figure out for that, but I would expect them not to be worth the effort. Because the only thing they gain us would be the ability to write our code point-free. And point-free should not be a goal on its own. Use it when it makes your code simpler and more readable; skip it when it doesn't.
Instead, I would break this apart with some helper functions, and then write a main function that took our arguments and passed them as necessary to helper functions inside our main pipeline. Expand this snippet to see one approach:
const {compose, chain, prop, values, lensPath, flip, concat,
pipe, pick, reject, propEq, map, assoc, over} = R
const getOutgoing = compose (chain (prop ('outgoingNodes')), values)
const htmlLens = lensPath (['content', 'html'])
const addName = flip (concat) ('Table item name goes here')
const convert = (tableItemNodes, startingPointId) => pipe (
pick (getOutgoing (tableItemNodes)),
reject (propEq ('tableItemId', startingPointId)),
map (assoc ('externalStartingPoint', true)),
map (over (htmlLens, addName))
)
const startingPointId = 395;
const tableItemNodes = {818: {id: "818", content: {html: "<p>1</p>"}, outgoingNodes: ["819"], tableItemId: 395}, 819: {id: "819", content: {html: "<p>2</p>"}, outgoingNodes: ["820"], tableItemId: 395}};
const allNodes = {818: {id: "818", content: {html: "<p>1</p>"}, outgoingNodes: ["819"], tableItemId: 395}, 819: {id: "819", content: {html: "<p>2</p>"}, outgoingNodes: ["820"], tableItemId: 395}, 820: {id: "820", content: {html: "<p>3</p>"}, outgoingNodes: ["821"], tableItemId: 396}, 821: {id: "821", content: {html: "<p>4</p>"}, tableItemId: 396}}
console .log (
convert (tableItemNodes, startingPointId) (allNodes)
)
.as-console-wrapper {max-height: 100% !important; top: 0}
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.min.js"></script>
(You can also see this on the Ramda REPL.)
Things to note
I find compose (chain (prop ('outgoingNodes')), values) to be slightly simpler than pipe (values, pluck('outgoingNodes'), flatten), but they work similarly.
I often separate out the lens definitions even if I'm only going to use them once to make the call site cleaner.
There is probably no good reason to use Ramda in addName. This would work just as well: const addName = (s) => s + 'Table item name goes here' and is cleaner. I just wanted to show flip as an alternative to using the placeholder.
There is an argument to be made for replacing
map (assoc ('externalStartingPoint', true)),
map (over (htmlLens, addName))
with
map (pipe (
assoc ('externalStartingPoint', true),
over (htmlLens, addName)
))
as was done in the original. The Functor composition law states that they have the same result. And that requires one fewer iterations through the data. But it adds some complexity to the code that I wouldn't bother with unless a performance test pointed to this as a problem.
Before I saw your answer I managed to do something like in the example below:
return R.pipe(
R.pick(allOutgoingNodes),
R.reject(R.propEq('tableItemId', startingPointId)),
R.map((node: Node) => {
const startingPointName = allTableItems[node.tableItemId].name;
return R.compose(
R.assoc('externalStartingPoint', true),
R.over(
R.lensPath(['content', 'html']),
R.concat(
R.__,
`<p class='test'>See node in ${startingPointName}</p>`
)
)
)(node);
}),
R.merge(newNodesObject)
)(allNodes);
What do you think?
I'm trying to make a search bar with a list,dropdown list,
how to make a search list lik this code:
onPress={() =>this.props.navigation.navigate('LinhaDiurno03')
when an item is pressed?
....I want that each item in the list open a different screen in the application....
How can i to it?
here is the my teste:
Code to dropDown List
here some code:
var items = [
//name key is must.It is to show the text in front
{id: 1, name: 'ANA RECH', prestadora: 'UNIDOS', pos: 'P01'},
{id: 2, name: 'ARROIO DAS MARRECAS', prestadora: 'UNIDOS', pos: 'P01'},
{id: 3, name: 'VILA SECA', prestadora: 'UNIDOS', pos: 'P01'},];
onItemSelect={item => Alert.alert(" ", JSON.stringify(item.prestadora + ", LINHA: " + item.pos), [{ text: "open the especifc screen", onPress: () =>('some code here')},{ text: "bacvk", onPress: () => console.log("OK Pressed")}],{ cancelable: true })}
//onItemSelect called after the selection from the dropdown
I read the library API, you can set the navigation keys in the item, then in the onItemSelect to go to the special screen. the example code is below.
// in the item every element add a router key
const item = [
...
{
id: 8,
name: 'Swift',
key:"the navigation params" //like the example LinhaDiurno03
},
...
]
<SearchableDropdown
multi={true}
selectedItems={this.state.selectedItems}
onItemSelect={(item) => {
his.props.navigation.navigate(item.key)
}}
/>
Here is the final code, you just need to make the route before in your app...
the full code
I am using ionic 4 and i have a very strange issue. i have created a child components called social icons which is used to like or unlike ..etc. This child component will be called from parent component as shown below.
PARENT COMPONENT
<ion-card *ngFor="let creative of getArray">
<ion-card-header>
<social-icons [coll]="creative" (iconClicked)="updateUserReaction($event,creative?.id)"></social-icons><br>
</ion-card-header>
</ion-card>
Here i am calling child component within ngFor . Also i am passing creative obj to the child component.
creative obj :
{firstname: "Murali", description: "Photography of cute", nooflikes: 0, type: "creative", lastname: "Techwedge", …}
description: "Photography of cute"
elasticSearch_id: "creative_50"
file_type: "jpg"
filepath: "/documents/assets/Images/creative/IMG-20190310-WA0001_50.jpg"
firstname: "Murali"
id: 50
lastname: "Techwedge"
name: "Photography of cute"
noofcomments: 0
nooflikes: 0
noofshares: 0
noofunlikes: 2
resource_name: "IMG-20190310-WA0001_50.jpg"
socialIcons: Array(5)
0: {icon: "thumbs-up", operation: "cancellike", color: "danger"}
1: {icon: "thumbs-down", operation: "unlike"}
2: {icon: "eye", operation: "views"}
3: {icon: "text", operation: "comment"}
4: {icon: "settings", operation: "filter"}
length: 5
__proto__: Array(0)
timestamp: null
type: "creative"
user_id: 6
user_reaction: []
userobj: {id: 6, firstname: "Nikhil", lastname: "n", emailid: "nikhil#temp.org", password: "pass123", …}
views: 17
This is what creative obj data will be.
child component:
<ion-fab bottom>
<ion-grid>
<ion-row>
<ion-col size="2" *ngFor="let icon of coll?.socialIcons" >
<ion-card-title >
<ion-icon [color]="icon?.color" *ngIf="icon.icon != 'text' && icon.icon != 'settings'" [name]="icon.icon" (click)="clickedIcon(icon.operation)" style="font-size: 20px;"></ion-icon>
<ion-icon (click)="navigate()" *ngIf="icon.icon == 'text'" [name]="icon.icon" style="font-size: 20px;"></ion-icon>
<ion-icon *ngIf="icon.icon == 'settings'" [name]="icon.icon" style="font-size: 20px;" [routerLink]="['/filters/sharewith',{'id':coll?.id}]"></ion-icon>
</ion-card-title>
<ion-card-subtitle>
{{icon.value}}
</ion-card-subtitle>
</ion-col>
</ion-row>
</ion-grid>
</ion-fab>
Here in child component i am passing the color aattributes.
Below is the component.ts for child component.
ngOnInit() {
return new Promise((resolve, reject) => {
this.creativeServices.getCreativeReactions1(this.coll["id"],this.coll["userobj"]["id"]).pipe(map(res1=>res1.json())).subscribe(res1=>{
this.coll["user_reaction"] = res1;
this.coll["user_reaction"].map(element=>{
switch(element["latestReaction"]){
case 'like' :{
this.coll["socialIcons"][0]["color"] = "danger"
this.coll["socialIcons"][0]["operation"] = "cancellike"
break;
}
case "unlike":{
this.coll["socialIcons"][1]["color"] = "danger"
this.coll["socialIcons"][1]["operation"] = "cancelunlike"
break;
}
case "cancellike":{
this.coll["socialIcons"][0]["color"] = "default"
this.coll["socialIcons"][0]["operation"] = "like"
break;
}
case "cancelunlike":{
this.coll["socialIcons"][1]["color"] = "default"
this.coll["socialIcons"][1]["operation"] = "unlike"
break;
}
default:{
this.coll["socialIcons"][0]["color"] = "default"
}
}
})
resolve(this.coll)
console.log(this.coll)
})
})
// this.setTitle();
}
As you can see i am making a service call based on the response i get from the service call i am setting the color of icons for each creative object sent from parent component.
ISSUE : Suppose say if there is any value obtained from the response then the color of the icons changes for all the creatives irrespective of the switch condition.
say for a creative if the response from the service call is null then the color will be black.
now for second creative response exists based on the switch conditions the appropriate color is changed to this creative which is fine. But along with this the first creative color also gets changed. i,e this.coll.socialIcons arrays gets updated to all the creative objects.
I guess there is some issue with the way of rendering socialIcons.
Please let me know where am i going wrong?
This bit doesn't seem right:
case 'like' :{
this.coll["socialIcons"][0]["color"] = "danger"
this.coll["socialIcons"][0]["operation"] = "cancellike"
break;
}
case "unlike":{
this.coll["socialIcons"][1]["color"] = "danger"
this.coll["socialIcons"][1]["operation"] = "cancelunlike"
break;
}
case "cancellike":{
this.coll["socialIcons"][0]["color"] = "default"
this.coll["socialIcons"][0]["operation"] = "like"
break;
}
case "cancelunlike":{
this.coll["socialIcons"][1]["color"] = "default"
this.coll["socialIcons"][1]["operation"] = "unlike"
break;
}
default:{
this.coll["socialIcons"][0]["color"] = "default"
}
It's not clear what you're trying to do but whatever it is, you are only setting either ["socialIcons"][0] or ["socialIcons"][1] in all instances.
Problems with the question
You have not asked your question in a clear way, you should try to recreate an example with only the problem presented, and also give us all the information.
You are talking about user_reaction which has latestReaction in your code but when you posted a data sample user_reaction is just [].
If you are trying to run the code against an [] then its going to set the default case every time as its going to get undefined back from each switch test.
May I know if it is possible to put pictures or images into the rows of DataTables (http://datatables.net/) and how does one goes in doing it?
yes, simple way (Jquery Datatable)
<script>
$(document).ready(function () {
$('#example').dataTable({
"processing": true, // control the processing indicator.
"serverSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
"info": true, // control table information display field
"stateSave": true, //restore table state on page reload,
"lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]], // use the first inner array as the page length values and the second inner array as the displayed options
"ajax":{
"url": "#string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))/Home/AjaxGetJsonData",
"type": "GET"
},
"columns": [
{ "data": "Name", "orderable" : true },
{ "data": "Age", "orderable": false },
{ "data": "DoB", "orderable": true },
{
"render": function (data, type, JsonResultRow, meta) {
return '<img src="Content/Images/'+JsonResultRow.ImageSrcDB+'">';
}
}
],
"order": [[0, "asc"]]
});
});
</script>
[edit: note that the following code and explanation uses a previous DataTables API (1.9 and below?); it translates easily into the current API (in most cases, just ditch the Hungarian notation ("fnRowCallback" just becomes "rowCallback" for example) but I have not done so yet. The backwards compatibility is still in place I believe, but you should look for the newer conventions where possible]
Original reply follows:
What Daniel says is true, but doesn't necessarily say how it's done. And there are many ways. Here are the main ones:
1) The data source (server or otherwise) provides a complete image tag as part of the data set. Don't forget to escape any characters that need escaping for valid JSON
2) The data source provides one or more fields with the information required. For example, a field called "image link" just has the Images/PictureName.png part. Then in fnRowCallback you use this data to create an image tag.
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
var imgLink = aData['imageLink']; // if your JSON is 3D
// var imgLink = aData[4]; // where 4 is the zero-origin column for 2D
var imgTag = '<img src="' + imgLink + '"/>';
$('td:eq(4)', nRow).html(imgTag); // where 4 is the zero-origin visible column in the HTML
return nRow;
}
3) Similar to above, but instead of adding a whole tag, you just update a class that has the image as a background. You would do this for images that are repeated elements rather than one-off or unique pieces of data.
You mean an image inside a column of the table?
Yes, just place an html image tag
like this
<img src="Images/PictureName.png">
instead of putting data (some string) into a column just put the above html tag....
Asp.net core DataTables
The following code retrieve the image from a folder in WWWroot and the path in the DB field ImagePath
{
"data": "ImagePath",
"render": function (data) {
return '<img src="' + data + '" class="avatar" width="50" height="50"/>';
}
}
In case the Name of the picturefile is put together out of one or more informations in the table, like in my case:
src="/images/' + Nummer + Belegnummer + '.jpg"
you can make it that way:
var table = $('#Table').DataTable({
columnDefs: [
{
targets: 0,
render: getImg
}
]
});
function getImg(data, row, full) {
var Nummer = full[1];
var Belegnummer = full[4];
return '<img src="/images/' + Nummer + Belegnummer + '.jpg"/>';}
The picture is in the first column, so Targets = 0 and gets the Information from the same row.
It is necessary to add the parameters data and row.
It is not necessary to outsource it into a seperate function, here getImg, but it makes it easier to debug.