提交: 233ca9d157561caa2264cd7f1815b8c5e10e4d51 - mmw_serv (git)

Commit MetaInfo

• 修订版: 233ca9d157561caa2264cd7f1815b8c5e10e4d51 (tree)
• 时间: 2017-08-07 12:27:41
• 作者: HMML <hmml3939@gmai...>
• Commiter: HMML

Log Message

Implement theme editor.

更改概述

• modified: .gitignore
• modified: Gemfile
• modified: Gemfile.lock
• add: app/assets/images/loading.gif
• add: app/assets/images/preview-base.png
• modified: app/assets/javascripts/application.js
• add: app/assets/javascripts/common.coffee
• add: app/assets/javascripts/drafts.coffee
• modified: app/assets/stylesheets/application.scss
• add: app/assets/stylesheets/awesome_print.scss
• add: app/assets/stylesheets/drafts.scss
• add: app/controllers/drafts_controller.rb
• add: app/helpers/drafts_helper.rb
• add: app/javascript/components/draft_editor.jsx
• add: app/javascript/components/hello.jsx
• add: app/javascript/packs/main.js
• add: app/models/draft.rb
• modified: app/models/forecast.rb
• add: app/views/drafts/_draft.json.jbuilder
• add: app/views/drafts/_form.html.haml
• add: app/views/drafts/edit.html.haml
• add: app/views/drafts/index.html.haml
• add: app/views/drafts/index.json.jbuilder
• add: app/views/drafts/new.html.haml
• add: app/views/drafts/show.html.haml
• add: app/views/drafts/show.json.jbuilder
• modified: app/views/layouts/application.html.haml
• add: app/views/layouts/preview.html.haml
• modified: config/application.rb
• modified: config/deploy/docker.rb
• modified: config/initializers/simple_form_bootstrap.rb
• modified: config/locales/en.yml
• modified: config/routes.rb
• add: db/migrate/20170804181345_create_drafts.rb
• add: db/migrate/20170804183731_add_attachment_wi_images_to_drafts.rb
• modified: db/schema.rb
• modified: lib/application_responder.rb
• modified: package.json
• add: spec/controllers/drafts_controller_spec.rb
• add: spec/factories/drafts.rb
• add: spec/models/draft_spec.rb
• add: spec/routing/drafts_routing_spec.rb
• add: test/application_system_test_case.rb
• add: test/system/drafts_test.rb
• modified: yarn.lock

差异

--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,8 @@
 
 /node_modules
 /yarn-error.log
+/public/packs
+/public/system
 
 /.vagrant
 /erd.*
@@ -36,5 +38,3 @@
 *.orig
 *.tmp
 *.old
-/public/packs
-/node_modules

--- a/Gemfile
+++ b/Gemfile
@@ -42,6 +42,8 @@ gem 'kaminari-i18n'
 gem 'font-awesome-rails'
 gem 'bootstrap', '~> 4.0.0.alpha6'
 gem 'popper_js'
+gem 'tether-rails'
+gem 'i18n-js'
 gem 'enum_help'
 gem 'jquery-turbolinks'
 gem 'yaml_db'
@@ -53,6 +55,8 @@ gem 'devise'
 gem 'omniauth-twitter'
 gem 'daemons'
 gem 'exception_notification', group: :production
+gem 'paperclip'
+gem 'rqrcode', github: 'sugi/rqrcode', branch: 'inline-svg'
 
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console

--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -6,6 +6,14 @@ GIT
     rb-inotify (0.9.7)
       ffi (>= 0.5.0)
 
+GIT
+  remote: git://github.com/sugi/rqrcode.git
+  revision: 74692545b8335b5ab9499f24a7e8cfbe4a01892f
+  branch: inline-svg
+  specs:
+    rqrcode (0.10.1)
+      chunky_png (~> 1.0)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -86,6 +94,10 @@ GEM
       xpath (~> 2.0)
     childprocess (0.7.1)
       ffi (~> 1.0, >= 1.0.11)
+    chunky_png (1.3.8)
+    climate_control (0.1.0)
+    cocaine (0.5.8)
+      climate_control (>= 0.0.3, < 1.0)
     coderay (1.1.1)
     coffee-rails (4.2.2)
       coffee-script (>= 2.2.0)
@@ -170,6 +182,8 @@ GEM
       nokogiri (>= 1.6.0)
       ruby_parser (~> 3.5)
     i18n (0.8.6)
+    i18n-js (3.0.0.rc16)
+      i18n (~> 0.6, >= 0.6.6)
     jbuilder (2.7.0)
       activesupport (>= 4.2.0)
       multi_json (>= 1.2)
@@ -209,6 +223,7 @@ GEM
     mime-types (3.1)
       mime-types-data (~> 3.2015)
     mime-types-data (3.2016.0521)
+    mimemagic (0.3.2)
     mini_portile2 (2.2.0)
     minitest (5.10.3)
     multi_json (1.12.1)
@@ -235,6 +250,12 @@ GEM
       omniauth-oauth (~> 1.1)
       rack
     orm_adapter (0.5.0)
+    paperclip (5.1.0)
+      activemodel (>= 4.2.0)
+      activesupport (>= 4.2.0)
+      cocaine (~> 0.5.5)
+      mime-types
+      mimemagic (~> 0.3.0)
     popper_js (1.10.8)
     pry (0.10.4)
       coderay (~> 1.1.0)
@@ -359,6 +380,8 @@ GEM
     sshkit-backend-docker (0.1.2)
       sshkit (>= 1.9.0)
     temple (0.8.0)
+    tether-rails (1.4.0)
+      rails (>= 3.1)
     therubyracer (0.12.3)
       libv8 (~> 3.16.14.15)
       ref
@@ -424,6 +447,7 @@ DEPENDENCIES
   guard-bundler
   guard-rspec
   haml-rails
+  i18n-js
   jbuilder (~> 2.5)
   jquery-rails
   jquery-turbolinks
@@ -433,6 +457,7 @@ DEPENDENCIES
   mysql2
   nokogiri
   omniauth-twitter
+  paperclip
   popper_js
   pry
   pry-byebug
@@ -444,6 +469,7 @@ DEPENDENCIES
   rails-i18n
   rb-inotify!
   responders
+  rqrcode!
   rspec-rails
   sass-rails (~> 5.0)
   sdoc (~> 0.4.0)
@@ -453,6 +479,7 @@ DEPENDENCIES
   spring-commands-rspec
   spring-watcher-listen (~> 2.0.0)
   sqlite3
+  tether-rails
   therubyracer
   turbolinks (~> 5)
   uglifier (>= 1.3.0)

Binary files /dev/null and b/app/assets/images/loading.gif differ

Binary files /dev/null and b/app/assets/images/preview-base.png differ

--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -12,8 +12,10 @@
 //
 //= require jquery3
 //= require popper
+//= require tether
 //= require jquery.turbolinks
 //= require jquery_ujs
 //= require bootstrap-sprockets
 //= require turbolinks
+//= require i18n/translations
 //= require_tree .

--- /dev/null
+++ b/app/assets/javascripts/common.coffee
@@ -0,0 +1 @@
+# console.log 'Hello, this is common coffee.'

--- /dev/null
+++ b/app/assets/javascripts/drafts.coffee
@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -1,4 +1,10 @@
 @import "bootstrap";
 @import "font-awesome";
+@import "tether";
+@import "tether-theme-basic";
+
+@import "awesome_print";
 @import "common";
+
 @import "dist_signals";
+@import "drafts";

--- /dev/null
+++ b/app/assets/stylesheets/awesome_print.scss
@@ -0,0 +1,8 @@
+.debug_dump {
+    kbd {
+        background-color: transparent;
+        padding-left: 0;
+        padding-right: 0;
+        color: black;
+    }
+}

--- /dev/null
+++ b/app/assets/stylesheets/drafts.scss
@@ -0,0 +1,192 @@
+.draft-editor {
+    height: auto;
+    .draft-editor-table {
+        table-layout: fixed;
+        width: 100%;
+        table-collapse: collapse;
+        th { text-align: center; }
+        th, td { border: 1px solid #ccc; position: relative; }
+        td {
+            background-color: rgba(0, 0, 0, 0.5);
+            color: white;
+        }
+        .corner {
+            background-image: linear-gradient(35deg, transparent 49.5%, #ccc 49.5%, #ccc 50.5%, transparent 50.5%, transparent);
+            .first { text-align: right }
+            .second { text-align: left; }
+            .first, .second { padding: 0 1rem; }
+        }
+    }
+    .dropzone {
+        border-width: 4px;
+        border-color: #ddd;
+        border-style: dashed;
+        border-radius: 5px;
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }
+    .dropzone-active {
+        border-style: solid;
+    }
+    .dropzone-accept {
+        border-color: #6c6;
+        border-style: solid;
+    }
+    .dropzone-reject {
+        border-color: #c66;
+        border-style: solid;
+    }
+    .user-weather-icon {
+        height: 120px;
+        width: 120px;
+        margin: auto;
+        position: relative;
+        vertical-align: middle;
+        text-align: center;
+        line-height: 120px;
+        background-image: linear-gradient(to bottom, rgba(34, 34, 34, 0.733), rgba(34, 34, 34, 0.866) 50%);
+        border-radius: 8px;
+        img {
+            display: block;
+            position: absolute;
+            margin: auto;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            max-width: 97%;
+            max-height: 97%;
+        }
+    }
+    .weather-icon-progress {
+        margin: auto;
+        width: 32px;
+        height: 32px;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-image: image-url('loading.gif');
+    }
+    .day-frame-white .user-weather-icon {
+        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.66666), rgba(255, 255, 255, 0.933333) 50%);
+    }
+    .weather-icon-missing {
+        text-align: center;
+        line-height: 1;
+        .fa {
+            font-size: 120px;
+            color: #bbb;
+        }
+    }
+}
+@media (max-width: map-get($grid-breakpoints, lg)) {
+    .draft-editor {
+        .user-weather-icon {
+            min-height: 80px;
+        }
+        .weather-icon-missing {
+            .fa {
+                font-size: 80px;
+            }
+        }
+    }
+}
+@media (max-width: map-get($grid-breakpoints, md)) {
+    .draft-editor {
+        .user-weather-icon {
+            min-height: 36px;
+        }
+        .weather-icon-missing {
+            .fa {
+                font-size: 36px;
+            }
+        }
+    }
+}
+
+.preview-info {
+    .qr-code { 
+        display: inline-block;
+        width: 300px;
+        height: 300px;
+        position: relative;
+        svg { width: 100%; height: 100%; }
+    }
+}
+
+.preview-base {
+    background-image: image-url('preview-base.png');
+    background-size: cover;
+    background-position: top left;
+    background-repeat: no-repeat;
+    height: 640px;
+    width: 360px;
+    position: relative;
+    .widget-frame {
+        position: relative;
+    }
+    .widget-frame1 {
+        top: 88px;
+        left: 11px;
+        width: 338px;
+        height: 154px;
+    }
+    .widget-frame2 {
+        top: 103px;
+        left: 11px;
+        width: 338px;
+        height: 238px;
+    }
+    .day-frame {
+        position: absolute;
+        top: 20px;
+        border-radius: 3px;
+        width: 164px;
+        background-image: linear-gradient(to bottom, rgba(34, 34, 34, 0.733), rgba(34, 34, 34, 0.866) 50%);
+        img {
+            display: block;
+            position: absolute;
+            margin: auto;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            max-width: 97%;
+            max-height: 97%;
+        }
+    }
+    .widget-frame1 .day-frame {
+        height: 111px;
+    }
+    .widget-frame2 .day-frame {
+        height: 195px;
+    }
+    .day-frame1 {
+        left: 2px;
+    }
+    .day-frame2 {
+        left: 171.5px;
+    }
+    .frame-white .day-frame {
+        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.66666), rgba(255, 255, 255, 0.933333) 50%);
+    }
+    .weather-text {
+        text-align: center;
+        bottom: 3px;
+        position: absolute;
+        width: 100%;
+        span {
+            color: white;
+            font-size: 12px;
+            text-shadow: 0.5px 0.5px 2px #000;
+            display: inline-block;
+            background-color: rgba(0, 0, 0, 0.2);
+            border-radius: 8px;
+            font-weight: bold;
+            padding: 1px 6px;
+        }
+    }
+}

--- /dev/null
+++ b/app/controllers/drafts_controller.rb
@@ -0,0 +1,53 @@
+class DraftsController < ApplicationController
+  before_action :set_draft, only: [:show, :edit, :update, :destroy]
+
+  respond_to :html
+
+  def index
+    if !signed_in?
+      @drafts = []
+    elsif current_user.admin?
+      @drafts = Draft.all.page(params[:page])
+    else # normal user
+      @drafts = Draft.where(user_id: current_user.id).page(params[:page])
+    end
+    respond_with(@drafts)
+  end
+
+  def show
+    respond_with(@draft, layout: 'preview')
+  end
+
+  def new
+    @draft = Draft.create user: current_user
+    redirect_to edit_draft_path(@draft)
+  end
+
+  def edit
+  end
+
+  def create
+    @draft = Draft.new(draft_params)
+    @draft.save
+    respond_with(@draft)
+  end
+
+  def update
+    @draft.update(draft_params)
+    respond_with(@draft)
+  end
+
+  def destroy
+    @draft.destroy
+    respond_with(@draft)
+  end
+
+  private
+  def set_draft
+    @draft = Draft.find_by!(key: params[:id])
+  end
+
+  def draft_params
+    params.require(:draft).permit(:title, :url, :day_frame, *Draft::ICONS.map{|i| "wi_#{i}"})
+  end
+end

--- /dev/null
+++ b/app/helpers/drafts_helper.rb
@@ -0,0 +1,2 @@
+module DraftsHelper
+end

--- /dev/null
+++ b/app/javascript/components/draft_editor.jsx
@@ -0,0 +1,192 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'reactstrap';
+import Dropzone from 'react-dropzone'
+
+
+class DraftImageDropper extends React.Component {
+  static propTypes = {
+    url: PropTypes.string.isRequired,
+    wsym: PropTypes.string.isRequired,
+    curImage: PropTypes.string,
+    updateImage: PropTypes.func.isRequired,
+  }
+
+  constructor (props) {
+    super(props);
+    this.state = {
+      //draft: new DraftStore(props.draft),
+      uploading: false,
+    };
+  }
+
+  render() {
+    let on_drop = (okFiles, ngFiles) => {
+      let remove_preview = (file) => window.URL.revokeObjectURL(file.preview);
+      let wsym = this.props.wsym;
+      
+      if (ngFiles)
+        ngFiles.forEach(remove_preview);
+      if (!okFiles)
+        return;
+      okFiles.forEach(remove_preview);
+
+      let data = new FormData()
+      data.set(`draft[wi_${wsym}]`, okFiles[0]);
+      
+      this.setState({uploading: true});
+      jQuery.ajax({
+        url: this.props.url,
+        method: 'PATCH',
+        contentType: false,
+        processData: false,
+        data: data,
+        success: (data, status, xhr) => {
+          this.props.updateImage(wsym, data[`wi_${wsym}_url`]);
+          this.setState({uploading: false});
+        },
+        error: () => alert(I18n.t('upload_err')),
+      });
+    }
+
+    if (this.state.uploading) {
+      return(
+        <div className="theme-image">
+          <div className="weather-icon-progress" />
+        </div>
+      );
+    }
+
+    var content = <div className="weather-icon-missing">
+          <span className="fa fa-plus-circle" />
+        </div>;
+    if (this.props.curImage) {
+      content = <div className="user-weather-icon">
+        <img src={this.props.curImage} />
+      </div>;
+    }
+      
+    return (
+      <div className="theme-image">
+        <Dropzone accept="image/*" minSize={128}
+                  className="dropzone"
+                  activeClassName="dropzone dropzone-active"
+                  acceptClassName="dropzone dropzone-accept"
+                  rejectClassName="dropzone dropzone-reject"
+                  onDrop={on_drop}
+                  >
+          {content}
+          <div className="clearfix"/>
+        </Dropzone>
+      </div>
+    );
+  }
+}
+
+class DraftEditor extends React.Component {
+  static propTypes = {
+    draft: PropTypes.object.isRequired,
+    wsyms: PropTypes.array.isRequired,
+    wsym_rejects: PropTypes.array,
+  }
+
+  constructor (props) {
+    super(props);
+    this.state = {
+      //draft: new DraftStore(props.draft),
+      draft: Object.assign({}, props.draft),
+    };
+  }
+
+  updateImage (sym, imageUrl) {
+    let d = Object.assign({}, this.state.draft)
+    d[`wi_${sym}_url`] = imageUrl;
+    this.setState({draft: d})
+  }
+
+  updateFrame (value) {
+    let d = Object.assign({}, this.state.draft)
+    d["day_frame"] = value;
+    this.setState({draft: d})
+    jQuery.ajax({
+      url: d.path,
+      method: 'PATCH',
+      data: {'draft[day_frame]': value}
+    });
+  }
+  
+  render() {
+    let d = this.state.draft;
+
+    let header_cols = []
+    let wsyms = this.props.wsyms
+    wsyms.forEach((ws) => {
+      header_cols.push(<th key={`w-h-${ws}`}>
+                       {I18n.t('weather_symbols.'+ws)}
+                       </th>);
+    });
+    let body_rows = [
+        <tr key="w-r-none">
+        <th key="w-ch-none">{I18n.t('none')}</th>
+        {wsyms.map((ws) =>
+                   <td key={`w-c-none-${ws}`}>
+                   <DraftImageDropper key={`i-${ws}`} wsym={ws} url={d.path}
+                   curImage={d[`wi_${ws}_url`]} updateImage={this.updateImage.bind(this)} />
+                   </td>)}
+        </tr>
+    ];
+    wsyms.forEach((ws1) => {
+      let cols = [<th key={`w-ch-${ws1}`}>{I18n.t(`weather_symbols.${ws1}`)}</th>];
+      wsyms.forEach((ws2) => {
+        var content = null;
+        if (ws1 != ws2 && this.props.wsym_rejects && this.props.wsym_rejects.indexOf(ws1+ws2) === -1) {
+          content = <DraftImageDropper key={'i-'+ws1+ws2} wsym={ws1+ws2} url={d.path}
+          curImage={d[`wi_${ws1}${ws2}_url`]} updateImage={this.updateImage.bind(this)} />
+        }
+        cols.push(
+          <td key={`w-c-${ws1}-${ws2}`}>
+            {content}
+          </td>);
+      });
+      body_rows.push(<tr key={`w-r-${ws1}`}>{cols}</tr>);
+    });
+
+    return(
+      <div className="draft-editor">
+        <div>
+          <b>{I18n.t('day_frame_type')}</b>:
+          <div className="form-check form-check-inline">
+            <label className="form-check-label">
+              <input className="form-check-input" type="radio" name="frame"
+                     checked={d.day_frame == null || d.day_frame == "black"}
+                     onClick={() => this.updateFrame('black')}/>
+                {I18n.t('day_frames.black')}
+            </label>
+          </div>
+          <div className="form-check form-check-inline">
+            <label className="form-check-label">
+              <input className="form-check-input" type="radio" name="frame" 
+                     checked={d.day_frame == "white"}
+                     onClick={(e) => this.updateFrame('white')}/>
+                {I18n.t('day_frames.white')}
+            </label>
+          </div>
+        </div>
+        <table className={`draft-editor-table day-frame-${d.day_frame}`}>
+          <thead>
+            <tr>
+              <th className="corner">
+                <div className="first">{I18n.t('editor_table_header.first_weather')}</div>
+                <div className="second">{I18n.t('editor_table_header.second_weather')}</div>
+              </th>
+              {header_cols}
+            </tr>
+          </thead>
+          <tbody>{body_rows}</tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+export default DraftEditor;

--- /dev/null
+++ b/app/javascript/components/hello.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Button } from 'reactstrap';
+
+class Hello extends React.Component {
+  render() {
+    return(
+      <div>
+        <Button color="danger">ReactStrap!</Button>
+        Hello, {this.props.name}!
+      </div>
+    );
+  }
+}
+
+export default Hello;

--- /dev/null
+++ b/app/javascript/packs/main.js
@@ -0,0 +1,11 @@
+import WebpackerReact from 'webpacker-react';
+import Hello from '../components/hello';
+import DraftEditor from '../components/draft_editor';
+
+if (typeof(window.Turbolinks) != "undefined")
+  Turbolinks.start();
+
+WebpackerReact.setup({Hello, DraftEditor});
+
+class H2 {
+}

--- /dev/null
+++ b/app/models/draft.rb
@@ -0,0 +1,78 @@
+class Draft < ApplicationRecord
+  EXPIRES_IN = 3.days
+  KEY_MAX_LEN = 12
+
+  icons = [
+    Forecast::WEATHER_SYM_CLEAR_N,
+    Forecast::WEATHER_SYM_CLEAR_D,
+    Forecast::WEATHER_SYM_RAIN,
+    Forecast::WEATHER_SYM_SNOW,
+    Forecast::WEATHER_SYM_CLOUD,
+    Forecast::WEATHER_SYM_THUNDER,
+  ]
+  icons += icons.map {|i1| icons.map {|i2| i1 == i2 ? nil : i1+i2 }}.flatten.compact
+  icons -= [
+    Forecast::WEATHER_SYM_CLEAR_N+Forecast::WEATHER_SYM_CLEAR_D,
+    Forecast::WEATHER_SYM_CLEAR_D+Forecast::WEATHER_SYM_CLEAR_N,
+  ]
+  ICONS = icons.freeze
+
+  FILENAME_MAP = {
+    Forecast::WEATHER_SYM_CLEAR_N => 'ClearN',
+    Forecast::WEATHER_SYM_CLEAR_D => 'ClearD',
+    Forecast::WEATHER_SYM_RAIN    => 'Rain',
+    Forecast::WEATHER_SYM_SNOW    => 'Snow',
+    Forecast::WEATHER_SYM_CLOUD   => 'Cloud',
+    Forecast::WEATHER_SYM_THUNDER => 'Thunder',
+  }
+  FILENAME_MAP.freeze
+
+  enum day_frame: {white: '@builtin/white', black: '@builtin/black'}, _prefix: 'day_frame'
+  belongs_to :user, required: false
+  before_save :renew_expire
+  after_initialize :set_key
+  validates :title, :url, length: { maximum: 255 }
+  validates :url, format: { with: %r{\Ahttps?://[a-z0-9-]+(\.[a-z0-9-]+){1,}/}i }, allow_blank: true
+  validates :key, uniqueness: true
+
+  icon_styles = {}
+  [500, 250, 120, 64].each do |size|
+    icon_styles["webp#{size}"] = {geometry: "#{size}x#{size}>", format: "webp", convert_options: "-quality 75"}
+    icon_styles["png#{size}"] = {geometry: "#{size}x#{size}>", format: "png"}
+  end
+
+  ICONS.each do |i|
+    has_attached_file "wi_#{i}", styles: icon_styles.symbolize_keys
+    validates_attachment "wi_#{i}",
+    content_type: {content_type: /\Aimage\/.*\z/},
+    size: { less_than: 20.megabyte }
+  end
+
+  def renew_expire
+    self.expires_at = Time.now + EXPIRES_IN
+  end
+
+  def set_key(force = false)
+    return true if key.present? && !force
+    loop do
+      self.key = (SecureRandom.random_number(('z'*KEY_MAX_LEN).to_i(36)) + 1).to_s(36).scan(/.{1,4}/).join("-")
+      check_cond = {key: self.key}
+      persisted? and check_cond[:id] = self.id
+      break unless Draft.where(check_cond).exists?
+    end
+  end
+
+  def to_param
+    key
+  end
+
+  def as_json(opts = {})
+    ret = super(opts)
+    ret["path"] = Rails.application.routes.url_helpers.draft_path(self, format: :json)
+    ICONS.each do |i|
+      public_send("wi_#{i}?") or next
+      ret["wi_#{i}_url"] = public_send("wi_#{i}").url(opts[:weather_image_style] || :png120)
+    end
+    ret
+  end
+end

--- a/app/models/forecast.rb
+++ b/app/models/forecast.rb
@@ -3,10 +3,10 @@ class Forecast < ApplicationRecord
 
   WEATHER_SYM_CLEAR_D = "d";
   WEATHER_SYM_CLEAR_N = "n";
-  WEATHER_SYM_THUNDER = "t";
-  WEATHER_SYM_SNOW    = "s";
-  WEATHER_SYM_RAIN    = "r";
   WEATHER_SYM_CLOUD   = "c";
+  WEATHER_SYM_RAIN    = "r";
+  WEATHER_SYM_SNOW    = "s";
+  WEATHER_SYM_THUNDER = "t";
 
   JMA_LABEL_TO_SYMBOL = {
   }

--- /dev/null
+++ b/app/views/drafts/_draft.json.jbuilder
@@ -0,0 +1,2 @@
+json.extract! draft, :id, :key, :title, :url, :day_frame, :expires_at, :user_id, :created_at, :updated_at
+json.url draft_url(draft, format: :json)

--- /dev/null
+++ b/app/views/drafts/_form.html.haml
@@ -0,0 +1,8 @@
+= simple_form_for(@draft, remote: true) do |f|
+  .form-inputs
+    = f.input :key
+    = f.input :title
+    = f.input :url
+
+  .form-actions
+    = f.button :submit

--- /dev/null
+++ b/app/views/drafts/edit.html.haml
@@ -0,0 +1,50 @@
+- content_for(:title) { t('.title') }
+
+.actions.pull-right
+  .btn.btn-secondary.btn-lg{data: {toggle: 'modal', target: '.preview-info-modal'}}
+    = fa_icon :mobile
+    = t 'device_preview'
+  .btn.btn-primary.btn-lg{data: {toggle: 'modal', target: '.produce-modal'}}
+    = fa_icon 'chevron-circle-right'
+    = t 'finish_edit'
+
+%h1= t '.title'
+
+.clearfix
+
+- wsyms = Forecast.constants.grep(/^WEATHER_SYM_/).map {|n| Forecast.const_get(n)}
+
+= react_component 'DraftEditor', draft: @draft, wsyms: wsyms,
+  wsym_rejects: [Forecast::WEATHER_SYM_CLEAR_D + Forecast::WEATHER_SYM_CLEAR_N, Forecast::WEATHER_SYM_CLEAR_N + Forecast::WEATHER_SYM_CLEAR_D]
+
+.preview-info-modal.modal.fade
+  .modal-dialog.modal-lg
+    .modal-content
+      .modal-header
+        %h5.modal-title= t 'to_display_preview_title'
+        %button.close{type: 'button', data: {dismiss: 'modal'}}
+          %span ×
+      .modal-body
+        .preview-info
+          .qr-code.pull-right
+            = raw RQRCode::QRCode.new(draft_url(@draft)).as_svg(xml_decleration: false)
+          %p= t 'to_display_preview_desc'
+          %br
+          %b= draft_url(@draft)
+
+.produce-modal.modal.fade
+  .modal-dialog.modal-lg
+    .modal-content
+      .modal-header
+        %h5.modal-title= t 'to_produce_title'
+        %button.close{type: 'button', data: {dismiss: 'modal'}}
+          %span ×
+      .modal-body
+        .produce
+          %p= t 'to_produce_desc'
+          = render 'form'
+
+:coffee
+  jQuery('.edit_draft').on 'ajax:success', (xhr, data, status) ->
+    jQuery(this).html(jQuery(data).find('.edit_draft').html())
+

--- /dev/null
+++ b/app/views/drafts/index.html.haml
@@ -0,0 +1,31 @@
+%h1 Listing drafts
+
+%table
+  %thead
+    %tr
+      %th Key
+      %th Title
+      %th Url
+      %th Day frame
+      %th Expires at
+      %th User
+      %th
+      %th
+      %th
+
+  %tbody
+    - @drafts.each do |draft|
+      %tr
+        %td= draft.key
+        %td= draft.title
+        %td= draft.url
+        %td= draft.day_frame
+        %td= draft.expires_at
+        %td= draft.user
+        %td= link_to 'Show', draft
+        %td= link_to 'Edit', edit_draft_path(draft)
+        %td= link_to 'Destroy', draft, method: :delete, data: { confirm: 'Are you sure?' }
+
+%br
+
+= link_to 'New Draft', new_draft_path

--- /dev/null
+++ b/app/views/drafts/index.json.jbuilder
@@ -0,0 +1 @@
+json.array! @drafts, partial: 'drafts/draft', as: :draft

--- /dev/null
+++ b/app/views/drafts/new.html.haml
@@ -0,0 +1,5 @@
+%h1 New draft
+
+= render 'form'
+
+= link_to 'Back', drafts_path

--- /dev/null
+++ b/app/views/drafts/show.html.haml
@@ -0,0 +1,43 @@
+- content_for(:title) { t('.title')}
+
+.alert.alert-info
+  .btn.btn-primary.pull-right.btn-sm{onClick: 'location.reload()'}
+    = fa_icon(:refresh)
+    = t 'reload'
+  = t('preview_desc')
+  .clearfix
+
+:ruby
+  imgs = {}
+  @draft.as_json(weather_image_style: request.user_agent.to_s =~ /chrome/i ? :webp500 : :png500).each do |key, val|
+    key =~ /^wi_(.*)_url/ or next
+    imgs[$1] = val
+  end
+  img1_key = imgs.keys[rand(imgs.keys.length)]
+  img2_key = imgs.keys[rand(imgs.keys.length)]
+  img3_key = imgs.keys[rand(imgs.keys.length)]
+  img4_key = imgs.keys[rand(imgs.keys.length)]
+
+- if imgs.empty?
+  .alert.alert-danger= t 'draft_has_no_image'
+- else
+  .preview-base
+    .widget-frame.widget-frame1{class: "frame-#{@draft.day_frame}"}
+      .day-frame.day-frame1
+        = image_tag imgs[img1_key]
+        .weather-text
+          %span= t("wheater_label_samples.#{img1_key}")
+      .day-frame.day-frame2
+        = image_tag imgs[img2_key]
+        .weather-text
+          %span= t("wheater_label_samples.#{img2_key}")
+    .widget-frame.widget-frame2{class: "frame-#{@draft.day_frame}"}
+      .day-frame.day-frame1
+        = image_tag imgs[img3_key]
+        .weather-text
+          %span= t("wheater_label_samples.#{img3_key}")
+      .day-frame.day-frame2
+        = image_tag imgs[img4_key]
+        .weather-text
+          %span= t("wheater_label_samples.#{img4_key}")
+    

--- /dev/null
+++ b/app/views/drafts/show.json.jbuilder
@@ -0,0 +1 @@
+json.partial! "drafts/draft", draft: @draft

--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -7,6 +7,7 @@
     %meta{content: content_for?(:description) ? yield(:description) : t('description'), :name => "description"}
     = stylesheet_link_tag :application, :media => "all"
     = javascript_include_tag :application
+    = javascript_pack_tag 'main'
     = csrf_meta_tags
     = yield(:head)
   %body

--- /dev/null
+++ b/app/views/layouts/preview.html.haml
@@ -0,0 +1,14 @@
+!!!
+%html#preview{lang: I18n.locale}
+  %head
+    %meta{name: "viewport", content: "width=360, user-scalable=no"}
+    - page_title = content_for?(:title) ? yield(:title) : t("#{controller_name}.#{action_name}.title", default: "")
+    %title= page_title.present? ? "#{page_title} - #{t('site_title')}" : t('site_title')
+    %meta{content: content_for?(:description) ? yield(:description) : t('description'), :name => "description"}
+    = stylesheet_link_tag :application, :media => "all"
+    = javascript_include_tag :application
+    = javascript_pack_tag 'main'
+    = csrf_meta_tags
+    = yield(:head)
+  %body#preview
+    = yield

--- a/config/application.rb
+++ b/config/application.rb
@@ -29,9 +29,9 @@ module MmwPsh
       g.fixture_replacement :factory_girl, dir: "spec/factories"
     end
 
-    #config.i18n.default_locale = :en
-    #config.i18n.available_locales = [:en, :ja]
-    #config.i18n.enforce_available_locales = true
+    config.i18n.default_locale = :en
+    config.i18n.available_locales = [:en, :ja]
+    config.i18n.enforce_available_locales = true
     config.encoding = "utf-8"
 
     config.hub_secret_default = ''

--- a/config/deploy/docker.rb
+++ b/config/deploy/docker.rb
@@ -1,6 +1,6 @@
 set :sshkit_backend, SSHKit::Backend::Docker
 set :stage, :production
-set :branch, 'master'
+set :branch, 'production'
 set :deploy_to, '/app'
 set :repo_url, '/src'
 fetch(:default_env).merge!(rails_env: :production,

--- a/config/initializers/simple_form_bootstrap.rb
+++ b/config/initializers/simple_form_bootstrap.rb
@@ -4,7 +4,7 @@ SimpleForm.setup do |config|
   config.button_class = 'btn btn-primary'
   config.boolean_label_class = nil
 
-  config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+  config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
@@ -12,27 +12,27 @@ SimpleForm.setup do |config|
     b.optional :pattern
     b.optional :min_max
     b.optional :readonly
-    b.use :label, class: 'control-label'
+    b.use :label, class: 'form-control-label'
 
     b.use :input, class: 'form-control'
-    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+    b.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+    b.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
   end
 
-  config.wrappers :vertical_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+  config.wrappers :vertical_file_input, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
     b.optional :minlength
     b.optional :readonly
-    b.use :label, class: 'control-label'
+    b.use :label, class: 'form-control-label'
 
     b.use :input
-    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+    b.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+    b.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
   end
 
-  config.wrappers :vertical_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+  config.wrappers :vertical_boolean, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
     b.use :html5
     b.optional :readonly
 
@@ -40,20 +40,20 @@ SimpleForm.setup do |config|
       ba.use :label_input
     end
 
-    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+    b.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+    b.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
   end
 
-  config.wrappers :vertical_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+  config.wrappers :vertical_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
     b.use :html5
     b.optional :readonly
-    b.use :label, class: 'control-label'
+    b.use :label, class: 'form-control-label'
     b.use :input
-    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+    b.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+    b.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
   end
 
-  config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+  config.wrappers :horizontal_form, tag: 'div', class: 'form-group row', error_class: 'has-danger' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
@@ -61,31 +61,31 @@ SimpleForm.setup do |config|
     b.optional :pattern
     b.optional :min_max
     b.optional :readonly
-    b.use :label, class: 'col-3 control-label'
+    b.use :label, class: 'col-3 form-control-label'
 
     b.wrapper tag: 'div', class: 'col-9' do |ba|
       ba.use :input, class: 'form-control'
-      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+      ba.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+      ba.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
     end
   end
 
-  config.wrappers :horizontal_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+  config.wrappers :horizontal_file_input, tag: 'div', class: 'form-group row', error_class: 'has-danger' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
     b.optional :minlength
     b.optional :readonly
-    b.use :label, class: 'col-3 control-label'
+    b.use :label, class: 'col-3 form-control-label'
 
     b.wrapper tag: 'div', class: 'col-9' do |ba|
       ba.use :input
-      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+      ba.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+      ba.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
     end
   end
 
-  config.wrappers :horizontal_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+  config.wrappers :horizontal_boolean, tag: 'div', class: 'form-group row', error_class: 'has-danger' do |b|
     b.use :html5
     b.optional :readonly
 
@@ -94,25 +94,25 @@ SimpleForm.setup do |config|
         ba.use :label_input
       end
 
-      wr.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-      wr.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+      wr.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+      wr.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
     end
   end
 
-  config.wrappers :horizontal_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+  config.wrappers :horizontal_radio_and_checkboxes, tag: 'div', class: 'form-group row', error_class: 'has-danger' do |b|
     b.use :html5
     b.optional :readonly
 
-    b.use :label, class: 'col-3 control-label'
+    b.use :label, class: 'col-3 form-control-label'
 
     b.wrapper tag: 'div', class: 'col-9' do |ba|
       ba.use :input
-      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+      ba.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+      ba.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
     end
   end
 
-  config.wrappers :inline_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+  config.wrappers :inline_form, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
@@ -123,32 +123,47 @@ SimpleForm.setup do |config|
     b.use :label, class: 'sr-only'
 
     b.use :input, class: 'form-control'
-    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+    b.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+    b.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
   end
 
-  config.wrappers :multi_select, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+  config.wrappers :multi_select, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
     b.use :html5
     b.optional :readonly
-    b.use :label, class: 'control-label'
+    b.use :label, class: 'form-control-label'
     b.wrapper tag: 'div', class: 'form-inline' do |ba|
       ba.use :input, class: 'form-control'
-      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+      ba.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+      ba.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
     end
   end
+
+  config.wrappers :horizontal_multi_select, tag: 'div', class: 'form-group row', error_class: 'has-danger' do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :label, class: 'col-3 form-control-label'
+
+    b.wrapper tag: 'div', class: 'col-9' do |ba|
+      ba.wrapper tag: 'div', class: 'form-inline' do |bb|
+        bb.use :input, class: 'form-control'
+        bb.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+        bb.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
+      end
+    end
+  end
+
   # Wrappers for forms and inputs using the Bootstrap toolkit.
   # Check the Bootstrap docs (http://getbootstrap.com)
   # to learn about the different styles for forms and inputs,
   # buttons and other elements.
-  config.default_wrapper = :vertical_form
+  config.default_wrapper = :horizontal_form
   config.wrapper_mappings = {
     check_boxes: :vertical_radio_and_checkboxes,
     radio_buttons: :vertical_radio_and_checkboxes,
     file: :vertical_file_input,
     boolean: :vertical_boolean,
-    datetime: :multi_select,
-    date: :multi_select,
-    time: :multi_select
+    datetime: :horizontal_multi_select,
+    date: :horizontal_multi_select,
+    time: :horizontal_multi_select
   }
 end

--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1,5 +1,76 @@
 en:
+  activerecord:
+    models:
+    attributes:
+
+  drafts:
+    show:
+      title: Theme preview
+    edit:
+      title: Theme editor
+  
   site_title: "MikuMikuWeather"
   login_with_: "Login with %{provider}"
   providers:
+    twitter: Twitter
+    google: Google
+    facebook: Facebook
     line: LINE
+  upload_err: "[Upload failed] Error on server. Please contact to administrator if you try again after some while."
+  weather_symbols:
+    d: Clear(Day)
+    n: Clear(Night)
+    c: Clouds
+    r: Rain
+    s: Snow
+    t: Thunderstorm
+  wheater_label_samples:
+    d: Clear
+    n: Clear
+    c: Clouds
+    r: Rain
+    s: Snow
+    t: Thunderstorm
+    nr: Clear - Rain
+    ns: Clear - Snow 
+    nc: Clear - Clouds
+    nt: Clear - Thunderstorm
+    dr: Clear, Rain
+    ds: Clear, Snow 
+    dc: Clear, Clouds
+    dt: Clear, Thunderstorm
+    rn: Rain, Clear
+    rd: Rain, Clear
+    rs: Rain, Snow
+    rc: Rain, Clouds
+    rt: Rain, Thunderstorm
+    sn: Snow, Clear
+    sd: Snow, Clear
+    sr: Snow, Rain
+    sc: Snow, Clouds
+    st: Snow, Thunderstorm
+    cn: Clouds, Clear
+    cd: Clouds, Clear
+    cr: Clouds, Rain
+    cs: Clouds, Snow
+    ct: Clouds, Thunderstorm
+    tn: Thunderstorm, Clear
+    td: Thunderstorm, Clear
+    tr: Thunderstorm, Rain
+    ts: Thunderstorm, Snow
+    tc: Thunderstorm, Clouds
+  editor_table_header:
+    first_weather: First
+    second_weather: Second
+  none: (None)
+  day_frame_type: Frame type
+  day_frames:
+    white: White
+    black: Black
+  preview_desc: Please reload to change icons.
+  draft_has_no_image: This theme draft has no image. Please upload your image before preview!
+  reload: Reload
+  to_display_preview_desc: To show widget preview with your uploading fiels, please open following URL or scan QR Code by your Android device.
+  to_display_preview_title: Preview on your device
+  device_preview: Device preview
+  finish_edit: Finish edit
\ No newline at end of file

--- a/config/routes.rb
+++ b/config/routes.rb
@@ -9,6 +9,7 @@ Rails.application.routes.draw do
 
   get  'sub', to: 'subscribe#verify'
   post 'sub', to: 'subscribe#distribute'
+  resources :drafts, except: %i(destroy)
   resources :users, only: %i(index show)
   resources :forecasts, only: %i(index show)
   resources :areas, only: %i(index show)
@@ -20,4 +21,6 @@ Rails.application.routes.draw do
   get 'logout', to: 'welcome#logout'
 
   root 'welcome#index'
+
+  mount ActionCable.server => '/cable'
 end

--- /dev/null
+++ b/db/migrate/20170804181345_create_drafts.rb
@@ -0,0 +1,16 @@
+class CreateDrafts < ActiveRecord::Migration[5.1]
+  def change
+    create_table :drafts do |t|
+      t.string :key, null: false
+      t.string :title, null: false, default: ''
+      t.string :url, null: false, default: ''
+      t.string :day_frame
+      t.datetime :expires_at, null: false
+      t.references :user
+
+      t.timestamps
+
+      t.index :key, unique: true
+    end
+  end
+end

--- /dev/null
+++ b/db/migrate/20170804183731_add_attachment_wi_images_to_drafts.rb
@@ -0,0 +1,77 @@
+class AddAttachmentWiImagesToDrafts < ActiveRecord::Migration[5.1]
+  def self.up
+    change_table :drafts do |t|
+      t.attachment :wi_n
+      t.attachment :wi_d
+      t.attachment :wi_r
+      t.attachment :wi_s
+      t.attachment :wi_c
+      t.attachment :wi_t
+      t.attachment :wi_nr
+      t.attachment :wi_ns
+      t.attachment :wi_nc
+      t.attachment :wi_nt
+      t.attachment :wi_dr
+      t.attachment :wi_ds
+      t.attachment :wi_dc
+      t.attachment :wi_dt
+      t.attachment :wi_rn
+      t.attachment :wi_rd
+      t.attachment :wi_rs
+      t.attachment :wi_rc
+      t.attachment :wi_rt
+      t.attachment :wi_sn
+      t.attachment :wi_sd
+      t.attachment :wi_sr
+      t.attachment :wi_sc
+      t.attachment :wi_st
+      t.attachment :wi_cn
+      t.attachment :wi_cd
+      t.attachment :wi_cr
+      t.attachment :wi_cs
+      t.attachment :wi_ct
+      t.attachment :wi_tn
+      t.attachment :wi_td
+      t.attachment :wi_tr
+      t.attachment :wi_ts
+      t.attachment :wi_tc
+    end
+  end
+
+  def self.down
+    remove_attachment :drafts, :wi_n
+    remove_attachment :drafts, :wi_d
+    remove_attachment :drafts, :wi_r
+    remove_attachment :drafts, :wi_s
+    remove_attachment :drafts, :wi_c
+    remove_attachment :drafts, :wi_t
+    remove_attachment :drafts, :wi_nr
+    remove_attachment :drafts, :wi_ns
+    remove_attachment :drafts, :wi_nc
+    remove_attachment :drafts, :wi_nt
+    remove_attachment :drafts, :wi_dr
+    remove_attachment :drafts, :wi_ds
+    remove_attachment :drafts, :wi_dc
+    remove_attachment :drafts, :wi_dt
+    remove_attachment :drafts, :wi_rn
+    remove_attachment :drafts, :wi_rd
+    remove_attachment :drafts, :wi_rs
+    remove_attachment :drafts, :wi_rc
+    remove_attachment :drafts, :wi_rt
+    remove_attachment :drafts, :wi_sn
+    remove_attachment :drafts, :wi_sd
+    remove_attachment :drafts, :wi_sr
+    remove_attachment :drafts, :wi_sc
+    remove_attachment :drafts, :wi_st
+    remove_attachment :drafts, :wi_cn
+    remove_attachment :drafts, :wi_cd
+    remove_attachment :drafts, :wi_cr
+    remove_attachment :drafts, :wi_cs
+    remove_attachment :drafts, :wi_ct
+    remove_attachment :drafts, :wi_tn
+    remove_attachment :drafts, :wi_td
+    remove_attachment :drafts, :wi_tr
+    remove_attachment :drafts, :wi_ts
+    remove_attachment :drafts, :wi_tc
+  end
+end

--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20170801155404) do
+ActiveRecord::Schema.define(version: 20170804183731) do
 
   create_table "areas", force: :cascade do |t|
     t.string "ns"
@@ -50,6 +50,155 @@ ActiveRecord::Schema.define(version: 20170801155404) do
     t.index ["status"], name: "index_dist_signals_on_status"
   end
 
+  create_table "drafts", force: :cascade do |t|
+    t.string "key", null: false
+    t.string "title", default: "", null: false
+    t.string "url", default: "", null: false
+    t.string "day_frame"
+    t.datetime "expires_at", null: false
+    t.integer "user_id"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.string "wi_n_file_name"
+    t.string "wi_n_content_type"
+    t.integer "wi_n_file_size"
+    t.datetime "wi_n_updated_at"
+    t.string "wi_d_file_name"
+    t.string "wi_d_content_type"
+    t.integer "wi_d_file_size"
+    t.datetime "wi_d_updated_at"
+    t.string "wi_r_file_name"
+    t.string "wi_r_content_type"
+    t.integer "wi_r_file_size"
+    t.datetime "wi_r_updated_at"
+    t.string "wi_s_file_name"
+    t.string "wi_s_content_type"
+    t.integer "wi_s_file_size"
+    t.datetime "wi_s_updated_at"
+    t.string "wi_c_file_name"
+    t.string "wi_c_content_type"
+    t.integer "wi_c_file_size"
+    t.datetime "wi_c_updated_at"
+    t.string "wi_t_file_name"
+    t.string "wi_t_content_type"
+    t.integer "wi_t_file_size"
+    t.datetime "wi_t_updated_at"
+    t.string "wi_nr_file_name"
+    t.string "wi_nr_content_type"
+    t.integer "wi_nr_file_size"
+    t.datetime "wi_nr_updated_at"
+    t.string "wi_ns_file_name"
+    t.string "wi_ns_content_type"
+    t.integer "wi_ns_file_size"
+    t.datetime "wi_ns_updated_at"
+    t.string "wi_nc_file_name"
+    t.string "wi_nc_content_type"
+    t.integer "wi_nc_file_size"
+    t.datetime "wi_nc_updated_at"
+    t.string "wi_nt_file_name"
+    t.string "wi_nt_content_type"
+    t.integer "wi_nt_file_size"
+    t.datetime "wi_nt_updated_at"
+    t.string "wi_dr_file_name"
+    t.string "wi_dr_content_type"
+    t.integer "wi_dr_file_size"
+    t.datetime "wi_dr_updated_at"
+    t.string "wi_ds_file_name"
+    t.string "wi_ds_content_type"
+    t.integer "wi_ds_file_size"
+    t.datetime "wi_ds_updated_at"
+    t.string "wi_dc_file_name"
+    t.string "wi_dc_content_type"
+    t.integer "wi_dc_file_size"
+    t.datetime "wi_dc_updated_at"
+    t.string "wi_dt_file_name"
+    t.string "wi_dt_content_type"
+    t.integer "wi_dt_file_size"
+    t.datetime "wi_dt_updated_at"
+    t.string "wi_rn_file_name"
+    t.string "wi_rn_content_type"
+    t.integer "wi_rn_file_size"
+    t.datetime "wi_rn_updated_at"
+    t.string "wi_rd_file_name"
+    t.string "wi_rd_content_type"
+    t.integer "wi_rd_file_size"
+    t.datetime "wi_rd_updated_at"
+    t.string "wi_rs_file_name"
+    t.string "wi_rs_content_type"
+    t.integer "wi_rs_file_size"
+    t.datetime "wi_rs_updated_at"
+    t.string "wi_rc_file_name"
+    t.string "wi_rc_content_type"
+    t.integer "wi_rc_file_size"
+    t.datetime "wi_rc_updated_at"
+    t.string "wi_rt_file_name"
+    t.string "wi_rt_content_type"
+    t.integer "wi_rt_file_size"
+    t.datetime "wi_rt_updated_at"
+    t.string "wi_sn_file_name"
+    t.string "wi_sn_content_type"
+    t.integer "wi_sn_file_size"
+    t.datetime "wi_sn_updated_at"
+    t.string "wi_sd_file_name"
+    t.string "wi_sd_content_type"
+    t.integer "wi_sd_file_size"
+    t.datetime "wi_sd_updated_at"
+    t.string "wi_sr_file_name"
+    t.string "wi_sr_content_type"
+    t.integer "wi_sr_file_size"
+    t.datetime "wi_sr_updated_at"
+    t.string "wi_sc_file_name"
+    t.string "wi_sc_content_type"
+    t.integer "wi_sc_file_size"
+    t.datetime "wi_sc_updated_at"
+    t.string "wi_st_file_name"
+    t.string "wi_st_content_type"
+    t.integer "wi_st_file_size"
+    t.datetime "wi_st_updated_at"
+    t.string "wi_cn_file_name"
+    t.string "wi_cn_content_type"
+    t.integer "wi_cn_file_size"
+    t.datetime "wi_cn_updated_at"
+    t.string "wi_cd_file_name"
+    t.string "wi_cd_content_type"
+    t.integer "wi_cd_file_size"
+    t.datetime "wi_cd_updated_at"
+    t.string "wi_cr_file_name"
+    t.string "wi_cr_content_type"
+    t.integer "wi_cr_file_size"
+    t.datetime "wi_cr_updated_at"
+    t.string "wi_cs_file_name"
+    t.string "wi_cs_content_type"
+    t.integer "wi_cs_file_size"
+    t.datetime "wi_cs_updated_at"
+    t.string "wi_ct_file_name"
+    t.string "wi_ct_content_type"
+    t.integer "wi_ct_file_size"
+    t.datetime "wi_ct_updated_at"
+    t.string "wi_tn_file_name"
+    t.string "wi_tn_content_type"
+    t.integer "wi_tn_file_size"
+    t.datetime "wi_tn_updated_at"
+    t.string "wi_td_file_name"
+    t.string "wi_td_content_type"
+    t.integer "wi_td_file_size"
+    t.datetime "wi_td_updated_at"
+    t.string "wi_tr_file_name"
+    t.string "wi_tr_content_type"
+    t.integer "wi_tr_file_size"
+    t.datetime "wi_tr_updated_at"
+    t.string "wi_ts_file_name"
+    t.string "wi_ts_content_type"
+    t.integer "wi_ts_file_size"
+    t.datetime "wi_ts_updated_at"
+    t.string "wi_tc_file_name"
+    t.string "wi_tc_content_type"
+    t.integer "wi_tc_file_size"
+    t.datetime "wi_tc_updated_at"
+    t.index ["key"], name: "index_drafts_on_key", unique: true
+    t.index ["user_id"], name: "index_drafts_on_user_id"
+  end
+
   create_table "forecasts", force: :cascade do |t|
     t.integer "area_id"
     t.string "weather_symbol"

--- a/lib/application_responder.rb
+++ b/lib/application_responder.rb
@@ -5,4 +5,14 @@ class ApplicationResponder < ActionController::Responder
   # Redirects resources to the collection path (index action) instead
   # of the resource path (show action) for POST/PUT/DELETE requests.
   # include Responders::CollectionResponder
+
+  def api_behavior
+    raise MissingRenderer.new(format) unless has_renderer?
+
+    if put? || patch?
+      display resource, :status => :ok
+    else
+      super
+    end
+  end
 end

--- a/package.json
+++ b/package.json
@@ -30,14 +30,15 @@
     "react-addons-css-transition-group": "^15.6.0",
     "react-addons-transition-group": "^15.6.0",
     "react-dom": "^15.6.1",
+    "react-dropzone": "^4.0.0",
     "reactstrap": "^4.8.0",
     "resolve-url-loader": "^2.1.0",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",
-    "turbolinks": "^5.0.3",
     "webpack": "^3.3.0",
     "webpack-manifest-plugin": "^1.1.2",
-    "webpack-merge": "^4.1.0"
+    "webpack-merge": "^4.1.0",
+    "webpacker-react": "^0.3.0"
   },
   "devDependencies": {
     "webpack-dev-server": "^2.5.1"

--- /dev/null
+++ b/spec/controllers/drafts_controller_spec.rb
@@ -0,0 +1,141 @@
+require 'rails_helper'
+
+# This spec was generated by rspec-rails when you ran the scaffold generator.
+# It demonstrates how one might use RSpec to specify the controller code that
+# was generated by Rails when you ran the scaffold generator.
+#
+# It assumes that the implementation code is generated by the rails scaffold
+# generator.  If you are using any extension libraries to generate different
+# controller code, this generated spec may or may not pass.
+#
+# It only uses APIs available in rails and/or rspec-rails.  There are a number
+# of tools you can use to make these specs even more expressive, but we're
+# sticking to rails and rspec-rails APIs to keep things simple and stable.
+#
+# Compared to earlier versions of this generator, there is very limited use of
+# stubs and message expectations in this spec.  Stubs are only used when there
+# is no simpler way to get a handle on the object needed for the example.
+# Message expectations are only used when there is no simpler way to specify
+# that an instance is receiving a specific message.
+#
+# Also compared to earlier versions of this generator, there are no longer any
+# expectations of assigns and templates rendered. These features have been
+# removed from Rails core in Rails 5, but can be added back in via the
+# `rails-controller-testing` gem.
+
+RSpec.describe DraftsController, type: :controller do
+
+  # This should return the minimal set of attributes required to create a valid
+  # Draft. As you add validations to Draft, be sure to
+  # adjust the attributes here as well.
+  let(:valid_attributes) {
+    skip("Add a hash of attributes valid for your model")
+  }
+
+  let(:invalid_attributes) {
+    skip("Add a hash of attributes invalid for your model")
+  }
+
+  # This should return the minimal set of values that should be in the session
+  # in order to pass any filters (e.g. authentication) defined in
+  # DraftsController. Be sure to keep this updated too.
+  let(:valid_session) { {} }
+
+  describe "GET #index" do
+    it "returns a success response" do
+      draft = Draft.create! valid_attributes
+      get :index, params: {}, session: valid_session
+      expect(response).to be_success
+    end
+  end
+
+  describe "GET #show" do
+    it "returns a success response" do
+      draft = Draft.create! valid_attributes
+      get :show, params: {id: draft.to_param}, session: valid_session
+      expect(response).to be_success
+    end
+  end
+
+  describe "GET #new" do
+    it "returns a success response" do
+      get :new, params: {}, session: valid_session
+      expect(response).to be_success
+    end
+  end
+
+  describe "GET #edit" do
+    it "returns a success response" do
+      draft = Draft.create! valid_attributes
+      get :edit, params: {id: draft.to_param}, session: valid_session
+      expect(response).to be_success
+    end
+  end
+
+  describe "POST #create" do
+    context "with valid params" do
+      it "creates a new Draft" do
+        expect {
+          post :create, params: {draft: valid_attributes}, session: valid_session
+        }.to change(Draft, :count).by(1)
+      end
+
+      it "redirects to the created draft" do
+        post :create, params: {draft: valid_attributes}, session: valid_session
+        expect(response).to redirect_to(Draft.last)
+      end
+    end
+
+    context "with invalid params" do
+      it "returns a success response (i.e. to display the 'new' template)" do
+        post :create, params: {draft: invalid_attributes}, session: valid_session
+        expect(response).to be_success
+      end
+    end
+  end
+
+  describe "PUT #update" do
+    context "with valid params" do
+      let(:new_attributes) {
+        skip("Add a hash of attributes valid for your model")
+      }
+
+      it "updates the requested draft" do
+        draft = Draft.create! valid_attributes
+        put :update, params: {id: draft.to_param, draft: new_attributes}, session: valid_session
+        draft.reload
+        skip("Add assertions for updated state")
+      end
+
+      it "redirects to the draft" do
+        draft = Draft.create! valid_attributes
+        put :update, params: {id: draft.to_param, draft: valid_attributes}, session: valid_session
+        expect(response).to redirect_to(draft)
+      end
+    end
+
+    context "with invalid params" do
+      it "returns a success response (i.e. to display the 'edit' template)" do
+        draft = Draft.create! valid_attributes
+        put :update, params: {id: draft.to_param, draft: invalid_attributes}, session: valid_session
+        expect(response).to be_success
+      end
+    end
+  end
+
+  describe "DELETE #destroy" do
+    it "destroys the requested draft" do
+      draft = Draft.create! valid_attributes
+      expect {
+        delete :destroy, params: {id: draft.to_param}, session: valid_session
+      }.to change(Draft, :count).by(-1)
+    end
+
+    it "redirects to the drafts list" do
+      draft = Draft.create! valid_attributes
+      delete :destroy, params: {id: draft.to_param}, session: valid_session
+      expect(response).to redirect_to(drafts_url)
+    end
+  end
+
+end

--- /dev/null
+++ b/spec/factories/drafts.rb
@@ -0,0 +1,10 @@
+FactoryGirl.define do
+  factory :draft do
+    key "MyString"
+    title "MyString"
+    url "MyString"
+    day_frame "MyString"
+    expires_at "2017-08-05 03:13:45"
+    user nil
+  end
+end

--- /dev/null
+++ b/spec/models/draft_spec.rb
@@ -0,0 +1,5 @@
+require 'rails_helper'
+
+RSpec.describe Draft, type: :model do
+  pending "add some examples to (or delete) #{__FILE__}"
+end

--- /dev/null
+++ b/spec/routing/drafts_routing_spec.rb
@@ -0,0 +1,35 @@
+require "rails_helper"
+
+RSpec.describe DraftsController, type: :routing do
+  describe "routing" do
+
+    it "routes to #index" do
+      expect(:get => "/drafts").to route_to("drafts#index")
+    end
+
+    it "routes to #new" do
+      expect(:get => "/drafts/new").to route_to("drafts#new")
+    end
+
+    it "routes to #show" do
+      expect(:get => "/drafts/1").to route_to("drafts#show", :id => "1")
+    end
+
+    it "routes to #edit" do
+      expect(:get => "/drafts/1/edit").to route_to("drafts#edit", :id => "1")
+    end
+
+    it "routes to #create" do
+      expect(:post => "/drafts").to route_to("drafts#create")
+    end
+
+    it "routes to #update via PUT" do
+      expect(:put => "/drafts/1").to route_to("drafts#update", :id => "1")
+    end
+
+    it "routes to #update via PATCH" do
+      expect(:patch => "/drafts/1").to route_to("drafts#update", :id => "1")
+    end
+
+  end
+end

--- /dev/null
+++ b/test/application_system_test_case.rb
@@ -0,0 +1,5 @@
+require "test_helper"
+
+class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
+  driven_by :selenium, using: :chrome, screen_size: [1400, 1400]
+end

--- /dev/null
+++ b/test/system/drafts_test.rb
@@ -0,0 +1,9 @@
+require "application_system_test_case"
+
+class DraftsTest < ApplicationSystemTestCase
+  # test "visiting the index" do
+  #   visit drafts_url
+  #
+  #   assert_selector "h1", text: "Draft"
+  # end
+end

--- a/yarn.lock
+++ b/yarn.lock
@@ -223,6 +223,10 @@ atob@~1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/atob/-/atob-1.1.3.tgz#95f13629b12c3a51a5d215abdce2aa9f32f80773"
 
+attr-accept@^1.0.3:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-1.1.0.tgz#b5cd35227f163935a8f1de10ed3eba16941f6be6"
+
 autoprefixer@^6.3.1:
   version "6.7.7"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
@@ -3946,7 +3950,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8:
+prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8:
   version "15.5.10"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
   dependencies:
@@ -4071,6 +4075,13 @@ react-dom@^15.6.1:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
+react-dropzone@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-4.0.0.tgz#3ff7fab769ad4fb6206ca4a16fe35eab34297053"
+  dependencies:
+    attr-accept "^1.0.3"
+    prop-types "^15.5.7"
+
 react-transition-group@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.0.tgz#b51fc921b0c3835a7ef7c571c79fc82c73e9204f"
@@ -4796,10 +4807,6 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-turbolinks@^5.0.3:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/turbolinks/-/turbolinks-5.0.3.tgz#c8ce128cfc9be1d691a1e41ffa858a5a5ee86a02"
-
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
@@ -5038,6 +5045,10 @@ webpack@^3.3.0:
     webpack-sources "^1.0.1"
     yargs "^6.0.0"
 
+webpacker-react@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/webpacker-react/-/webpacker-react-0.3.0.tgz#176d4537d997772f66641d565b796f33dfbb0272"
+
 websocket-driver@>=0.5.1:
   version "0.6.5"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.6.5.tgz#5cb2556ceb85f4373c6d8238aa691c8454e13a36"