Commits

Juha Komulainen committed 59f4eb6

Started porting the backend-example.

Comments (0)

Files changed (11)

.idea/dictionaries/komu.xml

       <w>angularjs</w>
       <w>ecma</w>
       <w>googleapis</w>
+      <w>mongolab</w>
       <w>todos</w>
       <w>unstyled</w>
     </words>

.idea/inspectionProfiles/Evident_Commit.xml

     <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="6">
+          <list size="9">
             <item index="0" class="java.lang.String" itemvalue="ng-app" />
             <item index="1" class="java.lang.String" itemvalue="ng-disabled" />
             <item index="2" class="java.lang.String" itemvalue="ng-controller" />
             <item index="3" class="java.lang.String" itemvalue="ng-model" />
             <item index="4" class="java.lang.String" itemvalue="ng-submit" />
             <item index="5" class="java.lang.String" itemvalue="ng-repeat" />
+            <item index="6" class="java.lang.String" itemvalue="ng-view" />
+            <item index="7" class="java.lang.String" itemvalue="ng-show" />
+            <item index="8" class="java.lang.String" itemvalue="ng-click" />
           </list>
         </value>
       </option>

.idea/jsLibraryMappings.xml

 <?xml version="1.0" encoding="UTF-8"?>
-<project version="4" />
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <file url="file://$PROJECT_DIR$/backend/index.html" libraries="{angular, angular-resource}" />
+  </component>
+</project>
 

angular-kotlin.iml

       </library>
     </orderEntry>
     <orderEntry type="library" name="angular" level="application" />
+    <orderEntry type="library" name="angular-resource" level="application" />
   </component>
 </module>
 

backend/detail.html

+<form name="myForm">
+  <div class="control-group" ng-class="{error: myForm.name.$invalid}">
+    <label>Name</label>
+    <input type="text" name="name" ng-model="project.name" required>
+    <span ng-show="myForm.name.$error.required" class="help-inline">
+        Required</span>
+  </div>
+
+  <div class="control-group" ng-class="{error: myForm.site.$invalid}">
+    <label>Website</label>
+    <input type="url" name="site" ng-model="project.site" required>
+    <span ng-show="myForm.site.$error.required" class="help-inline">
+        Required</span>
+    <span ng-show="myForm.site.$error.url" class="help-inline">
+        Not a URL</span>
+  </div>
+
+  <label>Description</label>
+  <textarea name="description" ng-model="project.description"></textarea>
+
+  <br>
+  <a href="#/" class="btn">Cancel</a>
+  <button ng-click="save()" ng-disabled="isClean() || myForm.$invalid"
+          class="btn btn-primary">Save</button>
+  <button ng-click="destroy()"
+          ng-show="project._id" class="btn btn-danger">Delete</button>
+</form>

backend/index.html

+<!DOCTYPE html>
+
+<html ng-app="project">
+  <head>
+    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
+    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-resource.min.js"></script>
+    <script src="project.js"></script>
+    <script src="mongolab.js"></script>
+    <script src="../lib/kotlinEcma3.js" type="text/javascript"></script>
+    <script type="text/javascript" src="../js/angular-kotlin.js"></script>
+  </head>
+
+  <script type="text/javascript">
+
+      function instantiateProject(p, a) {
+          return new p(a)
+      }
+
+      var backend = Kotlin.modules["angular-kotlin"].backend
+      backend.main()
+      window.ListCtrl = backend.ListCtrl
+      window.CreateCtrl = backend.CreateCtrl
+      window.EditCtrl = backend.EditCtrl
+  </script>
+
+  <body>
+    <h2>JavaScript Projects</h2>
+    <div ng-view></div>
+  </body>
+</html>

backend/list.html

+<input type="text" ng-model="search" class="search-query" placeholder="Search">
+<table>
+  <thead>
+  <tr>
+    <th>Project</th>
+    <th>Description</th>
+    <th><a href="#/new"><i class="icon-plus-sign"></i></a></th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr ng-repeat="project in projects | filter:search | orderBy:'name'">
+    <td><a href="{{project.site}}" target="_blank">{{project.name}}</a></td>
+    <td>{{project.description}}</td>
+    <td>
+      <a href="#/edit/{{project._id.$oid}}"><i class="icon-pencil"></i></a>
+    </td>
+  </tr>
+  </tbody>
+</table>

backend/mongolab.js

+// This is a module for cloud persistance in mongolab - https://mongolab.com
+angular.module('mongolab', ['ngResource']).
+    factory('Project', function($resource) {
+      var Project = $resource('https://api.mongolab.com/api/1/databases' +
+          '/angularjs/collections/projects/:id',
+          { apiKey: '4f847ad3e4b08a2eed5f3b54' }, {
+            update: { method: 'PUT' }
+          }
+      );
+
+      Project.prototype.update = function(cb) {
+        return Project.update({id: this._id.$oid},
+            angular.extend({}, this, {_id:undefined}), cb);
+      };
+
+      Project.prototype.destroy = function(cb) {
+        return Project.remove({id: this._id.$oid}, cb);
+      };
+
+      return Project;
+    });

backend/project.js

+angular.module('project', ['mongolab']).
+  config(function($routeProvider) {
+    $routeProvider.
+      when('/', {controller:ListCtrl, templateUrl:'list.html'}).
+      when('/edit/:projectId', {controller:EditCtrl, templateUrl:'detail.html'}).
+      when('/new', {controller:CreateCtrl, templateUrl:'detail.html'}).
+      otherwise({redirectTo:'/'});
+  });
+package angular
+
+native trait Id {
+    native("\$oid") val oid: String
+}
+
+trait Location {
+    fun path(path: String)
+}
+
+trait RouteProvider {
+    native("when") fun whenMatches(path: String, args: Json): RouteProvider
+    fun otherwise(args: Json): RouteProvider
+}
+
+native val angular: Angular = noImpl
+
+trait Angular {
+    fun module(name: String, dependencies: Array<String>): AngularModule
+    fun equals(lhs: Any?, rhs: Any?): Boolean
+}
+
+trait AngularModule {
+    fun config(callback: (RouteProvider) -> Unit)
+}
+package backend
+
+import angular.*
+
+native trait Project {
+    val _id: Id
+    fun destroy(callback: () -> Unit)
+    fun update(callback: () -> Unit)
+}
+
+native trait ProjectDao {
+    fun query(): Json
+    fun get(query: Json, callback: (Project) -> Unit)
+    fun save(project: Project, callback: (Project) -> Unit)
+}
+
+native fun instantiateProject(p: ProjectDao, a: Project): Project = noImpl
+
+fun ListCtrl(native("\$scope") scope: Json, Project: ProjectDao) {
+    scope["projects"] = Project.query()
+}
+
+fun CreateCtrl(native("\$scope") scope: Json, native("\$location") location: Location, Project: ProjectDao) {
+    scope["save"] = { () ->
+        Project.save(scope["project"] as Project) { project ->
+            location.path("/edit/${project._id.oid}")
+        }
+    }
+}
+
+fun EditCtrl(native("\$scope") scope: Json,
+             native("\$location") location: Location,
+             native("\$routeParams") routeParams: Json,
+             Project: ProjectDao) {
+
+    var original: Project? = null
+
+    val query = json()
+    query["id"] = routeParams["projectId"]
+    Project.get(query) { project ->
+        original = project
+
+        scope["project"] = instantiateProject(Project, project)
+    }
+
+    scope["isClean"] = { () -> angular.equals(original, scope["project"]) }
+
+
+    scope["destroy"] = { () ->
+        original!!.destroy() {
+            location.path("/list")
+        }
+    }
+
+    scope["save"] = { () ->
+        (scope["project"] as Project).update() {
+            location.path("/")
+        }
+    };
+}
+
+fun main() {
+    /*
+    angular.module("project", array("mongolab")).config() { ([native("\$routeProvider")] routeProvider) ->
+        routeProvider
+            .whenMatches("/", json())
+            .whenMatches("/edit/:projectId", json())
+            .whenMatches("/new/:projectId", json())
+            .otherwise(json())
+    }
+    */
+    /*
+    angular.module('project', ['mongolab']).
+      config(function($routeProvider) {
+        $routeProvider.
+          when('/', {controller:ListCtrl, templateUrl:'list.html'}).
+          when('/edit/:projectId', {controller:EditCtrl, templateUrl:'detail.html'}).
+          when('/new', {controller:CreateCtrl, templateUrl:'detail.html'}).
+          otherwise({redirectTo:'/'});
+      });
+    */
+}