ブラウザからTimeTaggerを使う - aktnk/til GitHub Wiki

  • TimeTaggerサーバに入力することで、今実施するタスクの時間を記録することができる
  • ここではWebブラウザを使い入力する手順を紹介する

default userでLoginする

  1. ブラウザ（ここではFirefoxを使用）を起動し、TimeTaggerサーバのURL（ここでは "localhost:8080/"）にアクセスし、[App]ボタンを押す start
  2. [Login]ボタンを押す app_clicked
  3. [Login as default user(on localhost)]ボタンを押す login_clicked
  4. ログインすると下記画面が表示される （注）通常最初にログインした場合、データは入力されていないので、何も表示されません。 defaultuser_loginned

タスクの実行を記録する

  1. [Record]ボタンを押す defaultuser_loginned
  2. Start record画面が表示されるので、[ペン]アイコンを押す record_clicked
  3. Tag presets画面が表示されるので、タスクの分類として幾つかTagを入力する pen_clicked
  4. 入力したら[Check&Save]ボタンを押し、[×]で閉じる check_save_clicked
  5. Start record画面が表示されるので、[Presets]ボタンを押し、先ほど定義したタグを選択する presets_select
  6. タスクの状況に応じて、下記のいずれかの方法でタスクを記録する
    • 今から開始するタスクはTime欄の[Start now]を選択し、[Start]ボタンを押す now_starting
    • 既に開始しているタスクはTime欄の[Started earlier]を選択し、開始した日付と時刻を入力し、[Start]ボタンを押す already_started
    • 既に完了しているタスクはTime欄の[Already done]を選択し、開始した日時、終了した日時を入力し、[Create]ボタンを押す already_done

入力したタスクを表示・出力（CSVファイル、PDFファイル）する

  1. Login後の画面で、[^]ボタンを押すと、前日の入力結果が表示される（[v]ボタンを押すと、1日後の入力結果が表示される） previous_day_clicked
  2. Login後の画面で、[カレンダー]アイコンを押すと、カレンダー選択ウィンドウがポップアップするので、いずれかを選択・入力し、[Done]ボタンを押すと選択に応じた日付・期間で入力結果が表示される period_entered
    • 開始日・終了日を入力した場合 period_entered_main
  3. Login後の画面で、[拡大]アイコンをクリックすると、時間間隔を広げて入力結果が表示される plus_icon_clicked
  4. Login後の画面で、[縮小]アイコンをクリックすると、時間間隔を狭めて入力結果が表示される minus_icon_clicked
  5. Login後の画面で、[Report]ボタンを押すと、Reportのポップアップウィンドウが表示される（表示方法はGrouping。Group by period等設定可能） report_clicked
  6. Report画面で[Save CSV]ボタンを押すと、入力結果がCSVファイルとして保存される CSVファイルをExcelで開いた結果
  7. Report画面で[Save PDF]ボタンを押すと、入力結果がPDFファイルとして保存される PDFファイルイメージ

Logoutする

  1. 左上のハンバーガーアイコンをクリックすると、メニューが表示されるので、[Logout]を選択するとLogoutできる menu_clicked

default user以外でログインする

  1. ブラウザのURLに "localhost:8080/timetagger/cred" と入力すると、Generate credentialsのページが表示される cred_entered
  2. テキストボックスにユーザ名、パスワードを入力すると、BCryptハッシュ値が計算され資格情報として表示される user_pass_entered
  3. TimeTaggerサーバを起動環境・方法により、上記で表示された資格情報（ユーザ名:パスワードのBCryptハッシュ値）のいずれかを使い、TimeTaggerサーバを起動する
    • Ubuntuに設定したPythonコマンドでTimeTaggerサーバを起動する場合、2つ目のDollar signs escaped with backslash, for Unix shell用の文字列を--credensialsオプションとして与えて起動する 
      (venv310) $ python -m timetagger --bind=0.0.0.0:8080 --credentials=user1:\$2a\$08\$XWPHsJp2HjhI7eeX7332zuAV8wTkpZmylKyltMwTf54hyGZgq4zOu &
    • docker-compose.ymlに視覚情報を記載し、docker composeコマンドでTimeTaggerサーバを起動する場合、3つ目のDouble dollar signs, for docker-compose scrip用の文字列を環境変数'TIMETAGGER_CREDENTIALS'として与えて起動する 
      services:
  timetagger:
    image: ghcr.io/almarklein/timetagger80
    ports:
      - "8080:80"
    volumes:
      - ./_timetagger:/root/_timetagger
    environment:
      - TIMETAGGER_BIND=0.0.0.0:8080
      - TIMETAGGER_DATADIR=/root/_timetagger
      - TIMETAGGER_LOG_LEVEL=info
      - TIMETAGGER_CREDENTIALS=user1:$$2a$$08$$XWPHsJp2HjhI7eeX7332zuAV8wTkpZmylKyltMwTf54hyGZgq4zOu # ここを3つ目の資格情報文字列を指定する
  4. ブラウザで"localhost:8080/"にアクセスし、Loginのユーザ名・パスワードに先に設定したユーザ名・パスワードを入力し、[Submit]ボタンを押せば新しいユーザでログインできる new_user