@@ -11,81 +11,49 @@ import {
1111 Modal ,
1212 InputElement ,
1313 Utils ,
14- Progressbar ,
1514 calcElementHeight
1615} from './common.js'
17- import './config.js'
1816
1917const $configuration = new Configuration ( ) ;
2018const $ElementManager = new ElementManager ( ) ;
2119const $style = new Style ( $configuration ) ;
2220const $i18n = new I18NManager ( ) ;
23- const $router = new Router ( "/pages " ) ;
21+ const $router = new Router ( "/" ) ;
2422const $modal = new Modal ( ) ;
2523const $title = document . title
26- const $progressbar = new Progressbar ( )
27- class SideMenu extends Element {
28- constructor ( ) {
29- super ( "aside" )
30- this . _menus = { }
31- this . _menuButtons = { }
32- $style . addAll ( {
33- "aside" : {
34- "width" : "220px" ,
35- "height" : "100%" ,
36- "padding-left" : "20px" ,
37- "background" : "var(--background)" ,
38- "overflow-y" : "auto" ,
39- "border-right" : "1px solid var(--color)" ,
40- "transform" : "translateX(0%)" ,
41- "transition" : "transform 150ms cubic-bezier(0.4, 0, 0.2, 1);"
42- } ,
43- "aside.hidden" : {
44- "transform" : "translateX(-100%)"
45- }
46- } )
47- //
48- }
49- // split "." for submenu
50- // the submenu doesn't have a icon
51- // but the parent must contain and then can add submenu
52- add ( name , icon , handler ) {
53- const [ main , submenu ] = name . split ( "." , 1 )
54- if ( ! this . _menus [ main ] ) {
55- this . _menus [ main ] = {
56- icon : null ,
57- handler : handler ,
58- submenu : { }
59- }
60- }
61- if ( submenu ) {
62- this . _menus [ main ] . submenu [ submenu ] = {
63- handler : handler
64- }
65- } else {
66- this . _menus [ main ] . handler = handler
67- }
68- }
69- renderButtons ( ) {
70- const buttons = [ ] ;
71- foreach ( k in this . _menus )
72- }
73- clear ( ) {
74-
75- }
76- toggle ( ) {
77- this . hasClasses ( "hidden" ) ? this . removeClasses ( "hidden" ) : this . classes ( "hidden" )
78- }
79- }
24+ $i18n . addLanguageTable ( "zh_CN" , {
25+ "footer.powered_by" : "由 %name% 提供服务支持" ,
26+ } )
8027$style . setTheme ( "light" , {
81- "main-color" : "#ffffff" ,
28+ "main-color-r" : "15" ,
29+ "main-color-g" : "198" ,
30+ "main-color-b" : "194" ,
31+ "main-color" : "rgb(15, 198, 194)" ,
32+ "main-light-color" : "rgb(23, 231, 229)" ,
8233 "color" : "#000000" ,
83- "background" : "#F5F6F8"
34+ "dark-color" : "#FFFFFF" ,
35+ "background" : "#F5F6F8" ,
36+ "footer-background" : "#F0F0F0" ,
37+ "background-hover" : "#F0F1F3" ,
38+ "main-dark-color" : "rgb(10, 157, 220)" ,
39+ "main-shadow-0-2-color" : "rgba(15, 198, 194, 0.2)" ,
40+ "main-shadow-0-1-color" : "rgba(15, 198, 194, 0.1)" ,
41+ "main-button-hover" : "rgb(10, 138, 135)" ,
8442} )
8543$style . setTheme ( "dark" , {
86- "main-color" : "#000000" ,
44+ "main-color-r" : "244" ,
45+ "main-color-g" : "209" ,
46+ "main-color-b" : "180" ,
47+ "main-color" : "rgb(244, 209, 180)" ,
48+ "main-light-color" : "rgb(255, 239, 210)" ,
8749 "color" : "#ffffff" ,
88- "background" : "#181818"
50+ "dark-color" : "#000000" ,
51+ "background" : "#181818" ,
52+ "footer-background" : "#202020" ,
53+ "background-hover" : "#202020" ,
54+ "main-dark-color" : "rgb(235, 187, 151)" ,
55+ "main-shadow-0-2-color" : "rgba(244, 209, 180, 0.2)" ,
56+ "main-shadow-0-1-color" : "rgba(244, 209, 180, 0.1)"
8957} )
9058$style . addAll ( {
9159 "::-webkit-scrollbar, html ::-webkit-scrollbar" : {
@@ -98,35 +66,40 @@ $style.addAll({
9866 "background-color" : "rgb(102, 102, 102)" ,
9967 "border-radius" : "10px" ,
10068 } ,
101- "body,html" : {
102- "margin" : "0" ,
103- "padding" : 0 ,
104- } ,
105- "*" : {
106- "box-sizing" : "border-box" ,
107- "font-family" : "Segoe UI, sans-serif"
108- } ,
10969 "body" : {
11070 "overflow" : "hidden"
11171 } ,
11272 ".app" : {
73+ "display" : "flex" ,
74+ "flex-direction" : "column" ,
75+ "flex-wrap" : "nowrap" ,
76+ "justify-content" : "space-between" ,
11377 "height" : "100vh" ,
11478 "width" : "100vw" ,
11579 "background" : "var(--background)" ,
116- "overflow-y" : "auto"
80+ "overflow-y" : "auto" ,
81+ "color" : "var(--color)"
82+ } ,
83+ "a" : {
84+ "color" : "var(--color)" ,
85+ "text-decoration" : "none"
86+ } ,
87+ "a:hover" : {
88+ "text-decoration" : "underline"
11789 } ,
11890 "header" : `
119- background-color : var(--background);
91+ background: var(--background);
12092 text-align: center;
12193 min-height: 56px;
12294 width: 100%;
123- padding: 8px;
124- position: fixed;
95+ padding: 8px 8px 8px 8px;
12596 z-index: 1;
12697 display: flex;
12798 align-items: center;
12899 flex-wrap: nowrap;
129- justify-content: space-between
100+ justify-content: space-between;
101+ color: var(--color);
102+ fill: var(--color);
130103 ` ,
131104 "header .content" : {
132105 "display" : "flex" ,
@@ -136,71 +109,125 @@ $style.addAll({
136109 "width" : "48px" ,
137110 "height" : "48px" ,
138111 "padding" : "8px" ,
139- "cursor" : "pointer"
112+ "cursor" : "pointer" ,
113+ "fill" : "inherit"
140114 } ,
141- "h1,h2,h3,h4,h5,h6" : "margin:0;color:var(--color)" ,
115+ "header .padding-left" : {
116+ "padding-left" : "8px" ,
117+ } ,
118+ "h1,h2,h3,h4,h5,h6,p" : "margin:0;color:inherit" ,
142119 "svg" : {
143- "fill" : "var(--color)"
120+ "fill" : "inherit"
121+ } ,
122+ "main" : {
123+ "top" : "56px" ,
124+ //"overflow": "auto"
125+ } ,
126+ "header.hidden" : {
127+ "display" : "none"
128+ } ,
129+ "header.hidden ~ main" : {
130+ "top" : "0px"
144131 } ,
145- "container" : {
146- "position" : "relative" ,
147- "top" : "64px" ,
132+ "footer" : {
133+ "padding" : "24px" ,
134+ "flex-direction" : "column" ,
135+ "background" : "var(--footer-background)" ,
136+ "color" : "var(--color)" ,
148137 "display" : "flex" ,
149- "flex-direction" : "row" ,
150- "flex-wrap" : "nowrap" ,
138+ "align-items" : "center" ,
139+ "justify-content" : "center"
140+ } ,
141+ "header .auth.disabled *" : {
142+ "cursor" : "not-allowed"
151143 } ,
152- "main" : {
153- }
154144} )
155- function load ( ) {
145+
146+ async function load ( ) {
156147 const $dom_body = new Element ( document . body ) ;
148+ const $main = createElement ( "main" )
157149
158150 const $app = createElement ( "div" ) . classes ( "app" )
151+
159152 const $header = createElement ( "header" )
160153 const $theme = {
161154 sun : SVGContainers . sun ,
162155 moon : SVGContainers . moon
163156 }
157+ const $theme_change = createElement ( "div" ) . append (
158+ $theme [ $configuration . get ( "theme" ) == "light" ? "moon" : "sun" ]
159+ )
160+ const $header_content_left = createElement ( "div" ) . classes ( "content" , "padding-left" ) . append (
161+ createElement ( "h3" ) . text ( $title )
162+ ) ;
163+ const $header_content_right = createElement ( "div" ) . classes ( "content" ) . append (
164+ $theme_change
165+ ) ;
166+ const $footer = createElement ( "footer" ) . append (
167+ createElement ( "p" ) . i18n (
168+ "footer.powered_by"
169+ ) . t18n ( {
170+ "name" : createElement ( "a" ) . text (
171+ "tianxiu2b2t"
172+ ) . attributes ( {
173+ "href" : "https://github.com/tianxiu2b2t" ,
174+ "target" : "_blank"
175+ } )
176+ } )
177+ )
178+
179+ globalThis . $app = $app ;
180+
164181 for ( const $theme_key in $theme ) {
165182 $theme [ $theme_key ] . addEventListener ( "click" , ( ) => {
166- $header_content_left . children [ 0 ] . removeChild ( $theme [ $theme_key ] ) ;
183+ $theme_change . removeChild ( $theme [ $theme_key ] ) ;
167184 $style . applyTheme ( $theme_key == "sun" ? "light" : "dark" ) ;
168- $header_content_left . children [ 0 ] . append ( $theme [ $theme_key == "sun" ? "moon" : "sun" ] ) ;
185+ $theme_change . append ( $theme [ $theme_key == "sun" ? "moon" : "sun" ] ) ;
169186 $configuration . set ( "theme" , $theme_key == "sun" ? "light" : "dark" ) ;
170187 } )
171188 }
172- const $header_content_left = createElement ( "div" ) . classes ( "content" ) . append (
173- createElement ( "div" ) . append (
174- SVGContainers . menu . addEventListener ( "click" , ( ) => {
175- $aside . toggle ( ) ;
176- } ) ,
177- $theme [ $configuration . get ( "theme" ) == "light" ? "moon" : "sun" ]
178- ) ,
179- createElement ( "h3" ) . text ( "Python OpenBMCLAPI Dashboard" )
180- ) ;
181- const $header_content_right = createElement ( "div" ) ;
182- $header . append ( $header_content_left , $header_content_right ) ;
183189
184- const $container = createElement ( "container" ) ;
185- const $main = createElement ( "main" ) ;
186- const $aside = new SideMenu ( )
190+ $header . append ( $header_content_left , $header_content_right ) ;
187191
188- $app . append ( $progressbar , $header , $container . append (
189- $aside ,
190- $main
191- ) ) ;
192+ $app . append (
193+ createElement ( "container" ) . append (
194+ $header ,
195+ $main ,
196+ ) ,
197+ $footer
198+ ) ;
192199
193200 $dom_body . appendBefore ( $app ) ;
194201
202+ $router . on ( "/" , ( ) => {
203+ $main . append (
204+ createElement ( "h1" ) . append ( createElement ( "span" ) . text ( "哎哟喂!此页面还没有开发完成欸……" ) ) ,
205+ createElement ( "h1" ) . append ( createElement ( "span" ) . text ( "或许你可以拥抱一下我们的电脑老师?" ) )
206+ )
207+ } )
208+
209+ $router . before_handler ( ( ) => {
210+ $header . removeAllClasses ( )
211+ $main . getClasses
212+ while ( $main . firstChild != null ) {
213+ $main . removeChild ( $main . firstChild )
214+ }
215+ } )
216+
217+ $router . init ( )
195218 const observer = new ResizeObserver ( ( ..._ ) => {
196219 var header = calcElementHeight ( $header )
197220 var height = window . innerHeight - header
198- $container . style ( "height" , `${ height } px` )
221+ $main . style ( "height" , "auto" )
222+ var main = calcElementHeight ( $main )
223+ var height = Math . max ( height , main )
224+ $main . style ( "height" , `${ height } px` )
199225 } ) ;
200226 observer . observe ( $app . origin , { childList : true , subtree : true } ) ;
227+
201228}
202- window . addEventListener ( "DOMContentLoaded" , ( ) => {
203- load ( )
229+ window . addEventListener ( "DOMContentLoaded" , async ( ) => {
230+ await load ( )
204231 Array . from ( document . getElementsByClassName ( "preloader" ) ) . forEach ( e => {
205232 const element = new Element ( e ) ;
206233 requestAnimationFrame ( ( ) => {
0 commit comments