From 2579fe9d3b99776da64d8bc609e8760b42ffce1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Piskorski?= Date: Mon, 25 Jan 2021 13:31:00 +0100 Subject: [PATCH] ui fix --- app/about.R | 20 ++++--- app/app.R | 125 +++++++++++++++++++++++++++++++++++++++--- app/calculator.R | 2 +- app/firmy_module.R | 1 + app/home_module.R | 1 + app/login_module.R | 4 +- app/profil_module.R | 4 +- app/register_module.R | 44 +++++++-------- app/www/style.css | 60 +++++++++++++++++--- 9 files changed, 209 insertions(+), 52 deletions(-) diff --git a/app/about.R b/app/about.R index 2d2e73e..f07ac19 100644 --- a/app/about.R +++ b/app/about.R @@ -12,21 +12,22 @@ aboutUI <- function(id){ tags$head( tags$link(rel = "stylesheet", type = "text/css", href = "style.css") ), - fluidPage( - h1("Kim jesteśmy?", align = "center"), + column(12, + h1("Kim jesteśmy?", align = "center")%>% tagAppendAttributes(id = 'about-header'), br(), - h4("Jesteśmy młodym dynamicznym zespołem wdrażającym się w świat tworzenia profesjonalnych aplikacji"), - h4("Nasz zespół składa się z:"), + h4("Jesteśmy młodym dynamicznym zespołem wdrażającym się w świat tworzenia profesjonalnych aplikacji. + Tworząc aplikację TakeCareApp przyświecał nam cel poszerzenie dostępności diagnozy medycznej i umożliwienie szybkiego i wygodnego odczytania wyników." ), + h4("Nasz zespół składa się z"), br(), fluidRow(column(4, - div(div("Jan Przybylski"),img(src="jp.png", height = 150, width = 150)))%>% tagAppendAttributes(class = 'column-tile'), + div("Jan Przybylski"),img(src="jp.png", height = 150, width = 150))%>% tagAppendAttributes(class = 'column-author'), column(4, - div(div("Rafał Piskorski"),img(src="rafal.png", height = 150, width = 150)))%>% tagAppendAttributes(class = 'column-tile'), + div("Rafał Piskorski"),img(src="rafal.png", height = 150, width = 150))%>% tagAppendAttributes(class = 'column-author'), column(4, - div(div("Robert Tarnas"),img(src="robert.png", height = 150, width = 150)))%>% tagAppendAttributes(class = 'column-tile'), + div("Robert Tarnas"),img(src="robert.png", height = 150, width = 150))%>% tagAppendAttributes(class = 'column-author'), - ), + )%>% tagAppendAttributes(id = 'row-content'), @@ -34,7 +35,8 @@ aboutUI <- function(id){ - ) + +)%>% tagAppendAttributes(id = 'about-page') ) } diff --git a/app/app.R b/app/app.R index 072f783..af2febb 100644 --- a/app/app.R +++ b/app/app.R @@ -183,7 +183,7 @@ server <- shinyServer(function(input, output, session){ tabPanel(a("Firmy",id="tab1",class = "tab-link", href = route_link("firms"))), tabPanel(a("O nas",id="tab2",class = "tab-link", href = route_link("about"))), tabPanel(a("Kalkulator", id ="tab5",class="tab-link", href = route_link("calculator"))), - tabPanel(a("Klasyfikator", id ="tab5",class="tab-link", href = route_link("klasyfikator"))), + tabPanel(a("Klasyfikator", id ="tab8",class="tab-link", href = route_link("klasyfikator"))), tabPanel(a("Wyloguj",id="tab7",class = "tab-link")), tabPanel(a("Profil",id="tab4",class="tab-link", href = route_link("profil")))), @@ -214,19 +214,126 @@ server <- shinyServer(function(input, output, session){ }) - observeEvent((session$clientData)$url_hash,{ - - barSelected() + # observeEvent((session$clientData)$url_hash,{ + # + # barSelected() + # + # }) + # + # observeEvent(input$reload,{ + # barSelected() + # } + + observe({ + currPage = get_page() + print(currPage) + if(currPage=="profil"){ + + shinyjs::addCssClass(id="tab4",class = "clicked") + shinyjs::removeCssClass(id="tab1",class = "clicked") + shinyjs::removeCssClass(id="tab2",class = "clicked") + shinyjs::removeCssClass(id="tab3",class = "clicked") + + shinyjs::removeCssClass(id="tab5",class = "clicked") + shinyjs::removeCssClass(id="tab6",class = "clicked") + shinyjs::removeCssClass(id="tab7",class = "clicked") + shinyjs::removeCssClass(id="tab8",class = "clicked") + + }else if(currPage=="calculator"){ + shinyjs::addCssClass(id="tab5",class = "clicked") + 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::removeCssClass(id="tab6",class = "clicked") + shinyjs::removeCssClass(id="tab7",class = "clicked") + shinyjs::removeCssClass(id="tab8",class = "clicked") + + }else if(currPage=="login"){ + shinyjs::addCssClass(id="tab3",class = "clicked") + + shinyjs::removeCssClass(id="tab1",class = "clicked") + shinyjs::removeCssClass(id="tab2",class = "clicked") + + shinyjs::removeCssClass(id="tab4",class = "clicked") + shinyjs::removeCssClass(id="tab5",class = "clicked") + shinyjs::removeCssClass(id="tab6",class = "clicked") + shinyjs::removeCssClass(id="tab7",class = "clicked") + shinyjs::removeCssClass(id="tab8",class = "clicked") + + } + else if(currPage=="home" | currPage==""){ + + 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::removeCssClass(id="tab5",class = "clicked") + shinyjs::removeCssClass(id="tab6",class = "clicked") + shinyjs::removeCssClass(id="tab7",class = "clicked") + shinyjs::removeCssClass(id="tab8",class = "clicked") + + }else if(currPage=="firms"){ + + 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::removeCssClass(id="tab5",class = "clicked") + shinyjs::removeCssClass(id="tab6",class = "clicked") + shinyjs::removeCssClass(id="tab7",class = "clicked") + shinyjs::removeCssClass(id="tab8",class = "clicked") + + }else if(currPage=="about"){ + 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::removeCssClass(id="tab5",class = "clicked") + shinyjs::removeCssClass(id="tab6",class = "clicked") + shinyjs::removeCssClass(id="tab7",class = "clicked") + shinyjs::removeCssClass(id="tab8",class = "clicked") + + }else if(currPage=="klasyfikator"){ + + shinyjs::addCssClass(id="tab8",class = "clicked") + 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::removeCssClass(id="tab5",class = "clicked") + + shinyjs::removeCssClass(id="tab7",class = "clicked") + shinyjs::removeCssClass(id="tab6",class = "clicked") + + } + + else if(currPage=="register"){ + + shinyjs::addCssClass(id="tab6",class = "clicked") + 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::removeCssClass(id="tab5",class = "clicked") + + shinyjs::removeCssClass(id="tab7",class = "clicked") + shinyjs::removeCssClass(id="tab8",class = "clicked") + + } + + + + }) - - observeEvent(input$reload,{ - barSelected() - } - ) + router$server(input, output, session) diff --git a/app/calculator.R b/app/calculator.R index ed79f01..cdd9131 100644 --- a/app/calculator.R +++ b/app/calculator.R @@ -168,7 +168,7 @@ calculatorServer <- function(input, output, session) { select4<-input$select4) - + print(calculatorSave) calculatorParameterInts = list(list(name="parameter1",value = calculatorSave$slider1), list(name="parameter2",value = calculatorSave$select1), diff --git a/app/firmy_module.R b/app/firmy_module.R index 011a73a..b8bf709 100644 --- a/app/firmy_module.R +++ b/app/firmy_module.R @@ -91,6 +91,7 @@ firmyServer <- function(input, output,session) { fluidRow( column(12, + h1("Firmy współpracujące", align = "center")%>% tagAppendAttributes(id = 'firms-header'), wellPanel(column(2,img(src="gsk.png", height = 150, width = 150)), column(6, diff --git a/app/home_module.R b/app/home_module.R index ae6b17f..af45a78 100644 --- a/app/home_module.R +++ b/app/home_module.R @@ -11,6 +11,7 @@ homeUI <- function(id) { tags$style(HTML(" @import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700'); @import url('//fonts.googleapis.com/css2?family=Fjalla+One'); + @import url('https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap'); "))), diff --git a/app/login_module.R b/app/login_module.R index d2f0bb4..0c4d73c 100644 --- a/app/login_module.R +++ b/app/login_module.R @@ -37,7 +37,7 @@ tags$script('Shiny.addCustomMessageHandler("tokenHandlerAfterLogin", fluidRow(column(12, wellPanel( textInput("login", label = strong("Login")), - passwordInput("pass", label = strong("Haslo")), + passwordInput("pass", label = strong("Hasło")), uiOutput("loginErr"), actionButton('loginBtn',"Zaloguj") @@ -87,7 +87,7 @@ loginServer <- function(input, output,session) { if (isCorrect()==TRUE){ }else{ - p("Użytkownik istnieje lub wprowadzono błędne dane",style="color:yellow;text-align:center;") + p("Użytkownik nie istnieje lub wprowadzono błędne dane",style="color:yellow;text-align:center;") } }) diff --git a/app/profil_module.R b/app/profil_module.R index f88629a..debd4a8 100644 --- a/app/profil_module.R +++ b/app/profil_module.R @@ -209,7 +209,7 @@ profilServer <- function(input, output,session) { dateInput("editAge", label = strong("Data urodzenia") ,value=response$profil$personalDataDTO$datebirth), selectInput("editGender", label = strong("Płeć"), - choices = list("Żeńska" = 0, "męska" = 1), + choices = list("Żeńska" = 0, "Męska" = 1), selected = as.numeric(response$profil$personalDataDTO$gender)), @@ -388,7 +388,7 @@ profilServer <- function(input, output,session) { if (s=="" | grepl("^[A-Z][a-zA-ZĄąĆćĘꣳŃńÓ󌜏źŻż]{2,20}$",s)==TRUE){ return() }else{ - p("Bład: Nazwisko powinno zaczynać sie od wielkiej litery, zawierać jedynie litery i mieć długość od 3 do 15 znakĂłw",style="color:yellow") + p("Bład: Nazwisko powinno zaczynać sie od wielkiej litery, zawierać jedynie litery i mieć długość od 3 do 15 znaków",style="color:yellow") } diff --git a/app/register_module.R b/app/register_module.R index 16f6916..16fbcd0 100644 --- a/app/register_module.R +++ b/app/register_module.R @@ -84,11 +84,11 @@ registerServer <- function(input, output,session) { password= result$password, roleDTO= roleData) - to_send = list( + tegisterToSend = list( personalDataDTO = personalData, userDTO = userData) - r<-httr::POST("https://syi-back.herokuapp.com/api/register",body=to_send,encode = 'json') - # print(content(r)) + r<-httr::POST("https://syi-back.herokuapp.com/api/register",body=tegisterToSend,encode = 'json') + print(content(r)) if (r$status_code==200){ status$status = TRUE @@ -112,7 +112,7 @@ registerServer <- function(input, output,session) { if (status$first==TRUE){ fluidRow(column(12, wellPanel( - textInput("name", label = strong("Imie")), + textInput("name", label = strong("Imię")), uiOutput("name"), textInput("surname", label = strong("Nazwisko")), uiOutput("surname"), @@ -120,16 +120,16 @@ registerServer <- function(input, output,session) { uiOutput("mail"), dateInput("age", label = strong("Data urodzenia"),value = "1970-01-01"), - selectInput("gender", label = strong("Plec"), - choices = list("Żenska" = 0, "Meska" = 1), + selectInput("gender", label = strong("Płeć"), + choices = list("Żeńska" = 0, "Męska" = 1), selected = 0), textInput("username", label = strong("Login")), uiOutput("username"), - passwordInput("haslo", label = strong("Haslo")), + passwordInput("haslo", label = strong("Hasło")), uiOutput("haslo"), - 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), + checkboxGroupInput("permission", label = strong("Wyrażam zgodę"), + choices = list("Wyrażam zgodę na przetwarzanie moich danych osobowych. *" = 1, "Oświadczam, że jestem świadom że aplikacja TakeCareApp to narzędzie wspierające diagnostykę i nie może w pełni zastąpić konsultacji medycznej z lekarzem. * " = 2), ), uiOutput("permission"), actionButton("submit","Zarejestruj"), @@ -141,7 +141,7 @@ registerServer <- function(input, output,session) { fluidRow(column(12, wellPanel( - textInput("name", label = strong("Imie")), + textInput("name", label = strong("Imię")), uiOutput("name"), textInput("surname", label = strong("Nazwisko")), uiOutput("surname"), @@ -149,16 +149,16 @@ registerServer <- function(input, output,session) { uiOutput("mail"), dateInput("age", label = strong("Data urodzenia"),value = "1970-01-01"), - selectInput("gender", label = strong("Plec"), - choices = list("Żenska" = 0, "Meska" = 1), + selectInput("gender", label = strong("Płeć"), + choices = list("Żeńska" = 0, "Męska" = 1), selected = 0), textInput("username", label = strong("Login")), uiOutput("username"), - passwordInput("haslo", label = strong("Haslo")), + passwordInput("haslo", label = strong("Hasło")), uiOutput("haslo"), - 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), + checkboxGroupInput("permission", label = strong("Wyrażam zgodę"), + choices = list("Wyrażam zgodę na przetwarzanie moich danych osobowych. *" = 1, "Oświadczam, że jestem świadom że aplikacja TakeCareApp to narzędzie wspierające diagnostykę i nie może w pełni zastąpić konsultacji medycznej z lekarzem. * " = 2), ), uiOutput("permission"), actionButton("submit","Zarejestruj"), @@ -184,7 +184,7 @@ registerServer <- function(input, output,session) { if (getStatus()==TRUE){ p("OK",style="color:white;text-align:center;") }else{ - p("Uzytkownik istnieje lub wprowadzono bledne dane",style="color:yellow;text-align:center;") + p("Użytkownik istnieje lub wprowadzono błędne dane",style="color:yellow;text-align:center;") } @@ -196,7 +196,7 @@ registerServer <- function(input, output,session) { if (s=="" | grepl("^[A-Z][a-zA-ZĄąĆćĘꣳŃńÓ󌜏źŻż]{2,15}$",s)==TRUE){ return() }else{ - p("Bład: Imie powinno zaczynac sie od wielkiej litery, zawierac jedynie litery i miec dlugosc od 3 do 15 znaków",style="color:yellow") + p("Błąd: Imię powinno zaczynać sie od wielkiej litery, zawierać jedynie litery i mieć długość od 3 do 15 znaków",style="color:yellow") } }) @@ -207,7 +207,7 @@ registerServer <- function(input, output,session) { if (s=="" | grepl("^[A-Z][a-zA-ZĄąĆćĘꣳŃńÓ󌜏źŻż]{2,20}$",s)==TRUE){ return() }else{ - p("Bład: Nazwisko powinno zaczynac sie od wielkiej litery, zawierac jedynie litery i miec dlugosc od 3 do 15 znaków",style="color:yellow") + p("Błąd: Nazwisko powinno zaczynać sie od wielkiej litery, zawierać jedynie litery i mieć długość od 3 do 15 znaków",style="color:yellow") } @@ -220,7 +220,7 @@ registerServer <- function(input, output,session) { if (s=="" | grepl("^[a-z]+[0-9]*@([a-z]{2,10}\\.)+[a-z]{2,5}$",s)==TRUE){ return() }else{ - p("Bład: Mail powinien miec budowe adres@nazwa.domena",style="color:yellow") + p("Błąd: Mail powinien mieć budowę adres@nazwa.domena",style="color:yellow") } @@ -238,9 +238,9 @@ registerServer <- function(input, output,session) { if ((grepl("^([a-zA-ZĄąĆćĘꣳŃńÓ󌜏źŻż]+[0-9\\-\\_]*){5,20}$",s)==TRUE) & number==0){ return() }else if(number!=0){ - p("Bład: Login jest zajety",style="color:yellow") + p("Błąd: Login jest zajęty",style="color:yellow") }else{ - p("Bład: Login powinien skladac si z liter i cyfr i miec dlugosc od 5 do 15 znaków",style="color:yellow") + p("Błąd: Login powinien składać się z liter i cyfr i mieć długość od 5 do 15 znaków",style="color:yellow") } } @@ -253,7 +253,7 @@ registerServer <- function(input, output,session) { if (s=="" | grepl("^([a-zA-ZĄąĆćĘꣳŃńÓ󌜏źŻż]{5,}[0-9]{5,}[a-zA-ZĄąĆćĘꣳŃńÓ󌜏źŻż0-9]*)+$",s)==TRUE){ return() }else{ - p("Bład: Haslo powinno skladac sie z co najmniej 5 liter i 5 cyfr od 10 znaków",style="color:yellow") + p("Błąd: Hasło powinno składać sie z co najmniej 5 liter i 5 cyfr od 10 znaków",style="color:yellow") } }) diff --git a/app/www/style.css b/app/www/style.css index e41b246..d7784ce 100644 --- a/app/www/style.css +++ b/app/www/style.css @@ -98,7 +98,7 @@ background-color:#00A896; .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover { #background-color: #008375; #color: #FFFFFF !important; - #font-family: Fjalla One; + #font-family: 'Teko', sans-serif; } .navbar-default .navbar-nav > li:hover{ @@ -108,7 +108,9 @@ background-color:#00A896; .navbar-default .navbar-nav > li > a{ color: #FFFFFF !important; - font-family: Fjalla One; + font-family: 'Teko', sans-serif; + font-size:18px; + text-align: center; } @@ -243,9 +245,10 @@ border-radius: 20px; .column-tile > div >div { text-align:center; - font-size:25px; + font-size:30px; color:white; - font-family: Fjalla One; + font-family: 'Teko', sans-serif; + } @@ -265,7 +268,8 @@ background-color:#028090; color:white; justify-content:center; align-items:center; -font-family:Fjalla One; +font-family: 'Teko', sans-serif; +font-size:18px; text-align:center; } @@ -336,7 +340,8 @@ color:white; background-color:#028090; border:none; border-radius:0; -font-family:Fjalla One; +font-family: 'Teko', sans-serif; +font-size:18px; } .nav-tabs > li > a:hover { @@ -387,7 +392,8 @@ table.dataTable{ table.dataTable td{ #color: white; #text-shadow: 1px 0 0.5px black, -1px 0 0.5px black, 0 1px 0.5px black, 0 -1px 0.5px black; - font-family: 'Fjalla One'; + font-family: 'Teko', sans-serif; + font-size:18px; text-align:center!important; } @@ -432,8 +438,18 @@ table.dataTable th{ #firms{ background-color: #C7F9CC; } +#column-firms{ + font-family: 'Teko', sans-serif; + font-size:18px; +border-radius: 10px; + display:flex; + flex-direction:column; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(0, 0, 0, 0.25); + background: #F9F3F3; +} #column-firms > .well{ + #border-radius: 10px; display:flex; flex-direction:row; @@ -466,6 +482,36 @@ table.dataTable th{ text-align:center; } +#about-page{ +font-family: 'Teko', sans-serif; + +border-radius: 10px; + + display:flex; + flex-direction:column; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(0, 0, 0, 0.25); + background: #F9F3F3; +} + +#about-page>h4{ + width:50%; + max-width:800px; + align-self:center; + +} +#about-page>#row-content>div{ + font-size:20px; + display:flex; + flex-direction:column; + align-items:center; + justify-content:center; +} +#about-header,#firms-header{ + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(0, 0, 0, 0.25); + background-color:#028090; + color:white; +} + @media only screen and (max-width: 767px) { body >.container-fluid{ height:auto;