fixed basic examples

aktos-io · Aug 23, 2017 · e6348e8 · e6348e8
1 parent e92addb
commit e6348e8
Show file tree

Hide file tree

Showing 13 changed files with 63 additions and 62 deletions.
diff --git a/scada.js b/scada.js
diff --git a/webapps/html-js/README.md b/webapps/html-js/README.md
@@ -1,2 +1,3 @@
-Compile with `gulp --app template --webapp html-js`
-Open {{scada_path}}/template/html-js with your browser. 
+Compile with `gulp --webapp html-js`
+
+Open `scada.js/build/html-js/index.html` with your browser.
diff --git a/webapps/html-js/app.html b/webapps/html-js/app.html
@@ -1,10 +1,13 @@
-<p> Hello world!</p>
+<h1 class="ui centered header"> Hello {{name}}!</h1>
 
-<p> You can use Ractive here. Type your name <input value="{{ name }}" placeholder="here" /> </p>
+<div class="ui segment">
+    You can use Ractive here. Type your name <div class="ui input" >
+        <input value="{{ name }}" placeholder="here" /></div>
+</div>
 
-<h3> Hello {{ name }}! </h3>
+<p>
+    <i class="large icon dashboard" />
+    Any built-in components (look at scada.js/components) will also work as usual
+</p>
 
-<panel>
-    <p> <icon-dashboard /> Any built-in components (look at /src/client/components) will also work as usual </p>
-    <example-component></example-component>
-</panel>
+<slider inline value="{{x}}" /> <progress type="circle" value="{{x}}"></progress>
diff --git a/webapps/html-js/app.js b/webapps/html-js/app.js
@@ -1,9 +1,10 @@
 require('components');
 
-var ractive = new Ractive({
-  el: '#main-output',
+new Ractive({
+  el: 'body',
   template: RACTIVE_PREPARSE('app.html'),
   data: {
-    name: "guest"
+    name: "world",
+    x: 35
   }
 });
diff --git a/webapps/html-js/index.html b/webapps/html-js/index.html
@@ -1,18 +1,12 @@
-<!DOCTYPE html>
-<html lang="en-GB" moznomarginboxes mozdisallowselectionprint>
+<html lang="en-GB">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
-    <meta http-equiv="cache-control" content="no-cache">
-    <meta http-equiv="expires" content="0">
-    <meta http-equiv="pragma" content="no-cache">
-    <link rel="icon" href="/favicon.ico">
-    <title>bare html javascript example</title>
+    <title>ScadaJS html-js example</title>
     <script src="js/vendor.js"></script>
     <link rel="stylesheet" href="css/vendor.css">
   </head>
   <body>
-    <div id="main-output">Loading...</div>
+    <h2 class="ui centered header">Loading...</h2>
     <script src="app.js"></script>
   </body>
 </html>
diff --git a/webapps/html-ls/README.md b/webapps/html-ls/README.md
@@ -1,2 +1,3 @@
-Compile with `gulp --app template --webapp html-ls`
-Open {{scada_path}}/template/html-ls with your browser.
+Compile with `gulp --webapp html-ls`
+
+Open `scada.js/build/html-ls/index.html` with your browser.
diff --git a/webapps/html-ls/app.html b/webapps/html-ls/app.html
@@ -1,10 +1,13 @@
-<p> Hello world!</p>
+<h1 class="ui centered header"> Hello {{name}}!</h1>
 
-<p> You can use Ractive here. Type your name <input value="{{ name }}" placeholder="here" /> </p>
+<div class="ui segment">
+    You can use Ractive here. Type your name <div class="ui input" >
+        <input value="{{ name }}" placeholder="here" /></div>
+</div>
 
-<h3> Hello {{ name }}! </h3>
+<p>
+    <i class="large icon dashboard" />
+    Any built-in components (look at scada.js/components) will also work as usual
+</p>
 
-<panel>
-    <p> <icon-dashboard /> Any built-in components (look at /src/client/components) will also work as usual </p>
-    <example-component></example-component>
-</panel>
+<slider inline value="{{x}}" /> <progress type="circle" value="{{x}}"></progress>
diff --git a/webapps/html-ls/app.ls b/webapps/html-ls/app.ls
@@ -1,7 +1,8 @@
 require! components
 
-ractive = new Ractive do
-    el: '#main-output'
+new Ractive do
+    el: \body
     template: RACTIVE_PREPARSE('app.html')
     data:
-        name: "guest"
+        name: "world"
+        x: 35
diff --git a/webapps/html-ls/index.html b/webapps/html-ls/index.html
@@ -1,18 +1,12 @@
-<!DOCTYPE html>
-<html lang="en-GB" moznomarginboxes mozdisallowselectionprint>
+<html lang="en-GB">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
-    <meta http-equiv="cache-control" content="no-cache">
-    <meta http-equiv="expires" content="0">
-    <meta http-equiv="pragma" content="no-cache">
-    <link rel="icon" href="/favicon.ico">
-    <title>html livescript template</title>
+    <title>ScadaJS html-ls example</title>
     <script src="js/vendor.js"></script>
     <link rel="stylesheet" href="css/vendor.css">
   </head>
   <body>
-    <div id="main-output">Loading...</div>
+    <h2 class="ui centered header">Loading...</h2>
     <script src="app.js"></script>
   </body>
 </html>
diff --git a/webapps/pug-ls/README.md b/webapps/pug-ls/README.md
@@ -1,2 +1,3 @@
-Compile with `gulp --app template --webapp pug-ls`
-Open {{scada_path}}/template/pug-ls with your browser. 
+Compile with `gulp --webapp pug-ls`
+
+Open `scada.js/build/pug-ls/index.html` with your browser.
diff --git a/webapps/pug-ls/app.ls b/webapps/pug-ls/app.ls
@@ -1,7 +1,8 @@
 require! components
 
-ractive = new Ractive do
-    el: '#main-output'
+new Ractive do
+    el: \body
     template: RACTIVE_PREPARSE('app.pug')
     data:
-        name: "guest"
+        name: "world"
+        x: 35
diff --git a/webapps/pug-ls/app.pug b/webapps/pug-ls/app.pug
@@ -1,15 +1,12 @@
-h1 Livescript + Pug example
+h2.ui.centered.header Hello {{name}}!
 
-p Hello world!
+.ui.segment
+    | You can use Ractive here. Type your name 
+    .ui.input: input(value="{{name}}" placeholder="here")
 
-p You can use Ractive here. Type your name #[input(value="{{ name }}" placeholder="here")]
+p
+    i.large.icon.dashboard     
+    | Any built-in components (look at scada.js/components) will also work as usual
 
-h3 Hello {{ name }}!
-
-
-panel
-    p.
-        #[icon-dashboard] Any built-in components (look at /src/client/components)
-        will also work as usual if you #[code require! components]
-
-example-component
+slider(inline value="{{x}}")
+progress(type="circle" value="{{x}}")
diff --git a/webapps/pug-ls/index.pug b/webapps/pug-ls/index.pug
@@ -1,4 +1,8 @@
-extends ../../../../src/client/templates/template.pug
+extends ../../scada.js/templates/template.pug
 
 block title
-    title #{app}
+    title pug + ls example
+
+block app 
+    script(src="app.js")
+
+2 −4		components/data-table/index.ls
+13 −8		gulpfile.ls
+6 −0		src/lib/aea/ractive-preparserify.ls
+3 −2		templates/template.pug