Skip to content

Commit 6e19b34

Browse files
DokyeongyunDokyeongyun
committed
UI/UX: Add monitoring history pagination UI
1 parent b128c35 commit 6e19b34

File tree

3 files changed

+84
-16
lines changed

3 files changed

+84
-16
lines changed

‎src/main/java/root/javafx/Controller/MonitoringAPController.java‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,13 @@
2020
import javafx.scene.control.Alert.AlertType;
2121
import javafx.scene.control.DatePicker;
2222
import javafx.scene.control.Label;
23+
import javafx.scene.control.Pagination;
2324
import javafx.scene.control.TableCell;
2425
import javafx.scene.control.TableColumn;
2526
import javafx.scene.control.TableView;
2627
import javafx.scene.control.cell.PropertyValueFactory;
2728
import javafx.scene.layout.AnchorPane;
29+
import javafx.scene.layout.BorderPane;
2830
import root.core.domain.MonitoringResult;
2931
import root.core.domain.enums.UsageUIType;
3032
import root.core.repository.constracts.PropertyRepository;
@@ -37,7 +39,7 @@
3739
import root.utils.AlertUtils;
3840
import root.utils.UnitUtils.FileSize;
3941

40-
public class MonitoringAPController<T extends MonitoringResult> extends AnchorPane {
42+
public class MonitoringAPController<T extends MonitoringResult> extends BorderPane {
4143

4244
private ReportUsecase reportUsecase;
4345

@@ -60,6 +62,9 @@ public class MonitoringAPController<T extends MonitoringResult> extends AnchorPa
6062

6163
@FXML
6264
DatePicker inquiryDatePicker;
65+
66+
@FXML
67+
Pagination pagination;
6368

6469
private Class<T> clazz;
6570

‎src/main/resources/css/pagination.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.pagination {
2+
-fx-page-information-visible: false; /* Hide below label */
3+
}
4+
5+
/* Remove spacing */
6+
.pagination>.pagination-control>.control-box {
7+
-fx-spacing: 1;
8+
-fx-font-size: 13px;
9+
-fx-font-family: "NanumGothic";
10+
}
11+
12+
/* Buttons */
13+
.pagination>.pagination-control>.control-box>.number-button,
14+
.pagination>.pagination-control>.control-box>.bullet-button,
15+
.pagination>.pagination-control>.control-box>.left-arrow-button,
16+
.pagination>.pagination-control>.control-box>.right-arrow-button
17+
{
18+
-fx-background-insets: 0, 0.5;
19+
-fx-background-color: lightgray, #FAFAFA;
20+
-fx-min-width: 28;
21+
-fx-min-height: 28;
22+
}
23+
24+
/* Colors on hover */
25+
.pagination>.pagination-control>.control-box>.number-button:hover,
26+
.pagination>.pagination-control>.control-box>.bullet-button:hover,
27+
.pagination>.pagination-control>.control-box>.left-arrow-button:hover,
28+
.pagination>.pagination-control>.control-box>.right-arrow-button:hover
29+
{
30+
-fx-background-insets: 0;
31+
-fx-background-color: lightgray;
32+
}
33+
34+
/* Selected toggle color */
35+
.pagination>.pagination-control>.control-box>.number-button:selected,
36+
.pagination>.pagination-control>.control-box>.bullet-button:selected
37+
{
38+
-fx-background-insets: 0;
39+
-fx-background-color: #01077e;
40+
-fx-text-fill: white;
41+
}

‎src/main/resources/fxml/MonitoringAP.fxml‎

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,31 @@
77
<?import javafx.geometry.Insets?>
88
<?import javafx.scene.control.DatePicker?>
99
<?import javafx.scene.control.Label?>
10+
<?import javafx.scene.control.Pagination?>
1011
<?import javafx.scene.control.Separator?>
1112
<?import javafx.scene.control.TableView?>
1213
<?import javafx.scene.control.ToolBar?>
1314
<?import javafx.scene.layout.AnchorPane?>
15+
<?import javafx.scene.layout.BorderPane?>
1416

15-
<fx:root style="-fx-background-color: white;" stylesheets="@../css/javaFx.css" type="AnchorPane" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1">
16-
<children>
17-
<AnchorPane AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
17+
18+
<fx:root stylesheets="@../css/javaFx.css" type="BorderPane" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1">
19+
<center>
20+
<AnchorPane style="-fx-background-color: white;" stylesheets="@../css/javaFx.css">
21+
<children>
22+
<TableView fx:id="monitoringResultTV" layoutX="10.0" style="-fx-background-color: #ffffff00;" styleClass="basic-font" stylesheets="@../css/javaFx.css" tableMenuButtonVisible="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
23+
<columnResizePolicy>
24+
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
25+
</columnResizePolicy>
26+
</TableView>
27+
</children>
28+
<padding>
29+
<Insets left="10.0" right="10.0" />
30+
</padding>
31+
</AnchorPane>
32+
</center>
33+
<top>
34+
<AnchorPane BorderPane.alignment="CENTER">
1835
<children>
1936
<ToolBar nodeOrientation="LEFT_TO_RIGHT" style="-fx-background-color: #ffffff00;" AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="5.0">
2037
<items>
@@ -37,15 +54,18 @@
3754
<JFXButton fx:id="refreshBtn" minHeight="20.0" onAction="#refresh" styleClass="basic-font" text="새로고침">
3855
<graphic>
3956
<FontAwesomeIconView fill="#3342cf" glyphName="REFRESH" size="18" />
40-
</graphic></JFXButton>
57+
</graphic>
58+
</JFXButton>
4159
<JFXButton fx:id="excelDownBtn" minHeight="20.0" styleClass="basic-font" text="엑셀다운로드">
4260
<graphic>
4361
<FontAwesomeIconView fill="#3342cf" glyphName="FILE_TEXT_ALT" size="18" />
44-
</graphic></JFXButton>
62+
</graphic>
63+
</JFXButton>
4564
<JFXButton fx:id="showGraphBtn" minHeight="20.0" styleClass="basic-font" text="그래프보기">
4665
<graphic>
4766
<FontAwesomeIconView fill="#3342cf" glyphName="BAR_CHART_ALT" size="18" />
48-
</graphic></JFXButton>
67+
</graphic>
68+
</JFXButton>
4969
<FontAwesomeIconView fill="#3342cf" glyphName="SAVE" size="18" />
5070
<JFXComboBox fx:id="unitComboBox" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" promptText="단위설정">
5171
<opaqueInsets>
@@ -64,14 +84,16 @@
6484
</ToolBar>
6585
<Separator AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" />
6686
</children>
87+
<padding>
88+
<Insets left="10.0" right="10.0" />
89+
</padding>
90+
</AnchorPane>
91+
</top>
92+
<bottom>
93+
<AnchorPane BorderPane.alignment="CENTER">
94+
<children>
95+
<Pagination fx:id="pagination" maxPageIndicatorCount="5" stylesheets="@../css/pagination.css" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
96+
</children>
6797
</AnchorPane>
68-
<TableView fx:id="monitoringResultTV" style="-fx-background-color: #ffffff00;" styleClass="basic-font" stylesheets="@../css/javaFx.css" tableMenuButtonVisible="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="40.0">
69-
<columnResizePolicy>
70-
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
71-
</columnResizePolicy>
72-
</TableView>
73-
</children>
74-
<padding>
75-
<Insets bottom="10.0" left="10.0" right="10.0" />
76-
</padding>
98+
</bottom>
7799
</fx:root>

0 commit comments

Comments
 (0)