TAK-49 TAK-51 login,register and home

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

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

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

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

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

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