Pandita: gga — Habit Tracker

include Indu from /indu/standard-library

-- The following two objects contain constants for the fonts and
-- colours used in this app. Change these values here to see the app
-- update.

-- Font name and weights. When choosing a font from Google Fonts make
-- sure you use weights offered for that font, otherwise it won't load
-- at all.
begin font-table
  habit-font-name is "Sarabun"
  heading-weight is 600
  text-weight is 400
end font-table

-- Colours. These are used in 'color-for-streak'. The comment shows
-- roughly what the colour is.
begin colours
  top-tier is "#b768d8" -- purple
  second is "#80db5a" -- green
  third is "#dbd632" -- yellow
  fourth is "#db8935" -- orange
  bottom-tier is "#d96659" -- red
  incomplete is "#cccccc" -- gray
end colours

-- Calculates the score that is used to allocate a colour. Returns a
-- number between 0 and 100.  If the frequency is not daily, then the
-- length of time is reduced. This assumes that months are 30 days
-- long.
when score-for-streak(length, succeeded, frequency)
  set succeeded to succeeded * 100
  if frequency = "weekly"
    set length to length / 7
  end if
  if frequency = "monthly"
    set length to length / 30
  end if
  succeeded / length
end score-for-streak

-- Allocates a colour based on the score calculated above. Can return
-- a different colour if the streak is currently un-performed.
when color-for-streak(score, completed)
  if completed
    if score > 95
      top-tier of colours
    else
      if score > 90
        second of colours
      else
        if score > 80
          third of colours
        else
          if score > 50
            fourth of colours
          else
            bottom-tier of colours
          end if
        end if
      end if
    end if
  else
    incomplete of colours
  end if
end color-for-streak

-- -----------------------------------------------------------------------------
-- The object that shows the habit on-screen. Does almost all the work.
begin habit-description
  running-days is call days-since of date of Indu with (start: start-date) + 1
  score is call score-for-streak with (length: running-days, succeeded: completed, frequency: frequency)
  completed-today is (call today of date of Indu) = last-date
  
  style
    display is "flex"
    align-items is "center"
    justify-content is "center"
    background-color is call color-for-streak with (score: score, completed: completed-today)
    margin is "0.5em 0"
    padding is "0.65em 0.75em 0.75em"
    border-radius is "0.2em"
  end style

begin habit-title
    style
      flex is "3 1 auto"
    end style
    make using section-heading of Indu(text: title, weight: heading-weight of font-table)
    begin sub-heading
      style
        font-size is "0.7em"
      end style
      <p>Since #{ start-date }, achieved #{ completed } days</p>
    end sub-heading
  end habit-title
  
  begin do-habit
    style
      flex is "auto"
      display is "flex"
      justify-content is "center"
    end style
    
    <div>#{ call show-button }</div>

when show-button
      if completed-today
        begin habit-score
          style
            font-size is "1.6em"
            font-weight is heading-weight of font-table
          end style
          <span>#{ score }%</span>
        end habit-score
      else
        using button of Indu(label: "Done!")
          style
            background-color is "white"
          end style
          when click => call perform-habit of site with (habit: number)
        end button
      end if
    end show-button
  end do-habit
end habit-description

database tutorial
  scope is "app"
end tutorial
make database habit-store

-- -----------------------------------------------------------------------------
-- The main site object. This is the application you interact with
begin site
  sarabun is make using g-font of Indu(family: habit-font-name of font-table,
                                       weight: list with (text-weight of font-table;
                                                          heading-weight of font-table))
  with centered of Indu
  with google-font of Indu(fonts: list with (sarabun))
  
  habits is (key "habit data" of habit-store) or list with ()
  dirty is false
  add-habit-dialog is ""

style
    font-family is habit-font-name of font-table
    font-weight is text-weight of font-table
    font-size is "1.4em"
  end style

make using heading of Indu(text: "Habitual", weight: heading-weight of font-table)
  using text-block of Indu(id: "habit-intro")
    style
      font-size is "0.8em"
      margin is "-1em 1em 1em"
      color is "#363636"
    end style
  end text-block
  <div>#{ call make-habits }</div>
  begin controls
    style
      display is "flex"
      justify-content is "flex-end"
    end style
    using button of Indu(label: "Start Habit...")
      when click
        set add-habit-dialog to call show-dialog of navigator of Indu with (container: site, content: new-habit-form)
      end click
    end button
  end controls

begin about
    <div>#{ call show-help }</div>

when show-help
      if (key "show help" of tutorial)
        if not (key "hide help" of habit-store)
          guide
        else
          help-controls
        end if
      else
        ""
      end if
    end show-help
  end about

when make-habits
    set made-habits to list with ()
    if (length of habits) > 0
      repeat with h in habits
            append make using habit-description(number: index,
                                                 title: item 1 of h,
                                            start-date: item 2 of h,
                                             frequency: item 3 of h,
                                             completed: item 4 of h,
                                             last-date: item 5 of h) to made-habits
      end repeat
    else
      -- These habits are added here to give you some idea of how to get started
      append call make-example-habit with (ex-number: 1, ex-title: "Add your own habits below!") to made-habits
      append call make-example-habit with (ex-number: 2, ex-title: "🎼 Practice Piano 🎹") to made-habits
      append call make-example-habit with (ex-number: 3, ex-title: "🧘🏽 Meditate 🙏🏼") to made-habits
      append call make-example-habit with (ex-number: 4, ex-title: "🏴󠁧󠁢󠁷󠁬󠁳󠁿 Dysgu Cymraeg 🏴󠁧󠁢󠁷󠁬󠁳󠁿") to made-habits
    end if
    made-habits
  end make-habits

when make-example-habit(ex-number, ex-title)
    make using habit-description(number: ex-number,
                                  title: ex-title,
                             start-date: "Mon Jan 1 2024",
                              frequency: "daily",
                              completed: call random of math of Indu with (limit: call days-since of date of Indu with (start: "Mon Jan 1 2024")),
                              last-date: call today of date of Indu)
  end make-example-habit

when save-all
    set key "habit data" of habit-store to habits
    set dirty to true
  end save-all

when perform-habit(habit)
    if (length of habits) > 0
      set h to item habit of habits
      set item 4 of h to (item 4 of h) + 1
      set item 5 of h to call today of date of Indu
      call save-all
    end if
  end perform-habit
  when save-habit(new-habit)
    append new-habit to habits
    call save-all
  end save-habits

when close-new-habit-dialog
    call hide-dialog of navigator of Indu with (container: site, dialog: add-habit-dialog)
    set add-habit-dialog to ""
  end close-new-habit-dialog
end site

-- -----------------------------------------------------------------------------
-- The form to create a new habit. The actual display of the form as a
-- dialog is handled by the standard library.
begin new-habit-form
  make using heading of Indu(text: "Your New Habit", weight: heading-weight of font-table)
  make new-habit-text using textarea of Indu(text-height: "4em", text-width: "24em")
  begin frequency-dropdown
    style
      margin is "0.25em"
    end style
    <p>Frequency:</p>
    <select>
      <option value="daily" selected>Daily</option>
      <option value="weekly">Weekly</option>
      <option value="monthly">Monthly</option>
    </select>
    when selected
      call get-value of Indu with (selector: "#" & @me && "select")
    end selected
  end frequency-dropdown
  
  begin controls
    style
      display is "flex"
      justify-content is "flex-end"
    end style
    using button of Indu(label: "Cancel")
      when click
        call close-new-habit-dialog of site
        call clear
      end click
    end button
    using button of Indu(label: "Save")
      when click
        set freq to call selected of frequency-dropdown
        set new-habit to list with (text-content of new-habit-text; call today of date of Indu; freq; 0; "none")
        call save-habit of site with (new-habit: new-habit)
        call close-new-habit-dialog of site
        call clear
      end click
    end button
  end controls

when clear => set text-content of new-habit-text to ""
end new-habit-form

-- -----------------------------------------------------------------------------
-- The below objects are all used to display the help guide below the
-- app. This defaults to off. If you want to turn it on, add an 'app'
-- scope key of 'show help' to a database called 'tutorial' using the
-- Data tab of the Show Indu Source view
begin guide-heading using section-heading of Indu(weight: heading-weight of font-table)
  style
    font-size is "1.2em"
    margin is "0.5em 0 0"
  end style
end guide-heading

begin guide-item
  <li>#{ call make-idea-heading }#{ call make-idea-desc }</li>
  when make-idea-heading
    using text-block of Indu(id: prefix & "-head-" & number)
      style
        font-weight is heading-weight of font-table
      end style
    end text-block
  end make-idea-heading
  when make-idea-desc
    using text-block of Indu(id: prefix & "-list-" & number)
      style
        padding is "0 0 0.4em 1.05em"
      end style
    end text-block
  end make-idea-desc
end guide-item

begin guide-list
  style
    list-style-type is "decimal"
    list-style-position is "inside"
    margin is "0.25em 0"
  end style
  <ol>#{ call make-list-items }</ol>
  when make-nth-item(n)
    make using guide-item(prefix: list-key, number: n)
  end make-nth-item
  when make-list-items
    set list-items to list with ()
    repeat item-count times
      append call make-nth-item with (n: index) to list-items
    end repeat
  end make-list-items
end guide-list

begin guide
  style
    position is "relative"
    font-size is "0.7em"
    margin is "0.5em 1em 1em"
    padding is "0.25em 1em 1em"
    color is "#363636"
    background-color is "#e5e5e5"
    border-radius is "0.2em"
    text-justify is "inter-word"
  end style

using button of Indu(label: "Hide Help")
    style
      position is "absolute"
      top is "-0.5em"
      right is "-0.5em"
      font-size is "0.6em"
      text-decoration is "underline"
      border is "none"
    end style
    when click
      set key "hide help" of habit-store to true
      set dirty of site to true
    end click
  end button
  make using guide-heading(text: "You can track your own habits")
  make using text-block of Indu(id: "habit-about")
  make using guide-heading(text: "Getting started")
  make using guide-list(list-key: "started", item-count: 3)
  make using guide-heading(text: "Track your habits your way")
  make using text-block of Indu(id: "habit-ideas")
  make using guide-list(list-key: "ideas", item-count: 4)
  make using guide-heading(text: "Indu: more than habit tracking")
  using button of Indu(label: "Learn Indu")
    style
      float is "right"
      background-color is "white"
    end style
    when click => call open-url of navigator of Indu with (url: "/indu")
  end button
  make using text-block of Indu(id: "guide-indu")
end guide

begin help-controls
  style
    display is "flex"
    justify-content is "flex-end"
  end style
  using button of Indu(label: "Show Help")
    style
      font-size is "0.6em"
      text-decoration is "underline"
      border is "none"
    end style
    when click
      set key "hide help" of habit-store to false
      set dirty of site to true
    end click
  end button
end help-controls

A new programming language can be a frustrating experience. It's worse when it also doesn't work properly. Indu is still in alpha, so there will be times it just doesn't work. Please tell us when you see something unexpected, we'll happily help you on the path again, or fix the bug if that's what it is.
(It's probably a bug…)