stAndrews/R/app_ui.R

# UI components for St. Andrews Shiny App

create_ui <- function() {
  f7Page(
    title = app_config$app_config$title,
    ## header ----
    tags$head(
      tags$link(rel = "manifest", href = "manifest.json"),
      tags$link(rel = "apple-touch-icon", sizes = "180x180", href = "images/apple-touch-icon.png"),
      tags$meta(name = "apple-mobile-web-app-capable", content = "yes"),
      tags$meta(name = "apple-mobile-web-app-status-bar-style", content = "default"),
      tags$style(HTML("
        .dataTables_wrapper {
          color: white;
        }
        .dataTables_wrapper table.dataTable thead th,
        .dataTables_wrapper table.dataTable tbody td {
          color: white;
        }
        .dataTables_wrapper table.dataTable tbody tr.odd {
          background-color: #333;
        }
        .dataTables_wrapper table.dataTable tbody tr.even {
          background-color: #444;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button {
          color: white !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.current{
          color: black !important;
        }
        .dataTables_filter {
          display: none; /* Hide the search box */
        }
      "))
    ),
    ## options ----
    options = list(
      theme = app_config$app_config$theme,
      dark = app_config$app_config$dark,
      pullToRefresh = TRUE
    ),
    ## layout ----
    f7TabLayout(
      ### panels ----
      panels = tagList(
        f7Panel(
          id = "panel-left",
          side = "left",
          effect = "push",
          title = "Menu",
          f7PanelMenu(
            id = "menu",
            f7PanelItem(
              tabName = "About",
              title = "About",
              icon = f7Icon("info_circle"),
              active = TRUE
            ),
            f7PanelItem(
              tabName = "Owners",
              title = "Owners",
              icon = f7Icon("person_2_fill")
            ),
            f7PanelItem(
              tabName = "Listings",
              title = "Listings",
              icon = f7Icon("tag_fill")
            ),
            f7PanelItem(
              tabName = "Sales",
              title = "Sales",
              icon = f7Icon("creditcard_fill")
            ),
            f7PanelItem(
              tabName = "Resources",
              title = "Resources",
              icon = f7Icon("hammer_fill")
            )
          )
        )
      ),
      ### navbar ----
      navbar = f7Navbar(
        title = app_config$app_config$title,
        hairline = TRUE,
        leftPanel = TRUE
      ),
      ### begin tabs ----
      f7Tabs(
        id = "tabs",
        animated = TRUE,
        #### about ----
        f7Tab(
          title = "About",
          tabName = "About",
          icon = f7Icon("info_circle"),
          active = TRUE,
          f7Card(
            title = "About",
            divider = "TRUE",
            tags$img(src = "images/st_andrews.jpg", width = "100%"),
            "St. Andrews Park is located in Venice, Florida. The condominiums are a mix of single-family homes, villas (2 and 4 units) and multi-unit buildings (8 units). There are 388 separate properties within 14 subdivisions. St. Andrews Park is one of many communities in the Plantation Golf and Country Club. It is should not be confused with the adjacent community St. Andrews East.",
            footer = tagList(
              f7Link("More Info", href = "http://www.cpmi.us/standrews-plantation/outside_home.asp")
            )
          )
        ),
        #### owners ----
        f7Tab(
          title = "Owners",
          tabName = "Owners",
          icon = f7Icon("person_2_fill"),
          f7Card(
            title = "Owners:",
            divider = TRUE,
            raised = TRUE,
            footer = textOutput("last_sale_date_display"),
            f7List(
              inset = TRUE,
              dividers = TRUE,
              strong = TRUE,
              outline = FALSE,
              f7Text(
                inputId = "name",
                label = "Last Name:",
                placeholder = "\"Patel\""
              ),
              f7Text(
                inputId = "location",
                label = "Address:",
                placeholder = "\"123 Chalmers\""
              ),
              f7Select(
                inputId = "sub_name",
                label = "Select Subdivision:",
                choices = c("All", "FAIRWAY GLEN", "GARDENS 1", "GARDENS 2",
                           "GARDENS 3", "GARDENS 4", "PATIOS 1", "PATIOS 2",
                           "PATIOS 3", "STRATFORD GLENN", "TERRACE HOMES",
                           "TERRACE VILLAS", "VILLAS 1 ST", "VILLAS 2",
                           "WEST LAKE GARDENS")
              ),
              tags$br(),
              f7Button(
                inputId = "filterButton",
                label = "Find Owners",
                icon = "",
                color = "blue"
              )
            )
          ),
          f7Card(
            title = "Map:",
            divider = TRUE,
            leafletOutput("map")
          ),
          f7Card(
            title = "Table:",
            divider = TRUE,
            DTOutput("table")
          ),
          f7Card(
            title = "Download:",
            divider = TRUE,
            f7List(
              inset = TRUE,
              downloadButton("download_filtered", "Download Filtered"),
              downloadButton("download_all", "Download All (388)")
            )
          )
        ),
        #### listings ----
        f7Tab(
          title = "Listings",
          tabName = "Listings",
          icon = f7Icon("tag_fill"),
          f7Card(
            title = "Map:",
            divider = TRUE,
            leafletOutput("listings_map")
          ),
          f7Card(
            title = "Active Listings:",
            divider = TRUE,
            DTOutput("listings_table")
          )
        ),
        #### sales ----
        f7Tab(
          title = "Sales",
          tabName = "Sales",
          icon = f7Icon("creditcard_fill"),
          f7Card(
            title = "Map:",
            divider = TRUE,
            leafletOutput("sales_map")
          ),
          f7Card(
            title = "Recent Sales:",
            divider = TRUE,
            DTOutput("sales_table")
          )
        ),
        #### resources ----
        f7Tab(
          title = "Resources",
          tabName = "Resources",
          icon = f7Icon("hammer_fill"),
          f7Segment(
            f7Button(inputId = "res_beaches", label = "Beaches"),
            f7Button(inputId = "res_links",   label = "Links"),
            f7Button(inputId = "res_restart", label = "Restart")
          ),
          uiOutput("resources_content")
        )
        ### end tabs----
      ),
      ### begin scripts ----
      tags$script(
        HTML(
          "
          $(document).on('click', '#pdfLink', function(event) {
            event.preventDefault();
            window.open($(this).attr('href'), '_blank');
          });
          $(document).on('click', '#download_filtered, #download_all', function(event) {
            event.preventDefault();
            window.open($(this).attr('href'), '_self');
          });
          "
        )
      )
      ### end scripts ----
    )
  )
}