Permalink
Browse files

Add the display code

  • Loading branch information...
1 parent 65c8ff5 commit 92ef614ccdb55d100a1ecc5ed686e46af8ac47f9 @scryan7371 committed Aug 17, 2011
Showing with 147 additions and 13 deletions.
  1. +23 −0 src/main/css/main.css
  2. +50 −13 src/main/index.html
  3. +74 −0 src/main/javascript/display/numgenDisplay.js
View
23 src/main/css/main.css
@@ -0,0 +1,23 @@
+#generateList {
+ list-style-type: none;
+}
+
+.numbers {
+ text-align: center;
+ font-weight: bold;
+ font-size: 1.0em;
+ width: 30px;
+ height: 30px;
+ float: left;
+ border: 1px solid black;
+}
+
+.selected {
+ background-color: green;
+ color: white;
+}
+
+.lastSelected {
+ background-color: red;
+ color: white;
+}
View
63 src/main/index.html
@@ -2,21 +2,25 @@
<html lang="en">
<head>
<meta charset="utf-8"/>
- <link rel="stylesheet" href="css/jquery/jquery.mobile-1.0b1.min.css"/>
- <link rel="stylesheet" href="css/main.css"/>
+ <link rel="stylesheet" href="./css/jquery/jquery.mobile-1.0b2.min.css"/>
+ <link rel="stylesheet" href="./css/main.css"/>
<title>Demo JQuery Mobile</title>
<!--[if lt IE 9]>
- <script src="javascript/html5.js" type="text/javascript"></script>
+ <script src="./javascript/shim/html5.js" type="text/javascript"></script>
<![endif]-->
- <script src="javascript/main.js"></script>
- <script src="javascript/jquery/jquery-1.6.1.min.js" type="text/javascript"></script>
+ <script src="./javascript/service/numgen.js"></script>
+ <script src="./javascript/display/numgenDisplay.js"></script>
+ <script src="./javascript/jquery/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Initialize the document here
$(document).ready(function() {
- // Your code here
+ var generator = new NumGen();
+ NumGenDisplay.buildPage(generator);
+ $("#process-reset").live("click", {generator:generator}, NumGenDisplay.processResetEventHandler);
+ $("#process-generate").live("click", {generator:generator}, NumGenDisplay.processGenerateEventHandler);
});
</script>
- <script src="javascript/jquery/jquery.mobile-1.0b1.min.js" type="text/javascript"></script>
+ <script src="./javascript/jquery/jquery.mobile-1.0b2.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Update any JQuery mobile settings here
$(document).bind("mobileinit", function() {
@@ -26,14 +30,47 @@
</script>
</head>
<body>
-<section data-role="page" id="page2-part1">
- <header data-role="header"><h1>Welcome to Page 2</h1></header>
- <div data-role="content">Page 2
+<section data-role="page" id="generator">
+ <header data-role="header"><h1>Number Generator</h1></header>
+ <div data-role="content">
+ <div data-role="navbar">
+ <ul>
+ <li><a id="process-generate" class="ui-btn-active" href="#">Generate</a></li>
+ <li><a href="#reset-generator" data-rel="dialog" data-transition="flip">Reset</a></li>
+ </ul>
+ </div>
+ <div id="gen-panel">
+ <p>Total Number of Possibilities: <span id="possibilities"></span></p>
+
+ <p>Total Number of Processed: <span id="processed"></span></p>
+
+ <p>Last Selected Number: <span id="last-selected"></span></p>
+
+ <p>Remaining Unique Numbers: <span id="unique-remaining"></span></p>
+ <ul id="generateList">
+
+ </ul>
+ </div>
</div>
<footer data-role="footer" class="ui-bar">
- <a href="#" data-rel="back" data-role="button">Return Home</a>
-
- <h2>Dialog Footer</h2></footer>
+ <h2>Soaring Eagle L.L.C</h2></footer>
+</section>
+<section data-role="page" id="reset-generator">
+ <header data-role="header"><h1>Reset Number Generator</h1></header>
+ <div data-role="content">
+ <div id="reset-panel">
+ <form>
+ <div data-role="fieldcontain">
+ <label id="max-count-label" for="max-count-input">Maximum Count</label>
+ <input id="max-count-input" type="text" maxlength="5">
+ </div>
+ <a id="process-reset" href="#" data-role="button" data-inline="true">Save</a>
+ <a href="#generator" data-role="button" data-inline="true" data-rel="back">Cancel</a>
+ </form>
+ </div>
+ </div>
+ <footer data-role="footer" class="ui-bar">
+ <h2>Soaring Eagle L.L.C</h2></footer>
</section>
</body>
</html>
View
74 src/main/javascript/display/numgenDisplay.js
@@ -0,0 +1,74 @@
+/**
+ * This is an object that can be used to control the display of the num gen object. It is essentially a singleton
+ * since it does not persist any data between calls.
+ */
+var NumGenDisplay = {};
+
+/**
+ * This is the click event handler for resetting the number generator.
+ * @param inEvent - The event that triggered the method. It contains a data element that points to the currently
+ * active number generator.
+ */
+NumGenDisplay.processResetEventHandler = function(inEvent) {
+ var generator = inEvent.data.generator;
+ var newCount = $("#max-count-input").val();
+ if (newCount) {
+ generator.reset(newCount);
+ }
+ else {
+ generator.reset();
+ }
+ NumGenDisplay.buildPage(generator);
+ $.mobile.changePage("#generator", { transition: "slideup"});
+};
+
+/**
+ * This will build up the display page to support the current number generator.
+ * @param inNumGen - The number generator to drive the creation of the page.
+ */
+NumGenDisplay.buildPage = function(inNumGen) {
+ // Fill in some useful information
+ $("#possibilities").html(inNumGen.maxCount);
+ $("#processed").html(inNumGen.selections.length);
+ $("#last-selected").html(inNumGen.getLastNumberSelected());
+ $("#unique-remaining").html(inNumGen.maxCount - inNumGen.selections.length);
+ // Generate blocks for all the numbers
+ var htmlString = "";
+ for (var i = 1, length = inNumGen.maxCount; i <= length; i++) {
+ htmlString = htmlString + "<li class='numbers' data-number='" + i + "'>" + i + "</li>";
+ }
+ $("#generateList").html("");
+ $("#generateList").html(htmlString);
+};
+
+/**
+ * This will update an existing page with the latest data from the number generator.
+ * @param inNumGen - The number generator supporting this page.
+ */
+NumGenDisplay.updatePage = function(inNumGen) {
+ // Fill in some useful information
+ $("#possibilities").html(inNumGen.maxCount);
+ $("#processed").html(inNumGen.selections.length);
+ $("#last-selected").html(inNumGen.getLastNumberSelected());
+ $("#unique-remaining").html(inNumGen.maxCount - inNumGen.selections.length);
+ // Generate blocks for all the numbers and update with the selections (count, last selected, selected)
+ $("#generateList").children("li").removeClass("lastSelected");
+ $("li[data-number='" + inNumGen.getLastNumberSelected() + "']").addClass("selected").addClass("lastSelected");
+};
+
+/**
+ * This is the event processor that will respond to a generate button press.
+ * @param inEvent - The event that triggered the function containing an event.data object with key generator pointing
+ * to the current generator.
+ */
+NumGenDisplay.processGenerateEventHandler = function(inEvent) {
+ var generator = inEvent.data.generator;
+ var value = generator.genNumber();
+ if (Number(value) != -1) {
+ NumGenDisplay.updatePage(generator);
+ }
+ else {
+ // TODO Need something more mobile
+ alert("No more numbers to generate");
+ }
+};

0 comments on commit 92ef614

Please sign in to comment.