v0.8 Release – Implementing the Changeset Query UI

In my previous blog post I had discussed the changeset UI bug. I’ve thought about how I’m going to implement this and I’ve decided to use a little drop down menu. It’s going to have two choices, the date or the changeset. Then according to the choice the appropriate query will be called.

Lets have a look at the code. All of it can be found in the hg_templates/pushlog.tmpl file. First, we have some HTML markup to setup the text boxes and the the button. Then, I added a drop down menu that calls the function, changeQueryType() when the selected item in the drop down is changed. I’ve decided to put the drop down within the same div as the two text boxes and positioned it using the HTML space symbol. The following is the code:

<form action="{url}pushloghtml">
<div class="search">
<select id="querytype">
<option value="date">Date</option>
<option value="changeset">Changeset</option>
</select>
 
From:
<input id="from" name="startdate" type="text" value="#startdate|escape#" />
To:
<input id="to" name="enddate" type="text" value="#enddate|escape#" />
<input type="submit" value="Search" /></div>
</form>

Now, as I mentioned I have a JavaScript function called onchange() for the drop down menu. The following is the code:

function changeQueryType()
{
  var queryType = document.getElementById("querytype");
  var fromBox = document.getElementById("from");
  var toBox = document.getElementById("to");
  if(queryType.value == "changeset") {
    fromBox.name = "fromchange";
    fromBox.value="#fromchange|escape#";
    toBox.name = "tochange";
    toBox.value="#tochange|escape#";
  } else {
    fromBox.name = "startdate";
    fromBox.value="#startdate|escape#";
    toBox.name = "enddate";
    toBox.value="#enddate|escape#";
  }
}

So basically, I retrieve the drop down menu by a getElementById() and then check what the user has selected. If the user selects a changeset then I set the appropriate name and value of both the text boxes, otherwise I set the name and value for the date query.

The pushlog doesn’t look very different with this patch. No big changes, just a small dropdown menu shows up beside the 2 text boxes at the top right of the page. I’ll be posting this patch on the bug page very soon.