Timeclock Svelte

mattsharpdesign

An experimental add-on to react-time-clock, using Svelte

timeclock-svelte

An experiment using the (at the time) fairly new Svelte framework.

I was considering rewriting the timeclock-react app in Svelte but only got as far as an employee list management screen. Still, it was deployed to production, the code is pretty clean, and it works :)

Setup

Put your Firebase config values in .env (or .env.development etc)

Example of .env file

FIREBASE_API_KEY=<your api key>
FIREBASE_AUTH_DOMAIN="<your project id>.firebaseapp.com"
FIREBASE_DATABASE_URL="https://<your project id>.firebaseio.com"
FIREBASE_PROJECT_ID=<your project id>
FIREBASE_STORAGE_BUCKET="<your project id>.appspot.com"
FIREBASE_MESSAGING_SENDER_ID=<your sender id>
FIREBASE_APP_ID=<your app id>

Data created by the clock in/out app

After first clock in

{
  employee: {
    firstName: "Matt",
    id: "E5Hast6...", // firebase employee doc id
    lastName: "Something"
  },
  employeeId: "E5Hast6...", // firebase employee doc id
  finish: null,
  isApproved: false,
  start: {
    comment: "",
    screenShotData: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...",
    timestamp: // firebase timestamp (created from js Date object)
  }
}

After clock out

{
  // as above plus:
  finish: {
    comment: "Left early",
    screenShotData: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...",
    timestamp: // firebase timestamp (created from js Date object)
  }
}

Additional shifts on the same day (eg after lunch) are completely separate shift docs in their own right (ie it's up to the frontend to group them as required).

Top categories