Displaying CSV spread sheet data on a landing page.


A fires list data view working example is running at the following address:

http://www.generalpurposes.com/nodes/MorelFireLists2016/

Open or create a new node and paste the code below into the landing page editor by clicking the pencils where you want the view to display. Paste and save.

[[QUERY_STRING:search]]    
[[LOAD_DATAFEED:FireList.csv|,]]
[[COLUMN_DMS2GPS:Latitude]]
[[COLUMN_DMS2GPS:Longitude]]
[[COLUMN_DATE2UNIX:Date]]
[[VIEW_DATAFEED]]
[[INITIALIZE:perpage|100]]
[[INITIALIZE:sort_order|"{DESCENDING}"]]
[[QUERY_STRING:sort_order]]
[[INITIALIZE:sort_column|Total]]
[[QUERY_STRING:sort_column]]
[[INITIALIZE:v_page|1]]
[[QUERY_STRING:v_page]]
[[QUERY_STRING:select]]
[[IF:$select=='1']]
  [[VIEW_SELECT:(($_Total)>=0.001)AND(($_Total)< 10)]]
 [[ELSE_IF:$select=='2']]
  [[VIEW_SELECT:(($_Total)>=10)AND(($_Total)< 100)]]
 [[ELSE_IF:$select=='3']]
  [[VIEW_SELECT:(($_Total)>=100)AND(($_Total)< 1000)]]
 [[ELSE_IF:$select=='4']]
  [[VIEW_SELECT:(($_Total)>=1000)AND(($_Total)< 10000)]]
 [[ELSE_IF:$select=='5']]
  [[VIEW_SELECT:(($_Total)>=10000)AND(($_Total)< 100000)]]
 [[ELSE_IF:$select=='6']]
  [[VIEW_SELECT:(($_Total)>=100000)AND(($_Total)< 1000000)]]
[[END_IF]]
[[VIEW_SEARCH:search]]
[[INITIALIZE:numpages|intval(count($TerraDctl_view)/$perpage)+1]]
[[IF:$v_page>$numpages]]
 [[INITIALIZE:v_page|$numpages]]
[[END_IF]]
[[DIV:vskin|TerraDctl_view_skin]]
 [[BOX:table_header_container|text-align:right;padding-right:10px;]]
  [[BOX:links|float:left;font-size:70%;font-family:verdana;color:white;]]
   Acres: 
     [[LINK:http://www.generalpurposes.com/nodes/MorelFireLists2016/?v_page=1&sort_column=Total&sort_order={DESCENDING}&select=0&search=[[=search]]|All]]
     [[LINK:http://www.generalpurposes.com/nodes/MorelFireLists2016/?v_page=1&sort_column=Total&sort_order={DESCENDING}&select=1&search=[[=search]]|<10]]
     [[LINK:http://www.generalpurposes.com/nodes/MorelFireLists2016/?v_page=1&sort_column=Total&sort_order={DESCENDING}&select=2&search=[[=search]]|10s]]
     [[LINK:http://www.generalpurposes.com/nodes/MorelFireLists2016/?v_page=1&sort_column=Total&sort_order={DESCENDING}&select=3&search=[[=search]]|100s]]
     [[LINK:http://www.generalpurposes.com/nodes/MorelFireLists2016/?v_page=1&sort_column=Total&sort_order={DESCENDING}&select=4&search=[[=search]]|1000s]]
     [[LINK:http://www.generalpurposes.com/nodes/MorelFireLists2016/?v_page=1&sort_column=Total&sort_order={DESCENDING}&select=5&search=[[=search]]|10000s]]
     [[LINK:http://www.generalpurposes.com/nodes/MorelFireLists2016/?v_page=1&sort_column=Total&sort_order={DESCENDING}&select=6&search=[[=search]]|100000+]]
  [[END_BOX]]    
  <form action="#this" style="margin:0px;padding:0px;padding-bottom:4px;">
  <input id="search" name="search" value="[[=search]]" type="text" style="border:1px #000 solid;"><input style="background-color:$bbb;color:green;border:1px #000 solid;" value=" ? " type="submit">
  </form>
  [[INITIALIZE:message|"$v_page of $numpages"]]
  <!--[[PRINT:message]][[cr]]/-->
 [[END_BOX]]
 [[BOX:viewbox|width:100%;text-align:center;]]
  [[TABLE:viewtable|TerraDctl_view_table|width:100%;text-align:center]]
   [[IF:$sort_order=="{DESCENDING}"]]
     [[VIEW_SORT_DESC:$sort_column]]
   [[ELSE]]
     [[VIEW_SORT:$sort_column]]
   [[END_IF]]
   [[VIEW_COLUMN_SORT]]
   [[VIEW_PAGINATE:$v_page|$perpage]]
   [[VIEW_DISPLAY]]
  [[END_TABLE]]
 [[END_BOX]]
 [[IF:$numpages>1]][[cr]][[VIEW_PAGELINKS:$numpages]][[cr]][[END_IF]]
 [[BOX:legend|font-size:70%;font-family:verdana;color:white;]][[cr]][[cr]]
  A  -  Annual grasses (cheat)[[cr]]
  B  -  Dense Chaparral[[cr]]
  C  -  Open pine, grass under[[cr]]
  F  -  Dense Brush (lighter than B)[[cr]]
  G  -  Conifer, Old growth[[cr]]
  H  -  Conifer, Second growth[[cr]]
  I  -  Slash, heavy[[cr]]
  J  -  Slash, medium[[cr]]
  K  -  Slash, thinning, P.C., Scattrd[[cr]]
  L  -  Grass Perennial[[cr]]
  R  -  Hardwood, summer[[cr]]
  T  -  Sagebrush, medium dense[[cr]]
  U  -  Closed canopy pine[[cr]]
  X  -  Non wildland fuel[[cr]]
<?php
 $kml_url=str_replace("/?","/KML/?",$this_url);
?>
  [[BOX:kml|text-align:right;]]<a href="[[=kml_url]]" border="0" style="text-align:right;"><image src="kml.png" height="48" width="48" /></a>
  [[END_BOX]]
 [[END_BOX]]
[[END_DIV]]

Go to nodes landing page manager and click TEMPLATES to get to the template file manager. Create a new file called view.tpl; Click TEMPLATES again. Scroll down to view.tpl and click the pencil to open it for editing.

Paste the following code exactly as is:

$latitude1="%Latitude%";
$longitude1="%Longitude%";
$time="%Date%";
$ReportDate1 = date('m/d/y',$time);
$output="<tr class=\"%even_odd%\">
    <td>%Year%</td>
    <td>%District%</td>
    <td>%Unit%</td>
    <td style=\"text-align:center;padding-right:4px;\">%Number%</td>
    <td><a target=\"new\" href=\"https://www.google.com/maps/place/$latitude1%20$longitude1\">%FireName%</a></td>
    <td>%Legal%</td>";
$output.="<td>$latitude1</td>
        <td>$longitude1</td>
        <td style=\"text-align:center;\">%Fuel%</td>
        <td>%County%</td>
        <td>$ReportDate1</td>
        <td>%Cause%</td>
        <td style=\"text-align:right;\">%ODF%</td>
        <td style=\"text-align:right;\">%Total%</td>
        </tr>";
print $output;

Save, go to CSS File manager and create a file called TerraDctl_view.css.  Paste the following CSS code:

.TerraDctl_view_table{font-family:arial;border:1px #444 solid;padding:0px;margin:0px;border-spacing:0px;font-size:70%;}
.TerraDctl_view_table td{text-align:left;border:0px #000 solid;padding:0px;margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px;padding-left:3px;padding-right:3px;}
.TerraDctl_view_table td a{text-decoration:none;}
.TerraDctl_view_table td a:hover{text-decoration:none;color:green;}
.TerraDctl_view_skin{border:1px #000 solid;padding:5px;margin:5px;background-color:#28517f;}
.TerraDctl_view_header{text-align:center;border:2px #000 solid;padding:5px;margin:5px;background-color:#99f;}
.TerraDctl_view_header td{text-align:center;border-bottom:1px #000 solid}

.TerraDctl_view_header td:hover{text-align:center;border-bottom:1px green solid;background-color:#999;}
.TerraDctl_view_header tr{border-bottom:1px #000 solid;}
.TerraDctl_view_header td a{font-size:100%;font-weight:bold;text-decoration:none;}
#links a{background-color:#999;padding:2px;margin:2px;border:1px #444 outset;text-decoration:none;color:blue;}
#links a:hover{background-color:#bbb;padding:2px;margin:2px;border:1px #555 inset;text-decoration:none;color:green;}
#links a:active{background-color:#ddd;padding:2px;margin:2px;border:1px #555 inset;text-decoration:none;color:black;font-weight:strong;}

.pagination_links{border:1px #444 solid;margin:2px;padding-top:0px;padding:3px;text-decoration:none;background-color:#ccf;font-family:verdana;font-size:120%;}
.pagination_page_number{border:1px #000 solid;margin-right:6px;margin-left:2px;padding-top:0px;padding:3px;color:#ccf;background-color:#444;font-family:verdana;font-size:120%;}
.odd{background-color:#bbb;}
.even{background-color:#aaa;}

Go to TEMPLATES. Add this line of html code to index_template.tpl in the head section anywhere before the </head> tag :

<link rel="stylesheet" type="text/css" href="TerraDctl_view.css" />

Download the data file by right clicking the link below:

http://www.generalpurposes.com/nodes/MorelFireLists2016/FireList.csv

Upload the file to your node or create new one with the file manager and paste the csv data directly from notepad.

Test.

Note: When adapting this script example to your own custom data, make sure that each cell in your spreadsheet contains a value before saving as a csv or tabbed text file.

If using a tabbed text file change the LOAD_DATAFEED statement from

[[LOAD_DATAFEED:FireList.csv|,]]

to:

[[LOAD_DATAFEED:FireList.csv|\t]]

 

 

 

 

 

 

 

Leave a Reply