ClockIn: Preparing the Shortcode

Last time I basically shutdown all possibilities of using google calander, but thats fine, SQL is an efficient alternative and it should be no issue.

CREATE TABLE Clock_ins (
 time datetime DEFAULT NOW() NOT NULL,
 duration int DEFAULT 0 NOT NULL,
 user tinytext NOT NULL,
 project tinytext NOT NULL

Now, theres 3 main UIs I need to focus on

  1. Clock In, Clock out-This will be in the sidebar, or really where ever someone wants to put it
  2. Project Chooser-When we begin to clock in, we need to be able to choose from our existing repositories
  3. Clock In Viewer (User and Project mode)-Whats a database if we can’t view it? Here we give sexy charts for people to look at to make them feel comfortable (We’ll worry about this later

So For Clock In, Clock out…. We’re going to want to add in a some WordPress Shortcode tags so that we can place it anywhere we want Our shortcode is going to be called [clock_in] and theres three major things we’ll be needing from the user -Their user id -their github id -The project they’re going to clockin to

function clock_in_setup( $atts, $content=null) {
 $current_user = wp_get_current_user();
 $type = "ajax";

 if ( !($current_user instanceof WP_User) ){
 $message = "Please Login First";
 $href = wp_login_url( get_permalink() );
 }else if(($meta = get_user_meta($current_user->ID, "clockin")) == array()){
 $json = json_decode(file_get_contents(plugin_dir_path( __FILE__ )."/secret.json"));
 $cid = $json->cid;
 $redirect_uri = plugins_url("auth.php", __FILE__);
 $state = "clock-in_plugin".$current_user->ID;

 $href = "";
 $href .= "?client_id=".$cid;
 $href .= "&redirect_uri=".$redirect_uri;
 $href .= "&state=".$state;

 $message = "Authorize our plugin";
 }else if(isset($atts["cur_project"])){
 $nonce = wp_create_nonce("clock_in");
 $href = admin_url('admin-ajax.php?action=clock_in&proj='.$atts["curproject"].'&nonce='.$nonce);
 $message = "Clock in!";
 }else if($meta["clocked"] == true){
 $nonce = wp_create_nonce("clock_in");
 $href = admin_url('admin-ajax.php?action=clock_out&nonce='.$nonce);
 $message = "Clock out!";
 $href = plugins_url("clocked.php", __FILE__)."?action=in";
 $nonce = wp_create_nonce("clock_in");
 Choose a project to Clock Into
 <div class="clockin-wrap">
 <a style="display:inline-block;height:144px;width:64px;background-color:#000;"></a>
 <div class="clockin_projects" style="display:inline-block;height:144px;width:144px;">
 <a style="display:inline-block;height:144px;width:64px;background-color:#000;">
 wp_enqueue_script ('clock_in_proj');
 wp_localize_script('clock_in_proj', 'clock_in_vars', array("github_user"=>$meta["github"], "clockin_uri"=>admin_url('admin-ajax.php?action=clock_in&&nonce='.$nonce)));
 return ob_get_clean();
 <div class="clockin-wrap">
 <a class="clockin_anchor" href=<?php echo $href; echo ($type != "ajax")?" target=".$type.'"':''; ?> ><?php echo $message ?></a>
 if($type == "ajax"){
 wp_enqueue_script ('clock_in');
 return ob_get_clean();

What I’m doing here essentially is creating a link where ever the shortcode is. The Link will either;  direct to login, direct to github authorization, if its a project page, allow person to clock in, display logged persons projects to clock in or show clockout link. Next we need to make sure we authenticate with github, then display our projects properly

Clock In: Top Down Design

One of the major components that made my old site special was my clockin service. What it offered was for me to be able to clockin to any of my projects, this saved a start time. That started a listener (Imagine a machine that waits for something to happen before it does what it does) for any new file being created to see what work I did. Then On clock out, stop the listener and save a stop time.

Pseudo Code

Now Overall here is the Way it works
1) As a User, I choose from a variety of projects or have the ability to start my own
2) I then clock into that project
2a) The start time is saved
2b) A listener to see what work I’ve done is created
3) Once I’m done I clock out
3a) The stop time is saved
3b) The listener is stopped

On top of that other people can go through the various projects and users to see their start and stop times as charts
1) Daily
2) Weekly
3) Monthly


For UI, this is something basic to go off of
UI (2)UI (1)UI



For Flow Charting This is what I’m Looking At

UI (3)UI (4)


-ID-Integer (Auto Increment)
-Projects they can edit-Array[ProjectID] (If a project is deleted, this needs to be updated)

-ID-Integer (Auto Increment)
-String-Path/URL/Location to start listener (must be real)

-ID-Integer (Auto Increment)

-Id-Integer(Auto Increment)
-Clockin-ClockIn ID (Dependent, if its Clockin is deleted, its deleted)
-Type-Create, Save, Delete (Research may also be included)


Now this is all pretty straight forward, lets take a look at what technology we want to use

  1. User-Whatevers convenient, Preferably WordPress considering that’s my cms
  2. Project-Github Github and Github
    -Github is the standard of version control. As a Result, we want people to use good things, the best of things in addition to user our clockin service.
  3. ClockIn
    -This is something I realized is a bit of an issue. I can have hundreds of Clockins which isn’t necessarilly a problem. But what Is a problem is when I lose my data when my server goes down. Or even when I transfer servers like I’m doing now. Though I don’t want to use a third party service I fear I may have to.

    I generally like to use technologies I will most likely use later so…

    So I have 3 choices…

    1. Google Spreadsheets
    2. MongoDB
    3. Google Calander
  4. Work
    -Though My old system was based off of the servers file system, the system I want to create is more likely to be based off of Github. As such I need to be able to grab from github whatever they do. That means pull requests, pushes, etc. I need to tell my people, push often 😉

Clockin-Google Calander for now (as it is the most reusable technology)