// import { SechduleService } from './sechdule.service';
import { Component, OnInit, ElementRef } from '@angular/core';
import { Gantt, ProjectModel, Panel, WidgetHelper, CrudManager, GlobalEvents, Toast, DomHelper } from 'bryntum-gantt';
import ganttToolbar from './ganttToolbar';
import { Renderer2 } from '@angular/core';
import ganttConfig from './ganttConfig';
import Task from './Task.js';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'AngularBrytum';
private elementRef: ElementRef;
constructor(element: ElementRef, private render: Renderer2) {
this.elementRef = element;
}
async ngOnInit() {
//let info = await this.service.loadWbsData('BkO0wRXI4');
const project = new ProjectModel({
autoLoad: true,
transport: {
load: {
method: 'GET',
disableCaching: false,
url: 'https://localhost:8028/ganttServer/load.php',
paramName: 'q'
},
sync: {
url: 'https://localhost:8028/ganttServer/sync.php'
}
}
// tasksData: info.data.tasks.rows,
// resourcesData: info.data.resources.rows,
// assignmentsData: info.data.assignments.rows,
// dependenciesData: info.data.dependencies.rows,
});
// For View Present Check https://www.bryntum.com/docs/gantt/#Scheduler/preset/PresetManager
//weekAndMonth weekDateAndMonth monthAndYear year
const gantt = new Gantt({
project: project,
...ganttConfig,
viewPreset: 'weekAndMonth',
});
const panel = new Panel({
appendTo: this.elementRef.nativeElement.firstElementChild,
widgets: [
gantt
],
tbar: {
items: [
ganttToolbar(gantt),
{
type: 'widget',
cls: 'label-theme',
// html: 'select Theme:'
},
{
type: 'buttonGroup',
items: ['Summarize Data', 'Schedule Check', 'Resource Monthly Spread', 'Upload'].map(name => {
return {
type: 'button',
id: name.toLowerCase(),
color: 'b-blue',
text: name,
onAction({ source: button }) {
WidgetHelper.toast('No Operation For Now Just for Demo Purpose');
}
};
})
},
{
type: 'buttonGroup',
items: ['Stockholm', 'Light', 'Dark', 'Material', 'Default'].map(name => {
return {
type: 'button',
id: name.toLowerCase(),
color: 'b-blue',
text: name,
pressed: DomHelper.themeInfo.name === name,
enableToggle: true,
toggleGroup: 'theme',
onAction({ source: button }) {
DomHelper.setTheme(button.text.toLowerCase());
}
};
})
}
]
},
});
GlobalEvents.on({
theme: function theme(themeChangeEvent) {
WidgetHelper.getById(themeChangeEvent.theme).pressed = true;
}
});
// project.load().then(() => {
// console.log('Project Loaded')
// });
}
}
Support Forum
Here is the code
Last edited by rahulranjan on Mon May 20, 2019 11:32 am, edited 1 time in total.
You ask about the same thing in a different way in different topics. Duplicated: viewtopic.php?f=52&t=11180
Pavlo Miklashevych
Sr. Frontend Developer