Commits

Jason Scheirer committed 4208971

Works\!

Comments (0)

Files changed (2)

 enyo.kind({
-	name: "SearchButtonGroup",
-	kind: "Group",
-	defaultKind: "onyx.Button",
-	highlander: true,
- 	components: [
-		{content: "Matches"},
-		{content: "Starts with", active: true},
-		{content: "Has all"}]
+    name: "App",
+    classes: "onyx",
+    kind: "FittableRows",
+    classes: "enyo-fit",
+    components: [
+        {
+            kind: "onyx.Toolbar",
+            components: [
+                {kind: "Group", defaultKind: "onyx.Button", highlander: true, 
+                 name: "searchgroup",
+                 classes: "tools group",
+                 components: [
+                    {content: "Matches",
+                     name: "matches"},
+                    {content: "Starts with", 
+                     active: true,
+                     name: "words_starting_with"},
+                    {content: "Word rack", 
+                     name: "words_containing"}]
+                },
+                {kind: "onyx.InputDecorator",
+                 components: [
+                    {kind: "onyx.Input",
+                     id: "search",
+                     name: "searchinput",
+                     style: "width: 25em;",
+                     id: "searchinput",
+                     placeholder: "Start typing"},
+                    {kind: "onyx.Button",
+                     content: "Search",
+                     ontap: "doSearch"}
+                ]}
+         ]},
+         {
+        fit: true,
+            name: "resultholder",
+	    classes: "matchdiv"
+         }
+         ],
+    doSearch: function() {
+        var resultHolder = application.$.resultholder;
+        resultHolder.destroyClientControls();
+        var verb = this.$.searchgroup.getActive().name;
+        var searchTerm = this.$.searchinput.getValue();
+        var match = /^[A-Za-z_]+$/;
+        if (match.test(searchTerm))
+        {
+            this.createComponent({kind: "onyx.ProgressBar",
+                      progress: 100,
+                  content: "Searching",
+                  container: resultHolder}).render();
+
+            var request = new enyo.Ajax({url: '/match-o-matic/' + verb + "/" + searchTerm, 
+                                        method: 'GET'}
+                                       ).response(this, 'gotWords').error(this, 'failedToFetch');
+            request.go({});
+        }
+        else
+        {
+            this.createComponent({content: "That won't work.",
+                                  container: resultHolder}).render();
+        }
+    },
+   gotWords: function(sender, response)
+   {
+        var words = enyo.map(response.words, function f(g) {return {content: g, classes: "wordmatch"}; });
+        var resultHolder = application.$.resultholder;
+        resultHolder.destroyClientControls();
+        this.createComponent({kind: "onyx.Groupbox",
+			      components: words,
+			      container: resultHolder}).render();
+   },
+   failedToFetch: function()
+   {
+        var resultHolder = application.$.resultholder;
+        resultHolder.destroyClientControls();
+        this.createComponent({content: "That won't work.",
+                              container: resultHolder}).render();
+   }
 });
-
-var searchGroup = new SearchButtonGroup();
-
-enyo.kind({
-	name: "App",
-	classes: "onyx",
-	components: [
-		{
-			kind: "onyx.Toolbar",
-			components: [
-				/*
-				{kind: "Group", defaultKind: "onyx.Button", highlander: true, 
-				 classes: "tools group",
-				 components: [
-					{content: "Matches"},
-					{content: "Starts with", active: true},
-					{content: "Has all"}]
-				},
-				*/
-				searchGroup,
-				{kind: "onyx.InputDecorator",
-				 components: [
-					{kind: "onyx.Input",
-					 id: "search",
-					 style: "width: 25em;",
-					 id: "searchinput",
-					 placeholder: "Start typing"},
-					{kind: "onyx.Button", content: "Search"}
-				]}
-		 ]},
-		 {
-			id: "resultholder",
-		 }
-		     ]
-});
 			padding: 0;
 			height: auto;
 		}
+		.matchdiv {
+			padding: 4px;
+		}
+		.wordmatch {
+			font-size: larger;
+			padding: 4px;
+		}
 	</style>
 </head>
 <body>
 	 <script type="text/javascript">
-		new App().write();
+		var application = new App();
+		application.write();
 	 </script>
 </body>
 </html>