[WIP] Adding examples for the Developer Workflow code lab.

.gitignore

@@ -7,3 +7,14 @@ build
 .idea
 .packages
 .swp
+
+/**/bazel-bin
+/**/bazel-captains_log*
+/**/bazel-genfiles
+/**/bazel-out
+/**/bazel-testlogs
+/**/.bazelify
+/**/BUILD
+/**/WORKSPACE
+/**/packages.bzl
+

dev-workflow/captains_log_base/.analysis_options

@@ -0,0 +1,20 @@
+# This file allows you to configure the Dart analyzer.
+#
+# The commented part below is just for inspiration. Read the guide here:
+# https://github.com/dart-lang/sdk/tree/master/pkg/analyzer#configuring-the-analyzer
+
+analyzer:
+#  strong-mode:
+#    implicit-casts: false
+#    implicit-dynamic: false
+  exclude:
+    - .bazelify/**
+    - bazel-bin/**
+    - bazel-captains_log_final/**
+    - bazel-genfiles/**
+    - bazel-out/**
+    - bazel-testlogs/**
+# linter:
+#   rules:
+#     # see catalogue here: http://dart-lang.github.io/linter/lints/
+#     - hash_and_equals

dev-workflow/captains_log_base/.gitignore

@@ -0,0 +1,22 @@
+pubspec.lock
+.buildlog
+.packages
+.project
+.pub/
+
+build/
+**/packages/
+web/gen
+web/packages
+
+doc/api/
+
+*.iml
+*.ipr
+*.iws
+.idea/
+.DS_Store
+
+*.dart.js
+*.info.json
+*.js

dev-workflow/captains_log_base/lib/captains_log.dart

@@ -0,0 +1,109 @@
+import 'dart:html';
+// TODO: Add import
+
+// ignoring leap years
+const int _secondsInAYear = 31536000;
+const String _prompt = 'Something happened. Make it sound puzzling and heroic.';
+final List<String> _templates = [
+  'We encountered what appeared to be a <insert space anomaly>. It has '
+      'proven to be sentient and has taken control of our ship. Thus far, all '
+      'efforts at communication have failed...',
+  'A warship from the <insert hostile alien organization> has entered our '
+      'territory. It is currently speeding towards Earth. Thus far, all '
+      'efforts at peace have failed...',
+  'The ship has been pulled into a <insert type of time distortion>. We are '
+      'observing the universe in the distant <past or future>. Thus far, all '
+      'efforts to return to our timeline have failed...'
+];
+
+Map<double, HtmlElement> logEntries;
+Element logElement;
+
+void init() {
+  // initialization
+  // TODO: Add Quill editor
+
+  logElement = document.getElementById('log');
+  logEntries = new Map<double, HtmlElement>();
+  loadPreviousEntries();
+
+  // listeners
+  document.getElementById('save').onClick.listen(saveLog);
+  document.getElementById('templateSelect') as SelectElement
+    ..onChange.listen(useTemplate);
+}
+
+/// Capture entry in editor, save to local storage and display in log.
+void appendToLog(double stardate, HtmlElement logEntryElement) {
+  logEntries[stardate] = logEntryElement;
+  window.localStorage[stardate.toString()] = logEntryElement.innerHtml;
+  displayLogEntry(stardate, logEntryElement);
+}
+
+/// Calculate the current stardate: <Year>.<Percentage of year completion>
+double calculateStardate() {
+  var now = new DateTime.now();
+  var beginningOfYear = new DateTime(now.year);
+  int secondsThisYear = now.difference(beginningOfYear).inSeconds;
+  return now.year + secondsThisYear / _secondsInAYear;
+}
+
+/// Copy html elements from the editor view and return them inside a new
+/// DivElement.
+HtmlElement captureEditorView() {
+  Element contentElement = document.getElementById('editor').children.first;
+
+  var logEntryElement = new DivElement()..innerHtml = contentElement.innerHtml;
+
+  return logEntryElement;
+}
+
+/// Update the dom with the provided log entry.
+void displayLogEntry(double stardate, HtmlElement logEntryElement) {
+  if (logElement.children.isNotEmpty) {
+    logElement.insertAdjacentElement('afterBegin', new HRElement());
+  }
+
+  logElement.insertAdjacentElement('afterBegin', logEntryElement);
+  var stardateElement = new HeadingElement.h2()
+    ..text = 'Stardate: $stardate'
+    ..classes.add('stardate');
+  logElement.insertAdjacentElement('afterBegin', stardateElement);
+}
+
+/// Load all log entries from browser local storage.
+void loadPreviousEntries() {
+  List<String> keys = window.localStorage.keys.toList();
+  keys.sort();
+  for (String key in keys) {
+    var entryElement = new DivElement()..innerHtml = window.localStorage[key];
+    logEntries[double.parse(key)] = entryElement;
+  }
+  updateDisplay();
+}
+
+/// Save the log entry that is currently in the editor.
+void saveLog(Event _) {
+  // TODO: Need to save the text from the editor
+}
+
+/// Update the dom to show all current log entries.
+void updateDisplay() {
+  logElement.innerHtml = '';
+  List<double> starDates = logEntries.keys.toList();
+  starDates.sort();
+  for (double starDate in starDates) {
+    displayLogEntry(starDate, logEntries[starDate]);
+  }
+}
+
+/// Updates the content of the editor using the selected template.
+void useTemplate(Event _) {
+  SelectElement templateSelectElement =
+      document.getElementById('templateSelect') as SelectElement;
+  int selectedIndex = templateSelectElement.selectedIndex;
+
+  if (selectedIndex == 0) return;
+
+  // TODO: Need to clear the editor and insert the template
+}

dev-workflow/captains_log_base/pubspec.yaml

@@ -0,0 +1,13 @@
+name: captains_log
+version: 0.0.1
+description: >
+  A starship captain's log with a WYSIWYG editor. Uses an existing JavaScript
+  library with the new Dart JS-interop.
+
+environment:
+  sdk: '>=1.17.0 <2.0.0'
+
+dependencies:
+  func: ^0.1.0
+  js: ^0.6.1
+  browser: ^0.10.0

dev-workflow/captains_log_base/web/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Captain's Log</title>
+    <meta charset="utf-8">
+    <meta
+        name="viewport"
+        content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons|Bungee+Hairline|Jura|Orbitron"
+        rel="stylesheet">
+    <link href="styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <main id="content">
+      <h1 class="title">Captain's Log</h1>
+      <div class="buttons">
+        <div class="select">
+          <select id="templateSelect">
+            <option disabled selected>Select a Template</option>
+            <option id="template1">Sentient space anomaly</option>
+            <option id="template2">Impending war with hostile species</option>
+            <option id="template3">Ship caught in time distortion</option>
+          </select>
+        </div>
+        <button id="save">Save to Memory Banks</button>
+      </div>
+      <section id="log"></section>
+    </main>
+  </body>
+  <script type="application/dart" src="main.dart"></script>
+  <script src="packages/browser/dart.js"></script>
+</html>

dev-workflow/captains_log_base/web/main.dart

@@ -0,0 +1,5 @@
+import 'package:captains_log/captains_log.dart';
+
+void main() {
+  init();
+}

dev-workflow/captains_log_base/web/styles.css

@@ -0,0 +1,107 @@
+body {
+  padding: 0em;
+  margin: 0em;
+}
+
+html {
+  background: #222;
+  color: white;
+  font-family: 'Jura', sans-serif;
+}
+
+h1.title {
+  font-family: 'Orbitron', sans-serif;
+  font-size: 4em;
+  margin: 0em;
+  padding: 0.67em;
+}
+
+h2.stardate {
+  font-family: 'Bungee Hairline', cursive;
+}
+
+.buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #222;
+  border: none;
+  color: inherit;
+  font-size: inherit;
+  padding: 5px;
+  padding-right: 18px;
+}
+
+select:focus {
+  outline: none;
+}
+
+select:active {
+  background-color: #222;
+}
+
+div.select {
+  border-bottom: 1px solid gray;
+  display: inline-block;
+  height: 100%;
+  position: relative;
+}
+
+div.select::after {
+  font-family: 'Material Icons';
+  content: '\E5C5';
+  position: absolute;
+  right: 2px;
+  top: 6px;
+  pointer-events: none;
+}
+
+button {
+  background-color: #06c;
+  color: white;
+  border-color: #06c;
+  border-radius: 0.25em;
+  font-family: inherit;
+  font-size: 1.1em;
+  margin-top: .5em;
+  margin-left: 0.5em;
+  margin-bottom: 0.5em;
+  padding: .5em;
+}
+
+#editor .ql-editor.ql-blank::before {
+  color: white;
+}
+
+.ql-toolbar .ql-stroke {
+  stroke: white;
+}
+
+.ql-toolbar .ql-fill {
+  fill: white;
+}
+
+.ql-toolbar.ql-snow .ql-picker-label {
+  color: white;
+}
+
+#content {
+  margin-left: 20%;
+  margin-right: 20%;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 20px;
+  background: rgba(22, 22, 22, 0.9);
+  background-clip: padding-box;
+}
+
+#editor {
+  height: 20em;
+  font-size: 1.1em;
+}

dev-workflow/captains_log_final/.analysis_options

@@ -0,0 +1,21 @@
+# This file allows you to configure the Dart analyzer.
+#
+# The commented part below is just for inspiration. Read the guide here:
+# https://github.com/dart-lang/sdk/tree/master/pkg/analyzer#configuring-the-analyzer
+
+analyzer:
+  strong-mode:
+    implicit-casts: false
+    implicit-dynamic: false
+  exclude:
+    - lib/quill.dart
+    - .bazelify/**
+    - bazel-bin/**
+    - bazel-captains_log_final/**
+    - bazel-genfiles/**
+    - bazel-out/**
+    - bazel-testlogs/**
+# linter:
+#   rules:
+#     # see catalogue here: http://dart-lang.github.io/linter/lints/
+#     - hash_and_equals

dev-workflow/captains_log_final/.gitignore

@@ -0,0 +1,22 @@
+pubspec.lock
+.buildlog
+.packages
+.project
+.pub/
+
+build/
+**/packages/
+web/gen
+web/packages
+
+doc/api/
+
+*.iml
+*.ipr
+*.iws
+.idea/
+.DS_Store
+
+*.dart.js
+*.info.json
+*.js