How to use jalali calendar in angular material 2? - angular-material2

I use mat-datepicker in my app but when I change the LOCAL_ID to 'fa-IR' the arrangement of months and the days of month is incorrect as seen in this picture: .
how can I do it correctly?
sample link

I reported this bug to angular material and they introduced a repository which solve this problem (as workaround).
Should rewrite DateAdapter with this one.
{provide: DateAdapter, useClass: JalaliMomentDateAdapter, deps:
[MAT_DATE_LOCALE]},
{provide: MAT_DATE_FORMATS, useValue: JALALI_MOMENT_FORMATS},
Thanks from peyman ebrahimi for all of his efforts.

Related

Redux form not updated for new material-ui i.e. "#material-ui/core": "^3.3.2"

"material-ui/core": "^3.3.2" is very different compared to "material-us": "^0.19.2". The examples in redux forms are not working for material-ui.
Someone updated this just as you were posting about it. PRs always welcome.

Vue router.push: How to check if component or content is loaded?

As per all my post, I just want to make it known that I am still new to Laravel + VueJS, so please be as detailed as possible when posting your answers or comments. Thanks.
I am using Vue's router.push() to retrieve pages. Example code as follows:
editHandler(id) {
let self = this
self.$router.push({ name: 'inventory/Suppliers/Edit', params: { id }
})
}
I planned to add a loading overlay on the onClick event but I need help to check when the component/content has been loaded so that I can hide the loading overlay. Anyone can help me how I can achieve this? Thanks.

How to embed a chart in email when sending out to using mandrill

I want to give out weekly report as a email to the merchant based on certain data where I want to include the chart. Generally on a website I'm using chartkick to draw the charts, but how do I embed chart in an email. Please help me out.
My model code
def weekly_emailer
# Some code here
visits = Visit.group(:created_at).count
end
My view code
<%= line_chart #visits %>
Disclaimer: I'm Image-Charts founder.
As a indiehacker, I had the same question as you each time I started a new SaaS I had to rewrite from scratch an image generation backend and then send these charts through emails... :(
That's why I've built Image-charts 👍 and added gif animation on top of it 🚀(chart animations in emails are awesome!!), no more server-side chart rendering pain, no scaling issues, it's blazing fast, 1 URL = 1 image chart.
https://image-charts.com/chart
?cht=bvg
&chd=t:10,15,25,30,40,80
&chs=700x300
&chxt=x,y
&chxl=0:|March '18|April '18|May '18|June '18|July '18|August '18|
&chdl=Visitors (in thousands)
&chf=b0,lg,90,05B142,1,0CE858,0.2
&chxs=1N**K
&chtt=Visitors report
&chma=0,0,10,10
&chl=||||+33% !|x2 !
Because Chartkick generates charts using Chart.js, You can take the Chart.js config object generated by Chartkick and render it using QuickChart, an open-source image renderer for Chart.js charts: https://github.com/typpo/quickchart.
Unlike the other answers on this post, this actually works for Chartkick-generated charts.
Take a Chart.js config like this one. This is similar to the config that Chartkick generates:
{
type: 'bar',
data: {
labels: [2012, 2013, 2014, 2015, 2016],
datasets: [{
label: 'Data',
data: [12, 6, 5, 18, 12]
}]
}
}
Pack it into the URL like so (you can also self-host this because it's open source):
https://quickchart.io/chart?bkg=white&c={ type: 'bar', data: { labels: [2012, 2013, 2014, 2015, 2016], datasets: [{ label: 'Data', data: [12, 6, 5, 18, 12] }] }}
Then include the image in your email (for more complex charts it's usually best to url encode the config):
<img src="https://quickchart.io/chart?bkg=white&c={type:'bar',data:{labels:[2012,2013,2014,2015,2016],datasets:[{label:'Data',data:[12,6,5,18,12]}]}}" />
This image will appear in your email:
If your using Highcharts they have a way of converting the chart to a PNG file (and I think a couple of other options).
However in order to have that work you have two options:
Send the data and chart configuration to their server for conversion
Download a server implementation for it, though only available for a few languages
I've sent a few charts for them for conversion for non-sensitive data, in the past, and that worked pretty well :) Though its worth noting that all of this was a few years ago..
You can't do this with chartkick (yet), but we just released this last week: https://ChartURL.com :)
You can generate charts on the fly using an "Encrypted URL" scheme, or you can send us huge amounts of data and return a Short URL that'll resolve to an image.
It was built on top of http://C3js.org so there's a ton of flexibility in what you can generate.
These URLs can be used in web apps & mobile apps, but the original intent was email charts.
We're going to be working on a chartkick pull request that brings in ChartURL, but in the meantime, I hope this can be helpful!

jQuery Masonry and UI Sortable

There's this website I'm developing which can be found here. It's a photography website and my client asked for me to implement something that would allow her to move the photos around and change the order of which they appear. They come from a MySQL database and are displayed with jQuery Masonry.
I thought instantly of jQuery UI Sortable, and I've been trying to implement it with absolutely no luck at all.
How can I achieve this? Can someone point me in the right direction, please?
Thanks in advance!
I am struggling with the same issue, so far my answer has been to change classes with jquery's sortable start, stop, change and sort events. Like so:
$('#sortable').sortable({
start: function(event, ui) {
console.log(ui);
ui.item.removeClass('masonry');
ui.item.parent().masonry('reloadItems')
},
change: function(event, ui) {
ui.item.parent().masonry('reloadItems');
},
stop: function(event, ui) {
ui.item.addClass('masonry');
ui.item.parent().masonry('reloadItems');
});
Here is a working example and a JS Fiddle on the subject. It's a start.
However, this is not a 'presto' solution, this examples work with older versions of masonry, the latest version has a few bugs implementing it since the "reload" method was replaced with layout() and reloadItems().
Or... you can use the old masonry versions, if it works for you.
Alternatively you can use jQuery.Shapeshift(), which does basically what you're looking for.

Mootools Lightbox with Img Slider

I use the Mootools Mediabox for my Site.
This one mediaboxAdvanced v1.4.6.
Now i looking for a solution that the image change automatically afer 5 Sec.
In the code i found thie
{id:"mbNextLink",href:"#"})).addEvent("click",R)
But didn't found a solution with duration and addEvent.
Best regards
Just by looking at the code you should be able to do it by extending the mediaboxAdvanced code.
Just look for Mediabox = { in the code and add a function after that. For example:
showNext: function(){
next();
},
then you should be able to use setInterval for example to make it automatically advance after 5 seconds.

Resources