Html Fragments New Example FR01

About Raw Html Test Data

Html format Event Data can be output by the FR application and uploaded as is.

Look at the raw file without any javascript or css at work

NameTest.html IDM-420-1991.html

Have a look inside the NameTest file

Use browser dev tools or the excerpt below:

<html>
<head><title></title></head>

<body>

<h1>NameTest</h1>

<table class="sortable fr results">

<thead>
<tr>
<th class="h">ID</th>
<th class="h">SNR</th>
<th class="h">Bib</th>
<th class="hl">DN</th>
<th class="h">NAT</th>
<th class="h">R1</th>
<th class="h">R2</th>
<th class="h">Total</th>
<th class="h">Rank</th>
</tr>
</thead>

<tr>
<td class='a'>1</td>
<td class='ae'>1000</td>
<td class='ae'>1</td>
<td class='al'>FN1 LN1</td>
<td class='ae'>GER</td>
<td>2</td>
<td>3</td>
<td class='a'>5.0</td>
<td class='a'>2</td>
</tr>

<tr>
<td class='n'>2</td>
<td class='e'>1001</td>
<td class='e'>2</td>
<td class='nl'>FN2 LN2</td>
<td class='e'>ITA</td>
<td>7</td>
<td>4</td>
<td class='n'>11.0</td>
<td class='n'>5</td>
</tr>

// more table rows follow ...

</table>

<table class="fr properties">
<thead><tr><th>Name</th><th>Value</th></tr></thead>
<tr><td>EP.Name</td><td>NameTest</td></tr>
<tr><td>EP.ScoringSystem</td><td>Low Point System</td></tr>
<tr><td>EP.Throwouts</td><td>0</td></tr>
<tr><td>EP.NameFieldSchema</td><td>NX</td></tr>
<tr><td>EP.FieldCaptions</td><td>DN,NAT</td></tr>
<tr><td>EP.NameFieldCount</td><td>2</td></tr>
<tr><td>EP.NameFieldOrder</td><td>12</td></tr>
<tr><td>EP.FieldCount</td><td>2</td></tr>
</table>

<div id="index_table"><pre>
[
[1,1,1,1,3,4,8,8,8],
[2,2,2,2,1,1,7,1,1],
[3,3,3,3,2,8,1,7,7],
[4,4,4,4,4,7,2,4,4],
[5,5,5,5,5,3,5,2,2],
[6,6,6,6,6,5,6,5,5],
[7,7,7,7,7,2,4,3,3],
[8,8,8,8,8,6,3,6,6]
]
</pre></div>

</body>

</html>

You can see that:

Note:

About table cell styling

This is a just a suggestion, I think the output of the css class attributes is optional.

Incomplete legend for the attribute values:

n = a normal row
a = alternate row
e = editable row (editable in the application, not on the html page) 
nl = normal row but left aligned
ae = editable column cell in alternate row
g1 = group 1, the default if not racing in groups
g2 = group 2, when they are racing in groups/fleets
g0 = group 0, for the medal race

About the Event Menu page

The event menu page will have menu items, links or buttons, for the events.

The original example has the links in the sidebar and/or in a menu component.

In order to use the raw html file format as intended on a static web site:

  1. Create a hosting event menu page, just another html file.
  2. Place a div element in there that is going to host the result table.
  3. Have a link on the event menu page for every event.
  4. Execute javascript when you click on the link.
  5. Let the javascript download the raw html for the event via ajax.
  6. Use jquery to put the result table into the div.
  7. Handle click events on the hd column header cell elements of the result table.
  8. Use the index_table data in the event data html to sort the result table when the user clicks.
  9. Provide a css style sheet on the host page to style the table.

You do NOT need to touch the raw html event data files. Use them as output by the application.

Examine the source of the event menu page

Event Menu Page JavaScript CSS

Prepare your event web site

Prepare your site upfront, say you have a regatta with 8 events (classes), then you need to:

Push updated event data files to the server as the event progresses.

Just an idea

How you can have the site for your Regatta online easily, with no money spent on your part:

I think it is possible, I am quite sure from what I have been reading about GitHub Pages.

A-2004-470-M.html
A-2004-470-W.html
A-2004-49er.html
A-2004-Europe.html
A-2004-Finn.html
A-2004-Laser.html
A-2004-Mistral-M.html
A-2004-Mistral-W.html
A-2004-Star.html
A-2004-Tornado.html
A-2004-Yngling.html
C-2007-470-M.html
C-2007-470-W.html
C-2007-49er.html
C-2007-Finn.html
C-2007-Laser-M.html
C-2007-Laser-W.html
C-2007-RSX-M.html
C-2007-RSX-W.html
C-2007-Star.html
C-2007-Tornado.html
C-2007-Yngling.html
FleetTest.html
IDM-420-1991.html
IDM-420-1997.html
IDM-420-2000.html
IDM-420-2004.html
NameTest.html
P-2011-470-M.html
P-2011-470-W.html
P-2011-49er.html
P-2011-Finn.html
P-2011-Laser-M.html
P-2011-Laser-W.html
P-2011-RSX-M.html
P-2011-RSX-W.html
P-2011-Star.html
Q-2008-470-M.html
Q-2008-470-W.html
Q-2008-49er.html
Q-2008-Finn.html
Q-2008-Laser-M.html
Q-2008-Laser-W.html
Q-2008-RSX-M.html
Q-2008-RSX-W.html
Q-2008-Star.html
Q-2008-Tornado.html
Q-2008-Yngling.html

Unofficial test data, is this even correct ?

It is possible to know if the application computes the same result. You use a compare list, which can be included in a text data file. The given html sample files do not include a compare list.

My local version of the NameTest example in text format does:

#Params

DP.StartlistCount = 8
DP.ITCount = 0
DP.RaceCount = 2

#Event Properties

EP.Name = NameTest
EP.ScoringSystem = Low Point System
EP.Throwouts = 0
EP.DivisionName = 420
EP.InputMode = Strict
EP.RaceLayout = Finish
EP.NameSchema = NX
EP.FieldMap = FN,_,LN
EP.FieldCaptions = FN,LN,SN,NAT,FN2,LN2,CPos
EP.FieldCount = 7
EP.NameFieldCount = 2
EP.NameFieldOrder = 04
EP.UseFleets = False
EP.TargetFleetSize = 8
EP.FirstFinalRace = 20
EP.IsTimed = False
EP.UseCompactFormat = True

NameList.Begin
SNR;N1;N2;N3;N4;N5;N6;N7
1000;FN1;LN1;SN1;GER;FN2-1;LN2-1;x
1001;FN2;LN2;SN2;ITA;FN2-2;LN2-2;y
1002;FN3;LN3;SN3;FRA;FN2-3;LN2-3;z
NameList.End

StartList.Begin
Pos;SNR;Bib
1;1001;1
2;1002;2
3;1003;3
4;1004;4
5;1005;5
6;1006;6
7;1007;7
8;1008;8
StartList.End

FinishList.Begin
SNR;Bib;R1;R2
1001;1;2;3
1002;2;7;4
1003;3;5;8
1004;4;1;7
1005;5;6;5
1006;6;8;6
1007;7;4;2
1008;8;3;1
FinishList.End

CompareList.Begin
008=00400
001=00500
007=00600
004=00800
002=01100
005=01100
003=01300
006=01400
CompareList.End

#W1

#W2

EP.IM = Strict

Find the compare list in the text above.

ID: The 1 based ID is automatically maintained by the program. Internally the collection of items is never sorted. Think of ID as derived from initial start list order. Pad with zeros to the left to get three digits.

Points: You usually display and compare two digits after the decimal for series points. Just multiply by 100, take the integer part of the number, and pad with zeros to the left. That should be the value for the compare list.

Compare lists need to match exactly.

There may or may not be a green light in the application. But the application should produce a compare list, and be able to compare against a given compare list. If the compare lists (given and computed after loading) do not match, the application will indicate this in the output of the produced compare list. For example, lines will be commented out or marked in an appropriate way. You can test this out in the application.

When you find an issue, please include a compare list in addition to original info.