2021-06-25 13:55:49 +00:00
< template >
2021-08-10 07:02:46 +00:00
< div :class = "classes" >
2021-08-08 05:47:29 +00:00
< div v-if = "! $root.socket.connected && ! $root.socket.firstConnect" class="lost-connection" >
< div class = "container-fluid" >
{ { $root . connectionErrorMsg } }
2022-03-22 15:46:13 +00:00
< div v-if = "$root.showReverseProxyGuide" >
2022-04-29 12:17:15 +00:00
{ { $t ( "Using a Reverse Proxy?" ) } } < a href = "https://github.com/louislam/uptime-kuma/wiki/Reverse-Proxy" target = "_blank" > { { $t ( "Check how to config it for WebSocket" ) } } < / a >
2022-03-22 15:46:13 +00:00
< / div >
2021-08-08 05:47:29 +00:00
< / div >
2021-06-25 13:55:49 +00:00
< / div >
2021-08-08 05:47:29 +00:00
<!-- Desktop header -- >
< header v-if = "! $root.isMobile" class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom" >
< router-link to = "/dashboard" class = "d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none" >
2021-08-24 15:38:25 +00:00
< object class = "bi me-2 ms-4" width = "40" height = "40" data = "/icon.svg" / >
2021-09-26 15:19:39 +00:00
< span class = "fs-4 title" > { { $t ( "Uptime Kuma" ) } } < / span >
2021-08-08 05:47:29 +00:00
< / router-link >
2021-08-21 11:50:22 +00:00
< a v-if = "hasNewVersion" target="_blank" href="https://github.com/louislam/uptime-kuma/releases" class="btn btn-info me-3" >
2021-08-24 08:44:58 +00:00
< font-awesome-icon icon = "arrow-alt-circle-up" / > { { $t ( "New Update" ) } }
2021-08-21 11:50:22 +00:00
< / a >
2021-08-08 05:47:29 +00:00
< ul class = "nav nav-pills" >
2022-03-18 06:14:22 +00:00
< li v-if = "$root.loggedIn" class="nav-item me-2" >
2022-03-10 13:34:30 +00:00
< router-link to = "/manage-status-page" class = "nav-link" >
< font-awesome-icon icon = "stream" / > { { $t ( "Status Pages" ) } }
< / router-link >
2021-09-11 11:40:03 +00:00
< / li >
2021-10-01 13:12:37 +00:00
< li v-if = "$root.loggedIn" class="nav-item me-2" >
2021-08-08 05:47:29 +00:00
< router-link to = "/dashboard" class = "nav-link" >
2021-08-24 08:44:58 +00:00
< font-awesome-icon icon = "tachometer-alt" / > { { $t ( "Dashboard" ) } }
2021-08-08 05:47:29 +00:00
< / router-link >
< / li >
2022-04-18 16:39:49 +00:00
< li v-if = "$root.loggedIn" class="nav-item" >
< div class = "dropdown dropdown-profile-pic" >
2022-05-06 06:52:09 +00:00
< div class = "nav-link" data -bs -toggle = " dropdown " >
2022-04-19 11:40:28 +00:00
< div class = "profile-pic" > { { $root . usernameFirstChar } } < / div >
2022-04-18 16:39:49 +00:00
< font-awesome-icon icon = "angle-down" / >
< / div >
< ul class = "dropdown-menu" >
2022-04-20 07:01:13 +00:00
< li >
2022-04-20 07:09:31 +00:00
< i18n-t v-if = "$root.username != null" tag="span" keypath="signedInDisp" class="dropdown-item-text" >
< strong > { { $root . username } } < / strong >
< / i18n-t >
< span v-if = "$root.username == null" class="dropdown-item-text" > {{ $ t ( " signedInDispDisabled " ) }} < / span >
2022-04-20 07:01:13 +00:00
< / li >
2022-04-18 16:39:49 +00:00
< li > < hr class = "dropdown-divider" > < / li >
< li >
< router-link to = "/settings" class = "dropdown-item" : class = "{ active: $route.path.includes('settings') }" >
< font-awesome-icon icon = "cog" / > { { $t ( "Settings" ) } }
< / router-link >
< / li >
2022-04-20 14:39:07 +00:00
< li v-if = "$root.loggedIn && $root.socket.token !== 'autoLogin'" >
2022-04-18 16:39:49 +00:00
< button class = "dropdown-item" @click ="$root.logout" >
< font-awesome-icon icon = "sign-out-alt" / >
{ { $t ( "Logout" ) } }
< / button >
< / li >
< / ul >
< / div >
2022-01-27 19:45:31 +00:00
< / li >
2021-08-08 05:47:29 +00:00
< / ul >
< / header >
<!-- Mobile header -- >
< header v -else class = "d-flex flex-wrap justify-content-center pt-2 pb-2 mb-3" >
< router-link to = "/dashboard" class = "d-flex align-items-center text-dark text-decoration-none" >
< object class = "bi" width = "40" height = "40" data = "/icon.svg" / >
< span class = "fs-4 title ms-2" > Uptime Kuma < / span >
< / router-link >
< / header >
< main >
2022-05-01 09:31:58 +00:00
< router-view v-if = "$root.loggedIn" / >
2021-08-08 05:47:29 +00:00
< Login v-if = "! $root.loggedIn && $root.allowLoginDialog" / >
< / main >
<!-- Mobile Only -- >
2021-08-24 15:38:25 +00:00
< div v-if = "$root.isMobile" style="width: 100%; height: 60px;" / >
2021-08-08 05:47:29 +00:00
< nav v-if = "$root.isMobile" class="bottom-nav" >
2021-08-19 10:12:52 +00:00
< router-link to = "/dashboard" class = "nav-link" >
2021-08-08 05:47:29 +00:00
< div > < font-awesome-icon icon = "tachometer-alt" / > < / div >
2021-08-24 08:44:58 +00:00
{ { $t ( "Dashboard" ) } }
2021-08-08 05:47:29 +00:00
< / router-link >
2021-08-19 10:12:52 +00:00
< router-link to = "/list" class = "nav-link" >
2021-08-08 05:47:29 +00:00
< div > < font-awesome-icon icon = "list" / > < / div >
2021-08-24 10:26:44 +00:00
{ { $t ( "List" ) } }
2021-08-19 10:12:52 +00:00
< / router-link >
2021-08-08 05:47:29 +00:00
2021-08-19 10:12:52 +00:00
< router-link to = "/add" class = "nav-link" >
2021-08-08 05:47:29 +00:00
< div > < font-awesome-icon icon = "plus" / > < / div >
2021-08-24 10:26:44 +00:00
{ { $t ( "Add" ) } }
2021-08-08 05:47:29 +00:00
< / router-link >
2021-08-19 10:12:52 +00:00
< router-link to = "/settings" class = "nav-link" >
2021-08-08 05:47:29 +00:00
< div > < font-awesome-icon icon = "cog" / > < / div >
2021-08-24 08:44:58 +00:00
{ { $t ( "Settings" ) } }
2021-08-08 05:47:29 +00:00
< / router-link >
< / nav >
< / div >
2021-06-25 13:55:49 +00:00
< / template >
< script >
import Login from "../components/Login.vue" ;
2021-08-21 11:50:22 +00:00
import compareVersions from "compare-versions" ;
2021-06-25 13:55:49 +00:00
export default {
2021-08-10 07:02:46 +00:00
2021-06-25 13:55:49 +00:00
components : {
2021-07-27 17:47:13 +00:00
Login ,
2021-07-11 07:23:28 +00:00
} ,
2021-08-10 07:02:46 +00:00
2021-07-11 07:23:28 +00:00
data ( ) {
2021-09-22 10:05:40 +00:00
return { } ;
2021-06-25 13:55:49 +00:00
} ,
2021-08-10 07:02:46 +00:00
computed : {
// Theme or Mobile
classes ( ) {
const classes = { } ;
classes [ this . $root . theme ] = true ;
classes [ "mobile" ] = this . $root . isMobile ;
return classes ;
2021-08-21 11:50:22 +00:00
} ,
hasNewVersion ( ) {
if ( this . $root . info . latestVersion && this . $root . info . version ) {
return compareVersions ( this . $root . info . latestVersion , this . $root . info . version ) >= 1 ;
} else {
return false ;
}
} ,
2021-08-10 07:02:46 +00:00
} ,
2021-06-25 13:55:49 +00:00
watch : {
2021-09-23 05:57:24 +00:00
2021-07-27 17:47:13 +00:00
} ,
2021-08-10 07:02:46 +00:00
2021-07-27 17:47:13 +00:00
mounted ( ) {
2021-09-23 05:57:24 +00:00
2021-06-25 13:55:49 +00:00
} ,
2021-08-10 07:02:46 +00:00
2021-06-25 13:55:49 +00:00
methods : {
2021-09-15 12:40:26 +00:00
2021-07-27 17:47:13 +00:00
} ,
2021-08-10 07:02:46 +00:00
2021-09-22 10:05:40 +00:00
} ;
2021-06-25 13:55:49 +00:00
< / script >
2021-08-08 05:47:29 +00:00
< style lang = "scss" scoped >
2021-07-11 07:23:28 +00:00
@ import "../assets/vars.scss" ;
2021-06-25 13:55:49 +00:00
2021-09-11 11:40:03 +00:00
. nav - link {
& . status - page {
background - color : rgba ( 255 , 255 , 255 , 0.1 ) ;
}
}
2021-07-11 07:23:28 +00:00
. bottom - nav {
z - index : 1000 ;
position : fixed ;
bottom : 0 ;
height : 60 px ;
width : 100 % ;
left : 0 ;
2021-07-13 04:16:11 +00:00
background - color : # fff ;
2021-07-11 07:23:28 +00:00
box - shadow : 0 15 px 47 px 0 rgba ( 0 , 0 , 0 , 0.05 ) , 0 5 px 14 px 0 rgba ( 0 , 0 , 0 , 0.05 ) ;
text - align : center ;
white - space : nowrap ;
2021-07-27 08:52:44 +00:00
padding : 0 10 px ;
2021-06-25 13:55:49 +00:00
2022-04-18 16:39:49 +00:00
a {
2021-07-11 07:23:28 +00:00
text - align : center ;
2022-04-18 16:39:49 +00:00
width : 25 % ;
2021-07-11 07:23:28 +00:00
display : inline - block ;
height : 100 % ;
padding : 8 px 10 px 0 ;
font - size : 13 px ;
color : # c1c1c1 ;
overflow : hidden ;
text - decoration : none ;
2021-06-30 13:04:58 +00:00
2022-03-04 15:20:42 +00:00
& . router - link - exact - active , & . active {
2021-07-11 07:23:28 +00:00
color : $primary ;
font - weight : bold ;
}
div {
font - size : 20 px ;
}
2021-06-30 13:04:58 +00:00
}
2021-07-11 07:23:28 +00:00
}
2021-08-08 17:58:56 +00:00
main {
2021-08-24 15:38:25 +00:00
min - height : calc ( 100 vh - 160 px ) ;
2021-08-08 17:58:56 +00:00
}
2021-07-11 07:23:28 +00:00
. title {
font - weight : bold ;
}
. nav {
margin - right : 25 px ;
}
. lost - connection {
padding : 5 px ;
background - color : crimson ;
color : white ;
2022-03-22 15:46:13 +00:00
position : fixed ;
width : 100 % ;
2022-03-31 08:15:34 +00:00
z - index : 99999 ;
2021-07-11 07:23:28 +00:00
}
2022-04-18 16:39:49 +00:00
// Profile Pic Button with Dropdown
. dropdown - profile - pic {
user - select : none ;
. nav - link {
cursor : pointer ;
display : flex ;
gap : 6 px ;
align - items : center ;
background - color : rgba ( 200 , 200 , 200 , 0.2 ) ;
padding : 0.5 rem 0.8 rem ;
& : hover {
background - color : rgba ( 255 , 255 , 255 , 0.2 ) ;
}
}
. dropdown - menu {
transition : all 0.2 s ;
padding - left : 0 ;
2022-04-20 14:39:07 +00:00
padding - bottom : 0 ;
2022-04-19 11:46:21 +00:00
margin - top : 8 px ! important ;
2022-04-20 14:39:07 +00:00
border - radius : 16 px ;
overflow : hidden ;
2022-04-18 16:39:49 +00:00
. dropdown - divider {
margin : 0 ;
border - top : 1 px solid rgba ( 0 , 0 , 0 , 0.4 ) ;
background - color : transparent ;
}
. dropdown - item - text {
font - size : 14 px ;
padding - bottom : 0.7 rem ;
}
. dropdown - item {
padding : 0.7 rem 1 rem ;
}
. dark & {
background - color : $dark - bg ;
color : $dark - font - color ;
border - color : $dark - border - color ;
. dropdown - item {
color : $dark - font - color ;
& . active {
color : $dark - font - color2 ;
background - color : $highlight ! important ;
}
& : hover {
background - color : $dark - bg2 ;
}
}
}
}
. profile - pic {
display : flex ;
align - items : center ;
justify - content : center ;
color : white ;
background - color : $primary ;
width : 24 px ;
height : 24 px ;
margin - right : 5 px ;
border - radius : 50 rem ;
font - weight : bold ;
font - size : 10 px ;
}
}
2021-08-08 05:47:29 +00:00
. dark {
header {
2021-10-20 10:54:20 +00:00
background - color : $dark - header - bg ;
border - bottom - color : $dark - header - bg ! important ;
2021-08-08 05:47:29 +00:00
span {
2021-08-24 15:38:25 +00:00
color : # f0f6fc ;
2021-08-08 05:47:29 +00:00
}
}
. bottom - nav {
background - color : $dark - bg ;
}
}
2021-06-25 13:55:49 +00:00
< / style >