Global Team Time Zone Viewer with Slack Integration

A static web application that helps distributed teams track local times and work hours across different time zones, with automatic Slack status updates.

Features

Time Zone Tracking: View team members' local times across different time zones
Work Hours Visualization: See who's currently working (green) or off-hours (red)
Slack Status Integration: Automatically update Slack status with local time and work status
Persistent Storage: Team members are saved locally using localStorage
Responsive Design: Works on desktop and mobile devices

Setup Instructions

1. Basic Web App (No Slack Integration)

Simply open index.html in a web browser to use the basic time zone viewer.

# Using Python
python3 -m http.server 8000

# Or using Node.js
npx http-server -p 8000

Then visit http://localhost:8000

2. Slack Integration Setup

Prerequisites

Node.js (v14 or higher)
A Slack workspace where you can create apps

Step 1: Create a Slack App

Go to https://api.slack.com/apps
Click "Create New App" > "From scratch"
Name your app (e.g., "Team Time Zone Status")
Select your workspace

Step 2: Configure OAuth & Permissions

In your app settings, go to "OAuth & Permissions"
Under "Redirect URLs", add: http://localhost:3000/slack/callback
Under "User Token Scopes", add:
- users.profile:write
- users.profile:read

Step 3: Get App Credentials

Go to "Basic Information" in your app settings
Copy your:
- Client ID
- Client Secret

Step 4: Set Up Backend

Navigate to the backend directory:
```
cd backend
```
Install dependencies:
```
npm install
```
Create a .env file:
```
cp .env.example .env
```

Edit .env with your Slack credentials:

SLACK_CLIENT_ID=your_client_id_here
SLACK_CLIENT_SECRET=your_client_secret_here
SLACK_REDIRECT_URI=http://localhost:3000/slack/callback

Start the backend server:
```
npm start
```

Step 5: Use the Integration

Open http://localhost:3000 in your browser
Click "Connect Slack" button
Authorize the app in your Slack workspace
Your Slack status will now automatically update every minute with:
- 🟢 Green circle when you're in work hours
- 🔴 Red circle when you're off hours
- Your local time and timezone

How It Works

Slack Status Updates

The backend runs a cron job every minute
It updates each connected user's Slack status with their local time
Work hours are respected - status shows green/red based on work schedule

Data Storage

Frontend: Team members stored in localStorage
Backend: Slack user data stored in SQLite database (slack_users.db)

Customization

Modify Work Hours

Connected Slack users' work hours are set to 9:00-17:00 by default. You can modify these in the database or add UI controls to change them.

Add More Timezones

Edit the timeZones array in app.js to add more timezone options.

Change Update Frequency

In backend/server.js, modify the cron schedule:

// Current: every minute
cron.schedule('* * * * *', () => {

// Every 5 minutes
cron.schedule('*/5 * * * *', () => {

Troubleshooting

"Please start the backend server first!"

Make sure you've run npm start in the backend directory.

Slack OAuth Error

Verify your Client ID and Client Secret are correct
Ensure the redirect URL matches exactly: http://localhost:3000/slack/callback
Check that you've added the required scopes

Status Not Updating

Check the console logs in the backend terminal
Verify the user has "status_enabled" set to true
Ensure the Slack access token is still valid

Security Notes

Never commit your .env file with real credentials
The Slack access tokens are stored in a local SQLite database
Consider using HTTPS in production
Implement proper authentication if deploying publicly

ethe/timeis