initial commit

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.gem

README.md

@@ -0,0 +1,87 @@
+# concerto-frontend-vue
+
+A replacement frontend plugin for Concerto Digital Signage that uses Vue.js.  Clicking on the content in a field will advance to the next piece of content.  Animate.css is used for animations.
+
+Notice: this does not handle dynamic content plugins like the concerto-frontend plugin that was written in polymer did-- but that's ok, I think there were only two (concerto-remote-video and concerto-iframe) and they have both been included here.  So, if you have your own custom content types you will need to add them to the components directory and rebuild and republish the changes.
+
+Videos are set to autoplay. Locales and timezones are supported for the time field. No scrollbars for iframes. The debug mode has informational tags.  There is no title or tooltip or alt text when not in debug mode. The document outline is discussed below for ease of applying your own template's CSS.
+
+![sample screen in debug mode](./docs/screen_sample_800.png)
+
+## Developing
+```
+npm install
+npm run serve
+```
+
+The attributes in the <app/> element in the public/index.html file specify which screen to load.
+
+To add a new content type component simply add it to the components directory, and import it in the ConcertoField.vue component and include it in its component list.  Each component gets a `content` prop that contains the content to display.
+
+This application was initially generated from the vue-cli version 3.
+
+### Brief Overview
+
+The index.html contains the starting point-- the #app element, which is rendered in the main.js.  
+
+The App component renders the concerto-screen element.  
+
+The ConceroScreen component renders the layout of the template, positions, and fields (concerto-field).  It listens for a 'frontend-key-changed' event, which is fired from the fields when they detect that a new key from the server doesn't match the existing key-- this happens when the server wants to force the screen to refresh. The screen also fires a 'concertotick' event on each field every second-- this allows the fields to update their duration (which is only displayed in debug mode).
+
+The ConcertoField component (there's one for each field) queries the server for content just for it's field which it stores in a queue.  It fetches again just before it exhausts the queue, or every 10 seconds if there is no content.  The field then pops an item off the queue and renders it using a dynamic component, and then schedules it to happen again when the duration runs out.  Transitions (animations) occur automatically (as configured) as the current content is replaced.
+
+## Testing
+
+To test this along with Concerto you will also need to git clone the concerto-frontend repo, then change the Gemfile-plugins file in your concerto directory to `gem "concerto_frontend", path: '../concerto-frontend'` and run
+```
+npm run build
+cp dist/app.js ~/projects/concerto-frontend/concerto-frontend-gem/app/assets/javascripts/concerto_frontend/
+```
+from this repo's directory.  The go back to your concerto directory and run `bundle install` and then `rails s` and when you preview the screen, it should be using this new frontend.  Remember that you can turn on "debug" mode by specifying a parameter of `&debug=true` to the preview screen url.
+
+## Deploying
+
+You will need to build this project and copy the dist/app.js to the assets in the concerto-frontend-gem.
+```
+npm run build && cp dist/app.js ~/projects/concerto-frontend/concerto-frontend-gem/app/assets/javascripts/concerto_frontend/
+```
+
+## Troubleshooting
+
+If there is a network error and it cannot connect to your concerto server, the screen will black out and display the error message and will retry every 15 seconds.
+
+## Styling your Concerto Templates
+
+Remember, in addition to the background image, you can upload a css file with your templates. Here is the structure of the page in case you want to target anything specific with your own style.
+
+```
+body
+  div#app
+    div.concerto-screen.preview
+      div#template_1.concerto-template (style set for background-image)
+        div#position_1.concerto-position (style set for location and size, you can have multiple positions as specified by your template)
+
+          div.concerto-field field-id="1" field-name="Graphics" (you can have one field per position as specified by your template)
+            img.concerto-graphic.landscape.portrait (style set from field style in concerto template)
+            
+            (iframes can show up in the graphics field)
+            iframe.concerto-iframe frameBorder="0" scrolling="no" (style set from field style in concerto template)
+
+            (remote-video can show up in the graphics field)
+            div.concerto-video-container
+              iframe.concerto-remote-video frameBorder="0" scrolling="no" allow="autoplay; fullscreen" (if url does not include "http_video=true", style set from field style in concerto template)
+              video.concerto-remote-video  autoplay="true" (if url contains "http_video=true", style set from field style in concerto template)
+
+          div.concerto-field field-id="3" field-name="Text"
+            div.concerto-htmltext (style set from field style in concerto template, font-size determined dynamically)
+
+          div.concerto-field field-id="2" field-name="Ticker"
+            div.concerto-ticker (style set from field style in concerto template, font-size determined dynamically)
+
+          div.concerto-field field-id="5" field-name="Time"
+            div.concerto-client-time (style set from field style in concerto template, font-size determined dynamically)
+
+          (any field without content will display the empty content)
+            div.concerto-empty
+              span (has a :before with content of '...')
+```

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

concerto-frontend-vue-gem/Gemfile

@@ -0,0 +1,14 @@
+source 'https://rubygems.org'
+
+# Declare your gem's dependencies in concerto_frontend.gemspec.
+# Bundler will treat runtime dependencies like base dependencies, and
+# development dependencies will be added by default to the :development group.
+gemspec
+
+# Declare any dependencies that are still in development here instead of in
+# your gemspec. These might include edge Rails or gems from your path or
+# Git. Remember to move these dependencies to your gemspec before releasing
+# your gem to rubygems.org.
+
+# To use a debugger
+# gem 'byebug', group: [:development, :test]

concerto-frontend-vue-gem/Gemfile.lock

@@ -0,0 +1,127 @@
+PATH
+  remote: .
+  specs:
+    concerto_frontend_vue (0.0.1)
+      rails
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    actioncable (5.2.3)
+      actionpack (= 5.2.3)
+      nio4r (~> 2.0)
+      websocket-driver (>= 0.6.1)
+    actionmailer (5.2.3)
+      actionpack (= 5.2.3)
+      actionview (= 5.2.3)
+      activejob (= 5.2.3)
+      mail (~> 2.5, >= 2.5.4)
+      rails-dom-testing (~> 2.0)
+    actionpack (5.2.3)
+      actionview (= 5.2.3)
+      activesupport (= 5.2.3)
+      rack (~> 2.0)
+      rack-test (>= 0.6.3)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.0.2)
+    actionview (5.2.3)
+      activesupport (= 5.2.3)
+      builder (~> 3.1)
+      erubi (~> 1.4)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.0.3)
+    activejob (5.2.3)
+      activesupport (= 5.2.3)
+      globalid (>= 0.3.6)
+    activemodel (5.2.3)
+      activesupport (= 5.2.3)
+    activerecord (5.2.3)
+      activemodel (= 5.2.3)
+      activesupport (= 5.2.3)
+      arel (>= 9.0)
+    activestorage (5.2.3)
+      actionpack (= 5.2.3)
+      activerecord (= 5.2.3)
+      marcel (~> 0.3.1)
+    activesupport (5.2.3)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 0.7, < 2)
+      minitest (~> 5.1)
+      tzinfo (~> 1.1)
+    arel (9.0.0)
+    builder (3.2.3)
+    concurrent-ruby (1.1.5)
+    crass (1.0.4)
+    erubi (1.8.0)
+    globalid (0.4.2)
+      activesupport (>= 4.2.0)
+    i18n (1.6.0)
+      concurrent-ruby (~> 1.0)
+    loofah (2.2.3)
+      crass (~> 1.0.2)
+      nokogiri (>= 1.5.9)
+    mail (2.7.1)
+      mini_mime (>= 0.1.1)
+    marcel (0.3.3)
+      mimemagic (~> 0.3.2)
+    method_source (0.9.2)
+    mimemagic (0.3.3)
+    mini_mime (1.0.2)
+    mini_portile2 (2.4.0)
+    minitest (5.11.3)
+    nio4r (2.5.1)
+    nokogiri (1.10.4)
+      mini_portile2 (~> 2.4.0)
+    rack (2.0.7)
+    rack-test (1.1.0)
+      rack (>= 1.0, < 3)
+    rails (5.2.3)
+      actioncable (= 5.2.3)
+      actionmailer (= 5.2.3)
+      actionpack (= 5.2.3)
+      actionview (= 5.2.3)
+      activejob (= 5.2.3)
+      activemodel (= 5.2.3)
+      activerecord (= 5.2.3)
+      activestorage (= 5.2.3)
+      activesupport (= 5.2.3)
+      bundler (>= 1.3.0)
+      railties (= 5.2.3)
+      sprockets-rails (>= 2.0.0)
+    rails-dom-testing (2.0.3)
+      activesupport (>= 4.2.0)
+      nokogiri (>= 1.6)
+    rails-html-sanitizer (1.2.0)
+      loofah (~> 2.2, >= 2.2.2)
+    railties (5.2.3)
+      actionpack (= 5.2.3)
+      activesupport (= 5.2.3)
+      method_source
+      rake (>= 0.8.7)
+      thor (>= 0.19.0, < 2.0)
+    rake (12.3.3)
+    sprockets (3.7.2)
+      concurrent-ruby (~> 1.0)
+      rack (> 1, < 3)
+    sprockets-rails (3.2.1)
+      actionpack (>= 4.0)
+      activesupport (>= 4.0)
+      sprockets (>= 3.0.0)
+    sqlite3 (1.4.1)
+    thor (0.20.3)
+    thread_safe (0.3.6)
+    tzinfo (1.2.5)
+      thread_safe (~> 0.1)
+    websocket-driver (0.7.1)
+      websocket-extensions (>= 0.1.0)
+    websocket-extensions (0.1.4)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  concerto_frontend_vue!
+  sqlite3
+
+BUNDLED WITH
+   2.0.1

concerto-frontend-vue-gem/LICENSE

@@ -0,0 +1,13 @@
+  Copyright 2014 Concerto Authors
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

concerto-frontend-vue-gem/README.md

@@ -0,0 +1,5 @@
+# Concerto Frontend Vue Plugin
+
+Concerto Digital Signage plugin using Vue.js frontend. 
+
+After building our [Concerto Frontend Vue Repository](https://github.com/mfrederickson/concerto-frontend-vue) by using `npm run build`, copy the dist/app.js file to this gem under app/assets/javascripts/concerto_frontend/.

concerto-frontend-vue-gem/Rakefile

@@ -0,0 +1,37 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'ConcertoFrontendVue'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+load 'rails/tasks/statistics.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test