diff --git a/app/app.R b/app/app.R index 5e36f1d..01a2b55 100644 --- a/app/app.R +++ b/app/app.R @@ -21,9 +21,10 @@ ui <- fluidPage( column(12, navbarPage("", tabPanel(a("TakeCareApp",id='takeCareApp',class = "tab-link", href = route_link("home"))), - tabPanel(a("Firmy",id="tab1",class = "tab-link", href = route_link("home"))), + tabPanel(a("Firmy",id="tab1",class = "tab-link", href = route_link("profil"))), tabPanel(a("O nas",id="tab2",class = "tab-link", href = route_link("about"))), - tabPanel(a("Zaloguj",id="tab3",class="tab-link", href = route_link("profil")))), + tabPanel(a("Zaloguj",id="tab3",class="tab-link", href = route_link("login"))), + tabPanel(a("Rejestracja",id="tab4",class="tab-link", href = route_link("register")))), )), router$ui) @@ -36,26 +37,38 @@ server <- shinyServer(function(input, output, session){ shinyjs::removeCssClass(id="tab1",class = "clicked") shinyjs::removeCssClass(id="tab2",class = "clicked") shinyjs::removeCssClass(id="tab3",class = "clicked") + shinyjs::removeCssClass(id="tab4",class = "clicked") }) shinyjs::onclick(id="tab1",expr = { shinyjs::addCssClass(id="tab1",class = "clicked") shinyjs::removeCssClass(id="tab2",class = "clicked") shinyjs::removeCssClass(id="tab3",class = "clicked") + shinyjs::removeCssClass(id="tab4",class = "clicked") }) shinyjs::onclick(id="tab2",expr = { shinyjs::addCssClass(id="tab2",class = "clicked") shinyjs::removeCssClass(id="tab1",class = "clicked") shinyjs::removeCssClass(id="tab3",class = "clicked") + shinyjs::removeCssClass(id="tab4",class = "clicked") }) shinyjs::onclick(id="tab3",expr = { shinyjs::addCssClass(id="tab3",class = "clicked") shinyjs::removeCssClass(id="tab2",class = "clicked") shinyjs::removeCssClass(id="tab1",class = "clicked") + shinyjs::removeCssClass(id="tab4",class = "clicked") }) + shinyjs::onclick(id="tab4",expr = { + shinyjs::addCssClass(id="tab4",class = "clicked") + shinyjs::removeCssClass(id="tab2",class = "clicked") + shinyjs::removeCssClass(id="tab1",class = "clicked") + shinyjs::removeCssClass(id="tab3",class = "clicked") + }) + + diff --git a/app/home_module.R b/app/home_module.R index add67b9..208a8cc 100644 --- a/app/home_module.R +++ b/app/home_module.R @@ -22,11 +22,21 @@ homeUI <- function(id) { # App title ---- # App title ---- - titlePanel(h1("TakeCareApp", align = "center")), - h4("Aplikacja wspomagajaca diagnozowanie i monitorowanie stanu zdrowia", align = "center"), - fluidRow(column(12," HOME")%>% tagAppendAttributes(id = 'column-content') - ) %>% tagAppendAttributes(id = 'row-content'), +# h4("Aplikacja wspomagajaca diagnozowanie i monitorowanie stanu zdrowia", align = "center"), + + fluidRow(column(12, + h1("TakeCareApp"))%>% tagAppendAttributes(id = 'column-title') + ) %>% tagAppendAttributes(id = 'row-title'), + + fluidRow(column(4, + div(div("Monitoruj swój stan zdrowia"),img(src="observ.png",height = 150, width = 150)))%>% tagAppendAttributes(class = 'column-tile'), + column(4, + div(div("Generuj raporty"),img(src="raport.png",height = 150, width = 150)))%>% tagAppendAttributes(class = 'column-tile'), + column(4, + div(div("Wykorzystaj uczenie maszynowe"),img(src="brain.png",height = 150, width = 150)))%>% tagAppendAttributes(class = 'column-tile') + + ) %>% tagAppendAttributes(id = 'row-tiles'), diff --git a/app/login_module.R b/app/login_module.R new file mode 100644 index 0000000..f03406f --- /dev/null +++ b/app/login_module.R @@ -0,0 +1,47 @@ +library(shiny) +library(magrittr) +library(ggplot2) +library(plotly) +library(DT) + +loginUI <- function(id) { + ns <- NS(id) + fluidPage( + tags$head( + tags$style(HTML(" + @import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700'); + @import url('//fonts.googleapis.com/css2?family=Fjalla+One'); + + + "))), + + theme = "style.css", + + # App title ---- + + fluidRow(column(12, + wellPanel( + textInput("login", label = strong("Login")), + textInput("pass", label = strong("Haslo")), + actionButton('loginBtn',"Zaloguj") + + ))%>% tagAppendAttributes(id = 'column-login') + ) %>% tagAppendAttributes(id = 'row-login'), + + + + fluidRow( + column(12, + tags$span("© Copyright Wszystkie prawa zastrzeżone."))%>% tagAppendAttributes(id = 'column-copyright'), + + )%>% tagAppendAttributes(id = 'row-footer') + + + ) +} +loginServer <- function(input, output) { + + + +} + diff --git a/app/register_module.R b/app/register_module.R new file mode 100644 index 0000000..1d43854 --- /dev/null +++ b/app/register_module.R @@ -0,0 +1,91 @@ +library(shiny) +library(magrittr) +library(ggplot2) +library(plotly) +library(DT) + +registerUI <- function(id) { + ns <- NS(id) + fluidPage( + tags$head( + tags$style(HTML(" + @import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700'); + @import url('//fonts.googleapis.com/css2?family=Fjalla+One'); + + + "))), + + theme = "style.css", + + # App title ---- + + fluidRow(column(12, + wellPanel( + textInput("name", label = strong("Imie")), + uiOutput("name"), + textInput("surname", label = strong("Nazwisko")), + p(textOutput("surname"),style="color:red;"), + textInput("mail", label = strong("Adres email")), + p(textOutput("mail"),style="color:red;"), + dateInput("age", label = strong("Data urodzenia"),value = "1970-01-01"), + p(textOutput("age"),style="color:red;"), + selectInput("gender", label = strong("Plec"), + choices = list("Żenska" = 0, "Meska" = 1), + selected = 0), + p(textOutput("gender"),style="color:red;"), + textInput("login", label = strong("Login")), + p(textOutput("login"),style="color:red;"), + textInput("pass", label = strong("Haslo")), + p(textOutput("pass"),style="color:red;"), + checkboxGroupInput("permission", label = strong("Wyrażam zgode"), + choices = list("Wyrażam zgode na przetwarzanie moich danych osobowych. *" = 1, "Oswiadczam ze jestem swiadom ze aplikacja TakeCareApp to narzedzie wspierajace diagnostyke i nie moze w pelni zastapic konsultacji medycznej z lekarzem. * " = 2), + ), + p(textOutput("permission"),style="color:red;"), + actionButton('loginBtn',"Zarejestruj") + + ))%>% tagAppendAttributes(id = 'column-login') + ) %>% tagAppendAttributes(id = 'row-register'), + + + + + fluidRow( + column(12, + tags$span("© Copyright Wszystkie prawa zastrzeżone."))%>% tagAppendAttributes(id = 'column-copyright'), + + )%>% tagAppendAttributes(id = 'row-footer') + + + ) +} +registerServer <- function(input, output) { + + result <-reactiveValues(name=NULL,surname=NULL,mail=NULL,age=NULL,gender=NULL,login=NULL,pass=NULL,permission=NULL) + + observeEvent(input$loginBtn,{ + result$name<-input$name + result$surname<-input$surname + result$mail<-input$mail + result$age<-input$age + result$gender<-input$gender + result$login<-input$login + result$pass<-input$pass + result$permission<-input$permission + + + + }) + + output$name<-renderUI({ + if (is.null(result$name)){ + return() + }else{ + p("Podaj prawdziwe dane",style="color:red;") + + } + + }) + + +} + diff --git a/app/routing_module.R b/app/routing_module.R index 89e30e7..0c71804 100644 --- a/app/routing_module.R +++ b/app/routing_module.R @@ -8,17 +8,23 @@ library(DT) source("home_module.R",encoding="utf-8") source("about_module.R",encoding="utf-8") source("profil_module.R",encoding="utf-8") +source("login_module.R",encoding="utf-8") +source("register_module.R",encoding="utf-8") home_page <-homeUI(id="home") about_page <-aboutUI(id="about") profil_page <-profilUI(id="profil") +login_page <-loginUI(id="login") +register_page <-registerUI(id="register") router <- make_router( route("home", home_page,homeServer), route("about", about_page,aboutServer), - route("profil", profil_page,profilServer) + route("profil", profil_page,profilServer), + route("login", login_page,loginServer), + route("register", register_page,registerServer) ) diff --git a/app/www/brain.png b/app/www/brain.png new file mode 100644 index 0000000..308e9bc Binary files /dev/null and b/app/www/brain.png differ diff --git a/app/www/observ.png b/app/www/observ.png new file mode 100644 index 0000000..7e88ec3 Binary files /dev/null and b/app/www/observ.png differ diff --git a/app/www/raport.png b/app/www/raport.png new file mode 100644 index 0000000..d294b40 Binary files /dev/null and b/app/www/raport.png differ diff --git a/app/www/style.css b/app/www/style.css index 78417e3..a848fc4 100644 --- a/app/www/style.css +++ b/app/www/style.css @@ -1,4 +1,5 @@ body{ + background-color: #C7F9CC; height:100vh; @@ -9,9 +10,27 @@ height:100vh; .container-fluid{ display:flex; flex-direction: column; - +} +#router-page-wrapper{ + flex:1; + justify-content:center; + +height:100%; } +#router-page-wrapper > .router{ + +height:100%; +width:100%; + +} +#router-page-wrapper > .router >.container-fluid{ + +height:100%; +} + + + .row{ display:flex; flex-direction:row; @@ -130,6 +149,89 @@ background-color:#00A896; } +#column-title{ +width:100%; +display:flex; +flex-direction:column; +justify-content:center; +align-items:center; + + + +} +#row-title{ + display:flex; + height:30vh; + width:100vw; +margin-top:-30px; + margin-left:-30px; + margin-right:0; + background: #F9F3F3; +box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); +border-radius: 0px 0px 10px 10px; +} + +#column-title > h1{ + font-family: Lobster !important; + color:#028090; + font-size:52px; +} + +#row-tiles{ + display:flex; + justify-content:center; + margin-top:30px; + padding:5px; + min-height:400px; +} + + + + +.column-tile{ + height:300px; + min-height:250px; + min-width:210px; + display:flex; + flex-direction:column; + width:25%; + margin-left:15px; + margin-right:15px; + background: #00A896; +box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); +border-radius: 20px; +} + +#row-tiles > .column-tile:nth-child(2){ + align-self:flex-end; + background-color:#028090; + +} + + +.column-tile > div{ + height:100%; + width:100%; + display:flex; + justify-content:space-between; + padding-top:20px; + padding-bottom:15px; + flex-direction:column; + align-items:center; + +} + + + +.column-tile > div >div +{ + text-align:center; + font-size:25px; + color:white; + font-family: Fjalla One; +} + + .content-wrapper{ padding-top:10px; padding-bottom:10px; @@ -148,7 +250,38 @@ align-items:center; font-family:Fjalla One; } +#row-login{ + max-width:600px; + min-width:300px; + min-height:300px; + align-self:center; +} +#row-register{ + max-width:600px; + + align-self:center; +} +#column-login > .well{ + display:flex; + flex-direction:column; + background-color:#00A896; + color:white; + border:none; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + +} +#loginBtn{ + margin-top:20px; + align-self:center; + min-width:25%; + max-width:40%; + background-color:#028090; + color:white; + font-weight:bold; + border:none; + box-shadow: 0px 4px 4px rgb(255 255 255 / 25%); +} @@ -240,8 +373,12 @@ table.dataTable th{ } - @media only screen and (max-width: 767px) { + body >.container-fluid{ +height:auto; +min-height:100vh; +} + .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{ width:100%; } @@ -258,7 +395,16 @@ table.dataTable th{ -} } +} + +#row-title{ + display:none; +} + + + + +} @media only screen and (min-width: 768px) { @@ -267,9 +413,12 @@ table.dataTable th{ margin-left:-15px; display:flex !important; } -.navbar-nav > li:last-of-type { +.navbar-nav > li:nth-last-of-type(2) { +margin-left:auto; +} +.navbar-nav > li:last-of-type,.navbar-nav > li:nth-last-of-type(2) { align-self:flex-end; - margin-left:auto; + #float:right !important; } @@ -290,4 +439,5 @@ table.dataTable th{ } + }