Adding in app code

Author: statasaurus

.gitignore

@@ -0,0 +1,4 @@
+.Rproj.user
+.Rhistory
+.RData
+.Ruserdata

app.R

@@ -0,0 +1,32 @@
+library(shiny)
+library(shinyAce)
+library(shinyjs)
+
+source("mods/mod-commitq1.R")
+source("mods/mod-commitq2.R")
+ui <- fluidPage(
+  includeCSS("www/style.css"),
+  shinyjs::useShinyjs(),
+  navbarPage("Git in theory",
+             tabPanel("Commiting",
+                      tabsetPanel(type = "tabs",
+                                  tabPanel("Q1",  
+                                           commitq1_ui("q1")),
+                                  tabPanel("Q2",
+                                           commitq2_ui("q2"))
+                                           )
+                      
+                     ),
+             tabPanel("Making Branches"
+             ),
+             tabPanel("Merging Branches")
+  )
+)
+
+
+server <- function(input, output, session) {
+  commitq1_server("q1")
+  commitq2_server("q2")
+}
+
+shinyApp(ui = ui, server = server)

git-app.Rproj

@@ -0,0 +1,13 @@
+Version: 1.0
+
+RestoreWorkspace: Default
+SaveWorkspace: Default
+AlwaysSaveHistory: Default
+
+EnableCodeIndexing: Yes
+UseSpacesForTab: Yes
+NumSpacesForTab: 2
+Encoding: UTF-8
+
+RnwWeave: Sweave
+LaTeX: pdfLaTeX

mods/mod-commitq1.R

@@ -0,0 +1,37 @@
+commitq1_ui <- function(id){
+  ns <- NS(id)
+  tagList(
+    textInput(ns("input_text"), "Enter Commit Message:"),
+    actionButton(ns("commit_btn"), "Commit"),
+    actionButton(ns("undo_btn"), "Undo"),
+    div(id = ns("commit_ls"), class = "branch")
+  )
+}
+
+commitq1_server <- function(id){
+  moduleServer(
+    id,
+    function(input, output, session){
+      ns <- session$ns
+      
+      observeEvent(input$commit_btn, {
+        if (input$input_text != "") {
+          insertUI(
+            selector = paste0("#",  ns("commit_ls")),
+            where = "beforeEnd",
+            ui = div(
+              class = "dot",
+              message = input$input_text
+            )
+          )
+          updateTextInput(session, "input_text", value = "")
+        }
+      })
+      
+      observeEvent(input$undo_btn, {
+        removeUI(selector = ".dot")
+      })
+      
+    }
+  )
+}

mods/mod-commitq2.R

@@ -0,0 +1,63 @@
+init <- 'print("hello [My Name]")'
+
+commitq2_ui <- function(id){
+  ns <- NS(id)
+  splitLayout(
+    cellWidths = c("50%", "50%"),
+    aceEditor(ns("code_box"), "Code Box", value = init),
+    column(
+      width = 12,
+      textInput(ns("commit_msg"), "Commit Message", ""),
+      actionButton(ns("commit_btn"), "Commit", width = "100%"),
+      div(id = ns("commit_ls"), class = "branch",
+          div(
+            class = "dot",
+            message = "My first commit"
+          )
+          
+      )
+    )
+  )
+}
+
+commitq2_server <- function(id){
+  moduleServer(
+    id,
+    function(input, output, session){
+      ns <- session$ns
+
+      observeEvent(input$code_box, {
+        if(input$code_box != init){
+          shinyjs::enable("commit_msg")
+        } else {
+          shinyjs::disable("commit_msg")
+          shinyjs::disable("commit_btn")
+        }
+      })
+      
+
+      observeEvent(input$commit_msg, {
+        if (input$commit_msg != "") {
+        shinyjs::enable("commit_btn")
+        } else {
+          shinyjs::disable("commit_btn")
+        }
+      })
+
+      observeEvent(input$commit_btn, {
+        insertUI(
+          selector = paste0("#",  ns("commit_ls")),
+          where = "beforeEnd",
+          ui = div(
+            class = "dot",
+            message = input$commit_msg
+          )
+        )
+
+        updateTextInput(session, "commit_msg", value = "")
+      })
+
+
+    }
+  )
+}

www/style.css

@@ -0,0 +1,73 @@
+:root{
+    --radius: 5em; 
+    --radius2 : 2.5em; /*should be 1/2 radius*/ 
+    } 
+    
+body{
+background-color: #f2e5e1;
+}
+              
+.dot {
+  display: inline-block;
+  width: var(--radius);
+  height: var(--radius);
+  border-radius: 50%;
+  background-color: #337535;
+  margin: var(--radius2);
+  position: relative;
+}
+
+.dot:before,
+.dot:after
+{
+  content:'';
+  width:var(--radius);
+  border-bottom:3px solid;
+  position:absolute;
+  top:50%;
+  color: #49392C;
+}
+
+.dot:before {
+  content: attr(message); 
+  position:absolute;
+  
+  /* vertically center */
+  top:50%;
+  transform:translateY(-50%);
+  
+  /* move to right */
+  left:100%;
+  margin-left:15px; /* and add a small left margin */
+
+  z-index: 1; /* Add this line to ensure tooltip appears above other dots */
+  
+  /* basic styles */
+  width:200px;
+  padding:10px;
+  border-radius:10px;
+  background:#000;
+  color: #fff;
+  text-align:center;
+
+  display:none; /* hide by default */
+}
+
+.dot:hover:before {
+  display:block;
+}
+
+:after {
+  left:100%;
+}
+:before {
+  right:100%;
+}
+
+.dot:last-of-type:after {
+  display:none;
+}
+
+.branch {
+  white-space:nowrap; 
+  }