os.js store update

.gitignore

@@ -0,0 +1,3 @@
+.vscode/
+.directory
+.vs/

CHANGELOG.md

@@ -2,3 +2,7 @@
 
 ## Ver. 1.00
 * Initial Release
+
+## Ver. 1.20
+* Switched UI Kit 3 for CSS JS and CSS
+* Implements Angualr

README.md

@@ -2,13 +2,30 @@
 Simple web app to browse, install and submit application for the OS.js project
 
 ## What's included
-* JS, CSS, and Fonts dirs using the Materialize front-end framework.
-* Packages dir for...well packages / applications.
-* packages.json, packages listing.
-* index.html for the front page.
+* Angualr modules and components for the store.
+* JS, CSS, and Fonts using the UIKit 3 front-end framework.
+* Some OS.js theme assets. (banner and icon)
+* packages.json and directory for package repo and listing.
+* index.html for the frontpage and angualr entry-point.
 * This readme document.
 * CHANGELOG.md, please make notes for new pushes.
 
-## What needs to be done.
-* Clean up of the front page / add more content.
-* Add logic to the search bar and search button and link it to the package lists or package repo.
+## What needs to be done
+* Add Package directory list view.
+* Add Package detail view.
+* Add a way to display icons from the package on the package's listing.
+* Front page search needs to match *just* the name of the package not all info.
+
+## How to run
+  lite-server (for development)
+  ***this method requires node and npm***
+
+```
+# Install lite-server globaly
+$ npm install lite-server -g
+```
+
+```
+# in project root directory run
+$ lite-server
+```

app/app.config.js

@@ -0,0 +1,17 @@
+angular.
+  module('storeApp').
+  config(['$locationProvider', '$routeProvider',
+    function config($locationProvider, $routeProvider) {
+      $locationProvider.hashPrefix('!');
+
+      $routeProvider.
+        when('/home', {
+          template: '<home-view></home-view>'
+        }).
+        when('/packages', {
+          templateUrl: 'app/views/packages/packages.template.html',
+          controller: 'pkgController'
+        }).
+        otherwise('/home');
+    }
+  ]);

app/app.js

@@ -0,0 +1,8 @@
+var storeApp = angular.module('storeApp', [
+  'ngRoute',
+  'appNav',
+  'appFooter',
+  'homeView',
+  'appSearch',
+  'packageView'
+]);

app/parts/footer/footer.component.js

@@ -0,0 +1,6 @@
+// Register the `appFooter` component on the `appFooter` module,
+angular.
+  module('appFooter').
+  component('appFooter', {
+    templateUrl: 'app/parts/footer/footer.template.html'
+  });

app/parts/footer/footer.controller.js

@@ -0,0 +1,8 @@
+/**
+  App Footer Controller
+*/
+angular.module('appFooter', [])
+.controller('AppFooterController', function ($http) {
+  var ctrl = this;
+  //Controller Logic Goes here.
+});

app/parts/footer/footer.module.js

@@ -0,0 +1,2 @@
+// Define the `appFooter` module
+angular.module('appFooter', []);

app/parts/footer/footer.template.html

@@ -0,0 +1,25 @@
+<footer class="uk-section uk-section-secondary uk-padding-small">
+    <div class="uk-container">
+        <div class="uk-child-width-1-3@m uk-grid-small" uk-grid>
+            <h4>About OS.js</h4>
+            <h4>Helpful Links</h4>
+        </div>
+
+        <div class="uk-child-width-1-3@m uk-grid-small" uk-grid>
+            <p>
+                OS.js is a JavaScript web desktop implementation for your browser with a fully-fledged window manager, Application
+                APIs, GUI toolkits and filesystem abstraction.
+            </p>
+            <div>
+                <ul class="">
+                    <li><a href="http://os.js.org/">Project Page</a></li>
+                    <li><a href="https://github.com/andersevenrud/OS.js-v2">Project Github</a></li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="uk-grid-match uk-child-width-1-3@m uk-grid-small" uk-grid>
+            <p class="uk-text-bottom">© 2017 Made by the OS.js Community</p>
+        </div>
+    </div>
+</footer>

app/parts/nav/nav.component.js

@@ -0,0 +1,6 @@
+// Register the `appNav` component on the `appNav` module,
+angular.
+    module('appNav').
+    component('appNav', {
+        templateUrl: 'app/parts/nav/nav.template.html'
+    });

app/parts/nav/nav.controller.js

@@ -0,0 +1,12 @@
+/**
+  App Nav Controller
+*/
+angular.module('appNav', [])
+  .controller('AppNavController', function ($http, $location) {
+    var ctrl = this;
+
+    ctrl.getClass = function (path) {
+      console.log(path);
+      return ($location.path().substr(0, path.length) === path) ? 'uk-active' : '';
+    }
+  });

app/parts/nav/nav.module.js

@@ -0,0 +1,2 @@
+// Define the `appNav` module
+angular.module('appNav', ['ngRoute']);

app/parts/nav/nav.template.html

@@ -0,0 +1,16 @@
+<nav class="osjs-header uk-light" ng-controller="AppNavController as ctrl" uk-navbar>
+  <div class="uk-navbar-left">
+    <a href="#!/home" class="uk-navbar-item uk-logo bg-flat"><img class="header-logo" src="/img/osjs-logo.png" /> Web Store</a>
+    <ul class="uk-navbar-nav">
+      <li ngClass="{ctrl.getClass('#!/home')}">
+        <a href="#!/home">Home</a>
+      </li>
+      <li><a href="#!/packages">Packages</a></li>
+    </ul>
+  </div>
+  <div class="uk-navbar-right">
+    <ul class="uk-navbar-nav">
+      <li><a href="">Submit</a></li>
+    </ul>
+  </div>
+</nav>

app/parts/search/search-box.template.html

@@ -0,0 +1,22 @@
+<div ng-controller="AppSearchController as searchCtrl">
+  <div class="uk-grid-small uk-child-width-1-2@s uk-flex-center uk-text-center" uk-grid>
+    <div class="uk-section">
+      <form>
+        <fieldset class="uk-fieldset uk-child-width-1-2@s">
+          <div class="uk-inline">
+            <input ng-model="searchCtrl.search" class="uk-input" type="text" placeholder="Search">
+          </div>
+        </fieldset>
+      </form>
+    </div>
+  </div>
+
+  <div ng-show="searchCtrl.search" class="uk-child-width-1-5@s uk-flex-center" uk-grid>
+    <div ng-repeat="pkg in searchCtrl.packages | filter:{name: searchCtrl.search}">
+      <div class=" uk-card uk-card-default uk-animation-fade uk-animation-fast uk-card-body ">
+        <div class="uk-text-center "><img class="uk-preserve-width " width="40 " src="/img/osjs-icon.png " /></div>
+        <p class="uk-text-center uk-text-middle ">{{pkg.name}}</p>
+      </div>
+    </div>
+  </div>
+</div>

app/parts/search/search.component.js

@@ -0,0 +1,7 @@
+/**
+  App Search Component
+*/
+angular.module('appSearch')
+  .component('searchBox', {
+    templateUrl: 'app/parts/search/search-box.template.html'
+  });

app/parts/search/search.controller.js

@@ -0,0 +1,28 @@
+/**
+  App Search Controller
+*/
+angular.module('appSearch', [])
+  .controller('AppSearchController', function ($http) {
+    var appSearch = this;
+    getPackages($http, this).then((pkgs) => {
+      appSearch.packages = pkgs;
+    });
+  });
+
+/**
+  Helpers
+*/
+function getPackages($http) {
+  return new Promise((resolve, reject) => {
+    //Get the packages.json file
+    $http.get('packages.json')
+      .then(function (res) {
+        //Return the data 
+        resolve(res.data);
+      }, (err) => {
+        //Or reject if we've hit a snag.
+        reject(err);
+      });
+  });
+}
+

app/parts/search/search.module.js

@@ -0,0 +1,4 @@
+/**
+  App Search Module
+*/
+angular.module('appSearch', []);

app/views/home/home.component.js

@@ -0,0 +1,8 @@
+// Register the `homeView` component on the `homeView` module,
+angular.
+  module('homeView').
+  component('homeView', {
+    templateUrl: 'app/views/home/home.template.html',
+    controller: function () {
+    }
+  });

app/views/home/home.module.js

@@ -0,0 +1,4 @@
+// Define the `homeView` module
+angular.module('homeView', [
+
+]);

app/views/home/home.template.html

@@ -0,0 +1,9 @@
+<div class="main-content">
+  <div class="uk-section">
+    <div class="uk-container uk-container-large">
+      <h1 class="uk-text-center">Welcome to the OS.js Web Store</h1>
+      <h3 class="uk-text-center">Discover, install, and create OS.js Applications</h3>
+      <search-box></search-box>
+    </div>
+  </div>
+</div>

app/views/packages/packages.component.js

@@ -0,0 +1,26 @@
+// Register the `homeView` component on the `homeView` module,
+angular
+  .module('packageView')
+  .controller('pkgController', ['$scope', '$http', function ($scope, $http) {
+    getPackages($http).then((pkgs) => {
+      $scope.packages = pkgs;
+    }).catch((err) => {
+      console.log(err);
+    })
+  }]);
+
+//Helpers
+
+function getPackages($http) {
+  return new Promise((resolve, reject) => {
+    //Get the packages.json file
+    $http.get('packages.json')
+      .then(function (res) {
+        //Return the data 
+        resolve(res.data);
+      }, (err) => {
+        //Or reject if we've hit a snag.
+        reject(err);
+      });
+  })
+};

app/views/packages/packages.module.js

@@ -0,0 +1,4 @@
+// Define the `homeView` module
+angular.module('packageView', [
+
+]);

app/views/packages/packages.template.html

@@ -0,0 +1,19 @@
+<div ng-controller="pkgController" class="uk-container">
+  <h2 class="uk-padding-small">All packages</h2>
+  <table class="uk-table uk-table-hover uk-padding-small">
+    <thead>
+      <tr>
+        <th></th>
+        <th class="uk-text-center">Name</th>
+        <th class="uk-text-center">Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr ng-repeat="p in packages">
+        <td class="uk-table-shrink"><img class="uk-preserve-width" width="40" src="/img/osjs-icon.png"/></td>
+        <td class="uk-table-shrink uk-text-middle uk-text-center">{{p.name}}</td>
+        <td class="uk-table-expand uk-text-middle uk-text-center">{{p.description}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>