// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Customize table header
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Table Component configuration
// Type: Table
//
// This is the main selector when customizing
// a table component. It identifies the
// sub-components that will be addressed in the
// CSS customization. In the Table Component, it
// is possible to customize the view, controller
// and adapter using CSS.
//
// List of available properties:
// - view: boolean
// - interactor: boolean
// - adapter: boolean
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Table {
  view: true;
  interactor: true;
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Table View configuration
// Type: View
//
// The following list shows all possible properties for
// the table component.
// This configuration is set in the IlpTableView.
//
// List of available properties:
// - background: Color
// - gridColor: Color
// - showGrid: boolean
// - showHorizontalLines: boolean
// - showVerticalLines: boolean
// - rowMargin: int
// - columnMargin: int
// - fixedColumnCount: int
// - autoResizeMode: IlpTableResizeMode
// - selectionMode: IlpTableSelectionMode
// - reorderingAllowed: boolean
// - headerRenderer: IlpTableHeaderRenderer
// - defaultRenderer: IlpTableCellRenderer
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
View {
  reorderingAllowed : true;
  // Disable auto-resize mode
  autoResizeMode : AUTO_RESIZE_OFF;
  // Set selection mode: allow multiple selected objects
  // Note that this is also the default. See <code>IlpTableSelectionMode</code> for other options
  selectionMode : MULTIPLE_OBJECTS_SELECTION;
  showGrid: false;
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Table Controller configuration
// Type: Interactor
//
// The Table Controller provides two different
// interactors for the table. The first one handles
// view events and is configured using property
// viewInteractor. The second one can handle events
// in the table header and is configured using
// property headerInteractor.
//
// You can override the default interactors and
// customize the new interactors to define actions
// associated to gestures or keystrokes. It is
// also possible to configure a pop-up menu factory.
// All these properties are customized using the
// bean support provided by the CSS customization
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Interactor {
  headerInteractor: @=headerInt;
  viewInteractor: @=viewInt;
}

#headerInt {
  class: 'ilog.cpl.table.interactor.IlpDefaultTableHeaderInteractor';
  popupMenuFactory: @=headerPopupMenuFactory;
}

#headerPopupMenuFactory {
  class: 'ilog.cpl.table.IlpDefaultTableHeaderMenuFactory';
  sortAttributes: true;
}

#viewInt {
  class: 'ilog.cpl.table.interactor.IlpDefaultTableViewInteractor';
  popupMenuFactory: @=viewPopupMenuFactory;
  action[0]: @=viewAction0;
}

#viewPopupMenuFactory {
  class: 'alarm.AlarmPopupMenuFactory';
}

#viewAction0 {
  class: 'ilog.cpl.interactor.IlpGestureAction';
  gesture: BUTTON1_DOUBLE_CLICKED;
  action: @=showDetailsAction;
}

#showDetailsAction {
  class: 'alarm.ShowDetailsAction';
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Customize the Table Columns
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

attribute."ilog.tgo.model.IltAlarm/ackTime" {
  preferredWidth: 180;
}
attribute."ilog.tgo.model.IltAlarm/alarmClearedTime" {
  preferredWidth: 180;
}
attribute."ilog.tgo.model.IltAlarm/alarmChangedTime" {
  preferredWidth: 180;
}
attribute."ilog.tgo.model.IltAlarm/alarmRaisedTime" {
  preferredWidth: 180;
}
attribute."ilog.tgo.model.IltAlarm/alarmAckState" {
  label: Ack;
  preferredWidth: 30;
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Customize the Table Cells
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// Auxiliary values for date format
#labelDateFormat {
  class: 'ilog.cpl.util.text.IlpSimpleDateFormat';
  pattern: "HH:mm:ss z";
}
#toolTipDateFormat {
  class: 'ilog.cpl.util.text.IlpSimpleDateFormat';
  pattern: "EEE, MMM d, yyyy - HH:mm:ss z";
}

object."ilog.tgo.model.IltAlarm/ackTime"[ackTime] {
  label: '@|format(@=labelDateFormat, @ackTime)';
  toolTipText: '@|format(@=toolTipDateFormat, @ackTime)';
}
object."ilog.tgo.model.IltAlarm/alarmClearedTime"[alarmClearedTime] {
  label: '@|format(@=labelDateFormat, @alarmClearedTime)';
  toolTipText: '@|format(@=toolTipDateFormat, @alarmClearedTime)';
}
object."ilog.tgo.model.IltAlarm/alarmChangedTime"[alarmChangedTime] {
  label: '@|format(@=labelDateFormat, @alarmChangedTime)';
  toolTipText: '@|format(@=toolTipDateFormat, @alarmChangedTime)';
}
object."ilog.tgo.model.IltAlarm/alarmRaisedTime"[alarmRaisedTime] {
  label: '@|format(@=labelDateFormat, @alarmRaisedTime)';
  toolTipText: '@|format(@=toolTipDateFormat, @alarmRaisedTime)';
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Use a check mark to represent the acknowledged state
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
object."ilog.tgo.model.IltAlarm/alarmAckState" {
  labelVisible: false;
  iconVisible: false;
  icon: '@|image("ilog/tgo/check.png")';
  horizontalAlignment: Center;
}
object."ilog.tgo.model.IltAlarm/alarmAckState"[alarmAckState=true] {
  toolTipText: "Acknowledged";
  iconVisible: true;
}
object."ilog.tgo.model.IltAlarm/alarmAckState"[alarmAckState=false] {
  toolTipText: "Not Acknowledged";
}