Giter VIP home page Giter VIP logo

captains-log's Introduction

Captain's Log

"Bring explicit intentionality into your life."
Started: Thu - 3/18/21

npm init
npm install eslint --save-dev
npx eslint --init

Set up an upstream remote.

git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git

Reset my fork to be up-to-date with original repo.

git reset --hard upstream/master

To hard-pull from HEAD and overwrite all local files.

git fetch
git reset --hard origin/main
git reset --hard upstream/master

Git commands

git log origin/main..HEAD
git remote -v

Firebase Commands

firebase emulators:start --only "auth,firestore" --import=data\multi-users --export-on-exit=data\saved_data
firebase emulators:start --only hosting
firebase deploy --only hosting
firebase deploy --only functions
firebase emulators:export data\multi-users

$> netstat -ano | findstr :8080
$> taskkill /PID <PID> /F
$> dir env:

Misc Links


Project Motivation

Several motivations inspired and drove this project.

First: I've always been a big fan of the "self-quantification movement." I own a Fitbit and enjoy seeing granular metrics on everything I do: Sleep, exercise, etc. But Fitbit alone was insufficient. I wanted to know how much time I spent eating, brushing my teeth, running errands, etc.

Second: I wanted a good project with which to learn React with hooks and what webdev looks like nowadays in 2021. Webpack, ESLint, TypeScript, Firebase preview channels, the whole nine yards. My previous knowledge on the webdev front was horribly outdated. Also: Tests, design patterns, Git. It was high time to get caught up.

Finally, realistically though, what really drove this project: My wife, honest to God, bugs me probably once a week that "I don't spend enough time with her." And that: "I love my computer and spend more time with it than I love her." Utter baloney. With this app, I now finally have hard, cold data to show The Wife that, "See? We did visit the park four times last week!" and "I spent an aggregate total of __ hours __ minutes with you last month watching Netflix, going out for walks, and eating."

Data and technology to the rescue! 😀

captains-log's People

Contributors

r002 avatar

Watchers

 avatar

captains-log's Issues

✨ Impl 'Flash Alert' modal window

Impl a global handler in App.tsx that will listen for any custom flashAlert events.

When a flashAlert event is received:

  • Flash a modal overlay with the flash alert message for five seconds (make duration configurable later)

✨ Add button/feature to export all logs as a json file to download

After a user logs in, paint a button in the navbar that lets them download all of their logs as a json file to save locally.
Basically, just export all of their logs from Firestore.

In future: Allow user-configurable parameters in the GUI to download their logs windowed by datetime or filtered by criteria (eg. dt, etc)

You might be interested in this! 🙂

Hi @r002 !

I don't know if you remember me, but you submitted a pull request in my repo mithi/epic-react-exercises. We had chats about different coding philosophies and ideas about separation of concerns and typescript..
I didn't know how to contact you, so I'm just submitting an issue here. 😅
I'm writing because I wrote something that you might be interested in, it's a short document where I gather my thoughts about writing good React code. I hope you like it, and if you have any comments, suggestions or violent reactions, don't hesitate to tell me. Thanks!

https://github.com/mithi/react-philosophies

Create landing page

  • What does the landing page look like? Still need to actually figure this out. 🙄

✨❔ Add Firestore listeners to logItems?

If this feature is implemented, then if updates are made from other sources (eg. Another running instance or the Firestore console), then the GUI will automatically update to reflect those changes.

Implement this feature? Need to explore/analyze all implications. Eg. Changing one log could trigger metalogs (like durations and sleep logs) to be processed. Do we want this?

✨Create "Demo Mode"

When an unauthenticated user first lands on the site, show some dummy logs displaying all the different possible commands and ways to use the system.

Write documentation detailing all the different commands that the system understands. Give usage examples.

✨Impl 'watch' command


Specifications

  1. User enters $> watch YOUTUBE_LINK
  2. Parse and input into db:
{
   logId: string,
   dt: Date,
   created: Date,
   command: `watch`
   url: `YOUTUBE_LINK`
   videoTitle: `VIDEO_TITLE`
}

Example:

{
   logId: "buIYEva0zJK9EcaUySue",
   dt: Tue Mar 30 2021 11:44:04 GMT-0400,
   created: Tue Mar 30 2021 11:44:04 GMT-0400,
   command: "watch"
   url: "https://www.youtube.com/watch?v=8xg3vE8Ie_E"
   videoTitle: "Taylor Swift - Love Story"
}

GUI Result

In ActivityLog, show:
Tue Mar 30 2021 12:06 ET :: Watch Taylor Swift - Love Story

In the PreviewPane, show iframe of the YouTube vid.

✨ Add 'Editor' page that's used to submit candidate passages

Specs:

  • A candidate passage is always in the context of a storyId and a parentPassageId.
  • A story is a chain of passages that have graduated from candidate status to cannon status.
  • For every story, there can only be one cannon?

GUI:

  • For each passage candidate, specify its parentPassageId -- this also automatically then sets its storyId.

📝 Specs for the Storyboard Feature

Specs:

  • Once a candidate is voted on, that vote is permanent. It can't be changed.
  • Create a demo mode that will simulate the clock striking midnight and finalizing cannon.
  • The moment the deadline passes for that day's passage, also tally up and show how many votes the other candidate received?
  • Each passage's author and vote count is hidden until the deadline passes. Only the admin can login and see the progress of who voted for what and when in real time. Everyone else must wait for the deadline to pass before before they're able to see results.

Unimplemented:

  • Put 👍👎 into the "Candidate" buttons that update as soon as the passage is voted on.
    Didn't implement this because it requires many Firestore reads the way the data's currently stored. In the future, consider additionally storing all votes in a single doc per user? This way I can just make one call and get all votes at once, rather than query each individual passage's vote collection.

Questions:

  • How many passages are users allowed to vote for? Three?
  • What happens if there is a tie between candidates?

Example:

image

♻️ Parse logs on entry to add 'command' & 'activity' fields to Log in Firestore

Instead of using regex during the processing phase, refactor the code to parse the log entry on input.
Parsing upfront offers several advantages:

  1. If the command is invalid, reject.
  2. Store command and activity as their own fields per log in Firestore. This will allow us to use/analyze them easier later.

Commands that resolve:

  1. wake up ➡️ sleep
  2. return ➡️ go for depart depart for take break nap take nap
  3. finish ➡️ start eat begin watch

Supported mono-commands :

  1. brush teeth

🐞 Fix 'FlashAlert' bug. Reset every time the theme changes

Video of bug:

Fix.FlashAlert.bug.Reset.every.time.the.theme.changes.23.mp4

Btw: The entire way FlashAlert is currently implemented is super-hacky. For now it's fine (other features to add! Places to go! Tasks to complete!) But eventually, refactor FlashAlert to actually implement it correctly!

captains-log/src/App.tsx

Lines 64 to 91 in a9c68bb

function listenForFlashAlert (event: Event) {
const fa = (event as CustomEvent).detail as TFlashAlert
setFlashAlert(fa)
console.log('!!!!!!!!!!!!!! FlashAlert received!', fa)
}
useEffect(() => {
document.body.addEventListener('flashAlert', listenForFlashAlert, false)
return () => {
document.body.removeEventListener('flashAlert', listenForFlashAlert)
}
}, [])
useEffect(() => {
setFlashAlert(null) // Reset the Flash Alert every time. This is hacky; fix later 3/28/21
}, [user, theme])
let appWrapper = <></>
if (!initializing) {
appWrapper =
<>
<ThemeManager.Provider value={theme}>
<UserContext.Provider value={{ user }}>
<Navbar changeTheme={togTheme} />
<Body>
{flashAlert &&
<FlashAlert key={new Date().toString()} {...flashAlert} />
}

✨Add 'created_dt' as a field in 'log' item

Adding this field to the schema will allow us to audit in the future and see all logs which have been edited since their creation.

Ie. The user manually edits the log's dt or activity fields.

✅ Write tests

Write tests to ensure these internal calls generate their expected results:

  • Processing Logs returns expected
  • Rendering Logs returns expected

✨Add Details Preview Pane

Clicking on a log should display its details in this Details Preview Pane.
It should appear on the RHS of the GUI.

Put a thick red border around the log to show it is currently selected.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.