s426228/TakeCareApp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

TAK-49 TAK-51 login,register and home

Browse Source
This commit is contained in:
Rafał Piskorski 2020-12-12 12:38:54 +01:00
parent e8fdbac2ee
commit c83d5aaff0
9 changed files with 329 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/app.R
View File

@ -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")
})

18
app/home_module.R
View File

@ -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'),

47
app/login_module.R Normal file
View File

@ -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) {
}

91
app/register_module.R Normal file
View File

@ -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;")
}
})
}

8
app/routing_module.R
View File

@ -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)
)

BIN
app/www/brain.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
app/www/observ.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
app/www/raport.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

160
app/www/style.css
View File

@ -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{
}
}