Php: JSON to HTML Diagram
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Bounty: Given an input in JSON you need to create an HTML diagram.

The diagram represents nodes that need to be executed in a sequence, with different actions, conditions, and timings.

Example Input JSON:

data = {
  nodes: {
    [ 
            id: 1,
            order: 1,
    caption: "Email 1",
    wait_time_string: "Instant",
    perfect_timing_enabled: true,
    perfect_timing_earliest: "11:00:00",
    perfect_timing_latest: "19:00:00",
    send_method: "Amazon SES",
    email_template_name: "Cradford Email 1",
    email_template_subject: "Hello George, here is Lesson 1",
    email_sender: "John <john@cradford.com>",
    condition: "Always",
    condition_parameters: null,
    execute_php_code: null,
    action: null,
    action_parameters: null    
   ],
    [ 
            id: 2,
            order: 2,
    caption: "Action 1",
    wait_time_string: "+ 8 hours",
    perfect_timing_enabled: true,
    perfect_timing_earliest: "10:00:00",
    perfect_timing_latest:"18:00:00",
    send_method: null,
    email_template_name: null,
    email_template_subject: null,
    email_sender: null,
    condition: "Always",
    condition_parameters: null,
    execute_php_code: "echo 'Hello World'",
    action: "Action 1",
    action_parameters: "Parameter 1, 2, 3 "    
   ],
    [ 
            id: 3,
            order: 3,
    caption: "Email 3 A",
    wait_time_string: "+1 day 2 hours",
    perfect_timing_enabled: false,
    perfect_timing_earliest: null,
    perfect_timing_latest: null,
    send_method: "Amazon SES",
    email_template_name: "Cradford Email 3 A",
    email_template_subject: "Hello George, here is Lesson 3",
    email_sender: "John <john@cradford.com>",
    condition: "If opened Email",
    condition_parameters: "Email 1",
     execute_php_code: "echo 'Hello World 2'",
      action: null,
    action_parameters: null    
   ],
   [ 
            id: 4,
            order: 4,
    caption: "Email 3 B",
    wait_time_string: "+0", // if the wait time string is +0, 0, or empty, then align this block vertically, since it will happen at the same time 
    perfect_timing_enabled: false,
    perfect_timing_earliest: null,
    perfect_timing_latest: null,
    send_method: "Amazon SES",
    email_template_name: "Cradford Email 3 A",
    email_template_subject: "Hello George, here is Lesson 3",
    email_sender: "John <john@cradford.com>",
    condition: "If opened Email",
    condition_parameters: "Email 1",
    execute_php_code: null,
      action: "Action 2",
    action_parameters: "Parameter 1, 2, 3 "    
   ]
  }
};

With this sample json input, I expect your function to be able to create something similar to this:
http://codepen.io/rodrix/pen/ryjjjG

I hardcoded the HTML in the sample above (it is not being generated automatically), but it is a starting point so you get an idea of how it should look.

  • At the top the datetimes of execution of each node should be shown.
  • At the bottom the details of the nodes.
  • Nodes should show only properties that are not null.
  • If action/code/ or any other property is null or false, it should not be displayed.
  • If a subsequent node has a wait_time_string of "+0", "0" or null it should be stacked VERTICALLY to the previous node, as it is happening at the same time. If not, it should be stacked HORIZONTALLY to the right.
  • Feel free to rewrite the whole HTML code from scratch. I did it just as a mock up. I am sure it can become more pretty and more tidy.
  • "Id" must not be represented visually, instead it must be saved as data-id on the html representation.
  • "order" must not be represented visually, it will represent the order of the nodes, but the json will already be presented sorted. Save the order as data-order on the html representation.

You should create a function createDiagram(json, startDateTime).

The first parameter will be the inputJson as described above.

The second parameter will be the start datetime used to calculate all of the times. Changing this value should recalculate all dates by using the time offsets in the wait_time_string. In the example above the function would have been called with "Monday March 1 2017 12:00:00 PM" (assuming it was a Monday). Note: Time offsets are based on php syntax of strtotime().

Please provide a working sample with more than 4 nodes to prove that your code can handle any JSON.

You can use PHP 5.6


Extra: Make columns dragable. User should be able to re-order the columns. Vertically stacked nodes should move together as they are in a column. Then you should send the modified orders via ajax/json:

"id":"order",
"id":"order",
"id":"order",
"id":"order",
"id":"order",
"id":"order",
"id":"order"

I advice that you should support PHP!! because in PHP, your informations, can be secured and not shared. i see that you already have some php line codes in your code. if you want to support php, i will do it for you.
Houcem B. A. Chlegou 4 months ago
I'm not sure that you JSON is valid, in each element of array, you got two times the perfecttimingenabled key. This not valid in a JSON. Can we rename it ?
kerncy 4 months ago
Houcem, yes you can do all in php
georgefountain 4 months ago
Kerncy, yes you can fix and rename Json. Thanks
georgefountain 4 months ago
There was a typo on Json, now fixed. Php can be used, no problem, and everything can br coded in php, it is a good suggestion
georgefountain 4 months ago
Task changed to php
georgefountain 4 months ago
in the JSON array, are they sorted by time? "waittimestring"? so element that need to be showed vertically in a specific time, will be next to each others? if this is the case, then give me your final crood, and i will work on it directly.
Houcem B. A. Chlegou 4 months ago
Wait time string is not a time but a time changer or modifier, that's why it is "+ 8 hours" or "+1 day". It specifies how much time to wait befote passing to the next node. The JSON array is sorted by "order"
georgefountain 4 months ago
If time to wait is 0 or null, that node should be stacked vertically.
georgefountain 4 months ago
yes this is what i was talking about. the vertically stacking. give me your final crood if you want, and i will do it for you.
Houcem B. A. Chlegou 4 months ago
came in private waiting for you
Houcem B. A. Chlegou 4 months ago
I do not know what is a crood. I don't have any more code than this.
georgefountain 4 months ago
i mean the final design. because the code at codepenio, is not a final design.
Houcem B. A. Chlegou 4 months ago
it's not a structured code
Houcem B. A. Chlegou 4 months ago
There is no final design yet. The bounty includes the coding and the design you want, as long as it meets requirements it is ok. It was just a "sketch". You are free to do a completely new design.
georgefountain 4 months ago
Tags
javascript

Crowdsource coding tasks.

1 Solution


Ok here is my working bounty:

  • i made the design.

  • i made elements drag-able.

  • and it work with PHP array input.

You can check it here: if it's fine, then i will add the order part (working on it right now):

Link: https://goo.gl/2movRf

Updates:

  • JSON output is generated.
It's great! Please go ahead and work on. The dragable part
georgefountain 4 months ago