Angularjs - html table with months and weeks - angularjs

I want somthing like this, a table with months and weeks number:
I made this JS Ffiddle: https://jsfiddle.net/2fxq4pc9/
function TodoCtrl($scope) {
$scope.filter = {
"year": ''+new Date().getFullYear()
};
$scope.months = [
{"name": "Jan","number": 1, "totalWeeks": null, "weeks": null},
{"name": "Feb","number": 2, "totalWeeks": null, "weeks": null},
{"name": "Mar","number": 3, "totalWeeks": null, "weeks": null},
{"name": "Apr","number": 4, "totalWeeks": null, "weeks": null},
{"name": "May","number": 5, "totalWeeks": null, "weeks": null},
{"name": "Jun","number": 6, "totalWeeks": null, "weeks": null},
{"name": "Jul","number": 7, "totalWeeks": null, "weeks": null},
{"name": "Aug","number": 8, "totalWeeks": null, "weeks": null},
{"name": "Sep","number": 9, "totalWeeks": null, "weeks": null},
{"name": "Oct","number": 10, "totalWeeks": null, "weeks": null},
{"name": "Nov","number": 11, "totalWeeks": null, "weeks": null},
{"name": "Dec","number": 12, "totalWeeks": null, "weeks": null}
];
$scope.getTotalWeekOfAMonth = function(year, month) {
var firstOfMonth = new Date(year, month - 1, 1);
var day = firstOfMonth.getDay() || 6;
day = day === 1 ? 0 : day;
if (day) { day-- }
var diff = 7 - day;
var lastOfMonth = new Date(year, month, 0);
var lastDate = lastOfMonth.getDate();
if (lastOfMonth.getDay() === 1) {
diff--;
}
var result = Math.ceil((lastDate - diff) / 7);
return result + 1;
}
$scope.createWeeksNumberList = function() {
$scope.months.forEach(function(element) {
var weekTotals = $scope.getTotalWeekOfAMonth($scope.filter.year, element.number);
var obj = [];
for (let week = 1; week <= weekTotals; week++) {
obj.push({"weekNumber": week, "flag": null });
}
element.weeks = obj;
element.totalWeeks = weekTotals;
});
}
$scope.createWeeksNumberList();
}
Is there a way to improve it and to show numbers of weeks consecutive? 1 to 52 (splitted by months).
The current one seems a bit slow and ugly (I'm concerned about the javascript code and not the css style).
Thanks.

Related

Convert JSON date date to Timestamp Field

I have source data in JSON column in snowflake and need to convert to timestamp field.
Source data:
[
{
"end_time_of_day_of_week": {
"day_of_week": "TUESDAY",
"time_of_day": {
"hours": 23,
"minutes": 59,
"nanos": null,
"seconds": 59
}
},
"start_time_of_day_of_week": {
"day_of_week": "TUESDAY",
"time_of_day": {
"hours": null,
"minutes": null,
"nanos": null,
"seconds": null
}
}
},
{
"end_time_of_day_of_week": {
"day_of_week": "WEDNESDAY",
"time_of_day": {
"hours": 23,
"minutes": 59,
"nanos": null,
"seconds": 59
}
},
"start_time_of_day_of_week": {
"day_of_week": "WEDNESDAY",
"time_of_day": {
"hours": null,
"minutes": null,
"nanos": null,
"seconds": null
}
}
},
{
"end_time_of_day_of_week": {
"day_of_week": "THURSDAY",
"time_of_day": {
"hours": 23,
"minutes": 59,
"nanos": null,
"seconds": 59
}
},
"start_time_of_day_of_week": {
"day_of_week": "THURSDAY",
"time_of_day": {
"hours": null,
"minutes": null,
"nanos": null,
"seconds": null
}
}
},
{
"end_time_of_day_of_week": {
"day_of_week": "SATURDAY",
"time_of_day": {
"hours": 23,
"minutes": 59,
"nanos": null,
"seconds": 59
}
},
"start_time_of_day_of_week": {
"day_of_week": "SATURDAY",
"time_of_day": {
"hours": null,
"minutes": null,
"nanos": null,
"seconds": null
}
}
}
]
Target output 2 column with each days time (null will be replaced by zero):
|| start_time || end_time ||
TUESDAY 00:00 TUESDAY 23:59
WEDNESDAY 00:00 WEDNESDAY 23:59
THURSDAY 00:00 THURSDAY 23:59
SATURDAY 00:00 SATURDAY 23:59
Tuesday 23:
So given the data is repeated, I trimmed it to two rows:
with data(json) as (
select parse_json('[
{
"end_time_of_day_of_week": {
"day_of_week": "TUESDAY", "time_of_day": { "hours": 23, "minutes": 59, "nanos": null, "seconds": 59 }
},
"start_time_of_day_of_week": {
"day_of_week": "TUESDAY", "time_of_day": { "hours": null, "minutes": null, "nanos": null, "seconds": null }
}
},
{
"end_time_of_day_of_week": {
"day_of_week": "WEDNESDAY", "time_of_day": { "hours": 23, "minutes": 58, "nanos": null, "seconds": 59 }
},
"start_time_of_day_of_week": {
"day_of_week": "WEDNESDAY", "time_of_day": { "hours": null, "minutes": null, "nanos": null, "seconds": null }
}
}
]')
)
so using FLATTEN to unroll the ARRAY, and then accessing the fields, you can use the values. I using LPAD to make things 2 characters wide, and ZEROIFNULL to handle the variant nulls.
select f.value:"start_time_of_day_of_week" as s
,f.value:"end_time_of_day_of_week" as e
,s:day_of_week as s_dow
,s:time_of_day as s_tod
,e:day_of_week as e_dow
,e:time_of_day as e_tod
,lpad(zeroifnull(s_tod:hours::int),2,0) as s_h
,lpad(zeroifnull(s_tod:minutes::int),2,0) as s_m
,zeroifnull(s_tod:seconds::int) as s_s
,zeroifnull(s_tod:nano::int) as s_n
,lpad(zeroifnull(e_tod:hours::int),2,0) as e_h
,lpad(zeroifnull(e_tod:minutes::int),2,0) as e_m
,zeroifnull(e_tod:seconds::int) as e_s
,zeroifnull(e_tod:nano::int) as e_n
,concat( s_dow, ' ', s_h, ':', s_m ) as start_time
,concat( e_dow, ' ', e_h, ':', e_m ) as end_time
from data as d
,table(flatten(input=>d.json)) f
gives:
S
E
S_DOW
S_TOD
E_DOW
E_TOD
S_H
S_M
S_S
S_N
E_H
E_M
E_S
E_N
START_TIME
END_TIME
{ "day_of_week": "TUESDAY", "time_of_day": { "hours": null, "minutes": null, "nanos": null, "seconds": null } }
{ "day_of_week": "TUESDAY", "time_of_day": { "hours": 23, "minutes": 59, "nanos": null, "seconds": 59 } }
"TUESDAY"
{ "hours": null, "minutes": null, "nanos": null, "seconds": null }
"TUESDAY"
{ "hours": 23, "minutes": 59, "nanos": null, "seconds": 59 }
00
00
0
0
23
59
59
0
TUESDAY 00:00
TUESDAY 23:59
{ "day_of_week": "WEDNESDAY", "time_of_day": { "hours": null, "minutes": null, "nanos": null, "seconds": null } }
{ "day_of_week": "WEDNESDAY", "time_of_day": { "hours": 23, "minutes": 58, "nanos": null, "seconds": 59 } }
"WEDNESDAY"
{ "hours": null, "minutes": null, "nanos": null, "seconds": null }
"WEDNESDAY"
{ "hours": 23, "minutes": 58, "nanos": null, "seconds": 59 }
00
00
0
0
23
58
59
0
WEDNESDAY 00:00
WEDNESDAY 23:58
which can be simplified to:
select
start_time
,end_time
from (
select f.value:"start_time_of_day_of_week" as s
,f.value:"end_time_of_day_of_week" as e
,lpad(zeroifnull(s:time_of_day:hours::int),2,0) as s_h
,lpad(zeroifnull(s:time_of_day:minutes::int),2,0) as s_m
,lpad(zeroifnull(e:time_of_day:hours::int),2,0) as e_h
,lpad(zeroifnull(e:time_of_day:minutes::int),2,0) as e_m
,concat( s:day_of_week, ' ', s_h, ':', s_m ) as start_time
,concat( e:day_of_week, ' ', e_h, ':', e_m ) as end_time
from data as d
,table(flatten(input=>d.json)) f
)
START_TIME
END_TIME
TUESDAY 00:00
TUESDAY 23:59
WEDNESDAY 00:00
WEDNESDAY 23:58
You need to use the Snowflake flatten function to convert the JSON array to rows.
Note that your desired output is not really a timestamp. It's a string (varchar). If there were enough information to construct a timestamp, the SQL could do that and output it with a format string the way you have it. However, there's not enough information to create a timestamp so this shows how to make it a varchar formatted as your target output.
create or replace table T1(v variant);
insert into T1 select parse_json($$ >>> Paste your JSON here <<< $$);
select * from T1; -- Make sure your JSON is in the table correctly.
select * from T1, table(flatten(v)); -- Start the flattening and extraction with this.
select VALUE:start_time_of_day_of_week.day_of_week::string || ' ' ||
nvl(VALUE:start_time_of_day_of_week.time_of_day.hours::string, '00') || ':' ||
nvl(VALUE:start_time_of_day_of_week.time_of_day.minutes::string, '00')
as START_TIME
,VALUE:end_time_of_day_of_week.day_of_week::string || ' ' ||
nvl(VALUE:end_time_of_day_of_week.time_of_day.hours::string, '00') || ':' ||
nvl(VALUE:end_time_of_day_of_week.time_of_day.minutes::string, '00')
as END_TIME
from T1, table(flatten(v));
Output:
START_TIME
END_TIME
TUESDAY 00:00
TUESDAY 23:59
WEDNESDAY 00:00
WEDNESDAY 23:59
THURSDAY 00:00
THURSDAY 23:59
SATURDAY 00:00
SATURDAY 23:59

Array Filter in Angular

i have json array get from http web api, i want to filter this array:
[
{
"bulan": "4",
"tahun": "2017",
"id_program": 4,
"id_segmen": 1,
"segmen": "ppu",
"jumlah": 3953,
"target": 900000
},
{
"bulan": "4",
"tahun": "2017",
"id_program": 3,
"id_segmen": 2,
"segmen": "bpu",
"jumlah": 45,
"target": 500000
},
{
"bulan": "4",
"tahun": "2017",
"id_program": 3,
"id_segmen": 1,
"segmen": "ppu",
"jumlah": 8752,
"target": 900000
}]
i need to filter or select for get all where id_segmen=1.
this is my expectation :
[
{
"bulan": "4",
"tahun": "2017",
"id_program": 4,
"id_segmen": 1,
"segmen": "ppu",
"jumlah": 3953,
"target": 900000
}]
my current http.get is as below:
this.http.get<JuResponse>(environment.url + '/cps/' + year + '/' + month + '/' + kanwil + '/' + cabang).
subscribe(data => {
let filteredValues = data.filter((data) => value.id_segmen == 1);
console.log(filteredValues);
});
Check the below code, items is your JSON from WebAPI and fiteredItem is an array of objects which has id_segmen=1
this.filteredItem= this.items.filter((item) => {
return (item.id_segmen ===1);
})
You can use
for (var i = 0; i < arrayData.length; i++) {
if (arrayData[i].id_segmen == 1) {
result.push(arrayData[i]);
}
}
Try this
var arrayData= [
{
"bulan": "4",
"tahun": "2017",
"id_program": 4,
"id_segmen": 1,
"segmen": "ppu",
"jumlah": 3953,
"target": 900000
},
{
"bulan": "4",
"tahun": "2017",
"id_program": 3,
"id_segmen": 2,
"segmen": "bpu",
"jumlah": 45,
"target": 500000
},
{
"bulan": "4",
"tahun": "2017",
"id_program": 3,
"id_segmen": 1,
"segmen": "ppu",
"jumlah": 8752,
"target": 900000
}]
var result = [];
for (var i = 0; i < arrayData.length; i++) {
if (arrayData[i].id_segmen == 1) {
result.push(arrayData[i]);
}
}
console.log(result)
You can use Array.filter
let filteredArray = this.myArray.filter(item => item.id_segment===1)
Simply use the native javascript filter() method, like this way:
let filteredValues = result.filter((value) => value.id_segmen == 1);
this way,
filteredValues will contain only your values with id_segmen == 1.
You can use Javascript Filters for this purpose
var a = [
{
"bulan": "4",
"tahun": "2017",
"id_program": 4,
"id_segmen": 1,
"segmen": "ppu",
"jumlah": 3953,
"target": 900000
},
{
"bulan": "4",
"tahun": "2017",
"id_program": 3,
"id_segmen": 2,
"segmen": "bpu",
"jumlah": 45,
"target": 500000
},
{
"bulan": "4",
"tahun": "2017",
"id_program": 3,
"id_segmen": 1,
"segmen": "ppu",
"jumlah": 8752,
"target": 900000
}];
var c = a.filter(function(val){
return val.id_segmen == 1 ;
});
alert(JSON.stringify(c))

How to loop the input fields data in nested from to an array in angular js?

Actually I need to show the data in an Array in this format after form validation. Please anyone help me out I'm new to angular js.
$scope.newuser=[
{
"EmployeeID": "A123",
"FullName": "phantommm",
"UserRegistrationDate": "2015-07-10T00:00:00",
"LastActiveDate": "2015-07-10T00:00:00",
"UserProjects": [
{
"UserID": 1,
"ProjectID": 1,
"ProjectRoleID": 2,
"IsAccepted": true
},
{
"UserID": 1,
"ProjectID": 2,
"ProjectRoleID": 3,
"IsAccepted": true
}
]
},
{
"EmployeeID": "A123",
"FullName": "phantommm",
"UserRegistrationDate": "2015-07-10T00:00:00",
"LastActiveDate": "2015-07-10T00:00:00",
"UserProjects": [
{
"UserID": 2,
"ProjectID": 1,
"ProjectRoleID": 2,
"IsAccepted": true
}
]
}
]
But i'm getting the data in this format,
$scope.newuser=[
{
"EmployeeID": "A123",
"FullName": "phantommm",
"UserRegistrationDate": "2015-07-10T00:00:00",
"LastActiveDate": "2015-07-10T00:00:00",
"UserID": 1,
"ProjectID": 1,
"ProjectRoleID": 2,
"IsAccepted": true
},
{
"EmployeeID": "A12345",
"FullName": "phantommm123",
"UserRegistrationDate": "2015-07-10T00:00:00",
"LastActiveDate": "2015-07-10T00:00:00",
"UserID": 2,
"ProjectID": 1,
"ProjectRoleID": 3,
"IsAccepted": true
}
]
I'm Using this code for getting the data from form,
myapp.controller('mainController', function ($scope) {
$scope.submitForm = function() {
$scope.newuser = [];
$scope.submitted = true;
$scope.counter = 1;
$scope.counter++;
if ($scope.userForm.$valid) {
$scope.newuser.push({
UserID : $scope.counter,
EmployeeID : $scope.user.employeeid,
FullName : $scope.user.fname,
UserPassword : $scope.user.confirmPassword,
EmailID : $scope.user.email,
Mobile : $scope.user.phone,
SecurityQuestionID : $scope.user.secutyqquestn,
SecurityAnswer : $scope.user.secutyanswer,
id : $scope.counter,
ctpjct : $scope.user.curntpjct,
pos : $scope.user.positio
})
alert('Registration Succesfully Completed');
} else {
alert('Invalid Fields')
}
};
});

Laravel sort array by created_at

I need to sort my json array in chronological order by it's created_at timestamps.
[{
"id": 1,
"message": "hello",
"company_id": 7,
"investor_id": 35,
"match_id": 2,
"created_at": "2015-07-01 12:56:34",
"updated_at": "2015-07-01 12:56:34"
}, {
"id": 2,
"message": "helloWorld",
"company_id": 7,
"investor_id": 35,
"match_id": 2,
"created_at": "2015-07-01 12:56:53",
"updated_at": "2015-07-01 12:56:53"
}, {
"id": 3,
"message": "sup",
"company_id": 7,
"investor_id": 35,
"match_id": 2,
"created_at": "2015-07-01 13:12:53",
"updated_at": "2015-07-01 13:12:53"
}, {
"id": 4,
"message": "sup",
"company_id": 7,
"investor_id": 35,
"match_id": 2,
"created_at": "2015-07-01 13:13:04",
"updated_at": "2015-07-01 13:13:04"
}, {
"id": 5,
"message": "sup",
"company_id": 7,
"investor_id": 35,
"match_id": 2,
"created_at": "2015-07-01 15:06:39",
"updated_at": "2015-07-01 15:06:39"
}, {
"id": 1,
"message": "yo yo ",
"investor_id": 35,
"company_id": 7,
"match_id": 2,
"created_at": "2015-07-01 22:09:36",
"updated_at": "-0001-11-30 00:00:00"
}, {
"id": 2,
"message": "sup nigga",
"investor_id": 35,
"company_id": 7,
"match_id": 2,
"created_at": "2015-07-01 14:00:00",
"updated_at": "-0001-11-30 00:00:00"
}]
Can anyone teach me how do i have tried many solutions in stackoverflow . Many of them says array cannot be used with "sortBy" .
This is part of my code :
$companyMessage = Company_Message::where('match_id','=',$match_id);
$investorMessage = Investor_Message::where('match_id','=',$match_id);
$message = array();
if($companyMessage->count()>0 || $investorMessage->count() > 0){
if($lastActivityDate == null ){
//load all messages before
if($companyMessage !=null){
foreach ($companyMessage->get() as $cm) {
array_push($message,$cm);
}
}
if($investorMessage !=null){
foreach($investorMessage->get() as $im){
array_push($message,$im);
}
}
return $message ;
}
I think you can do this using use a laravel database collection api instead of array and add item to collection and use sortBy method on collection,
$col = new \Illuminate\Database\Eloquent\Collection();
if ($companyMessage != null) {
foreach($companyMessage - > get() as $cm) {
$col->add($cm);
}
}
if ($investorMessage != null) {
foreach($investorMessage - > get() as $im) {
$col->add($im);
}
}
$col = $col->sortBy('created_at');
//return the json
return Response::json($jsonArr->toArray());
--- OR ----
Try this but i didn't tested it. If this works then this would be the best way to do this.
$companyMessage = Company_Message::where('match_id','=',$match_id);
$investorMessage = Investor_Message::where('match_id','=',$match_id);
//$companyMessage & $investorMessage both are laravel database collection,
// so you can use merge method on collection to merge these two collections.
$allResults = $companyMessage->merge($investorMessage);
//use laravel collection sort method to sort the collection by created_at
$allResults = $allResults->sortBy('created_at');
//return the json
return Response::json($allResults->toArray());
if($companyMessage !=null){
foreach ($companyMessage->get() as $cm) {
array_push($message,$cm);
}
}
if($investorMessage !=null){
foreach($investorMessage->get() as $im){
array_push($message,$im);
}
}
$message = array_values(array_sort($message, function ($value) {
return $value['created_at'];
}));
Hey man , i found a better solution to sort my array. The answer can be found at laravel docs
http://laravel.com/docs/5.1/helpers#method-array-sort

How to pre load all locales into angular dynamic locale cache (tmhDynamicLocaleCache)

I am using angular dynamic locale (tmhDynamicLocale), but want all my locales to be pre loaded into the cache (tmhDynamicLocaleCache) when the app starts. The motivation behind this is to have all my resources bundled into 1 minified js file rather than the standard lazy loading. Is there a full example for this anywhere?
Solved it.
What i did was to put each locale into a module like so:
angular.module("myapp.locale.en", [
'tmh.dynamicLocale'
])
.run(['tmhDynamicLocaleCache', function (tmhDynamicLocaleCache) {
var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"};
function getDecimals(n) {
n = n + '';
var i = n.indexOf('.');
return (i == -1) ? 0 : n.length - i - 1;
};
function getVF(n, opt_precision) {
var v = opt_precision;
if (undefined === v) {
v = Math.min(getDecimals(n), 3);
}
var base = Math.pow(10, v);
var f = ((n * base) | 0) % base;
return {v: v, f: f};
};
tmhDynamicLocaleCache.put('en', {
"DATETIME_FORMATS": {
"AMPMS": [
"AM",
"PM"
],
"DAY": [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
"FIRSTDAYOFWEEK": 6,
"MONTH": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
"SHORTDAY": [
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
],
"SHORTMONTH": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"WEEKENDRANGE": [
5,
6
],
"fullDate": "EEEE, MMMM d, y",
"longDate": "MMMM d, y",
"medium": "MMM d, y h:mm:ss a",
"mediumDate": "MMM d, y",
"mediumTime": "h:mm:ss a",
"short": "M/d/yy h:mm a",
"shortDate": "M/d/yy",
"shortTime": "h:mm a"
},
"NUMBER_FORMATS": {
"CURRENCY_SYM": "$",
"DECIMAL_SEP": ".",
"GROUP_SEP": ",",
"PATTERNS": [
{
"gSize": 3,
"lgSize": 3,
"maxFrac": 3,
"minFrac": 0,
"minInt": 1,
"negPre": "-",
"negSuf": "",
"posPre": "",
"posSuf": ""
},
{
"gSize": 3,
"lgSize": 3,
"maxFrac": 2,
"minFrac": 2,
"minInt": 1,
"negPre": "\u00a4-",
"negSuf": "",
"posPre": "\u00a4",
"posSuf": ""
}
]
},
"id": "en",
"pluralCat": function (n, opt_precision) {
var i = n | 0;
var vf = getVF(n, opt_precision);
if (i == 1 && vf.v === 0) {
return PLURAL_CATEGORY.ONE;
}
return PLURAL_CATEGORY.OTHER;
}
});
}])
;
Create a module like this for each locale you use, just change "en" to "pt" or "he" etc (3 places in the code above).
Next load these modules into your app.js...
angular.module('myapp', [
'myapp.locale.en',
'myapp.locale.pt',
'myapp.locale.de',
'myapp.locale.he'
])
This way when .run() is called on each of these modules it will put the locale object into the tmhDynamicLocaleCache. Then when you later use tmhDynamicLocale.set('en') it will find the locale object in the cache and use it.

Resources