Edit rounds ui!

WcaOnRails/.babelrc

@@ -7,7 +7,9 @@
         "uglify": true
       },
       "useBuiltIns": true
-    }]
+    }],
+    "react",
+    "stage-2"
   ],
 
   "plugins": [

WcaOnRails/Envfile

@@ -9,6 +9,10 @@ group :production do
   variable :SMTP_PASSWORD
 end
 
+group :development do
+  variable :DISABLE_BULLET, :boolean, default: false
+end
+
 # Set WCA_LIVE_SITE to enable Google Analytics
 # and allow all on robots.txt.
 variable :WCA_LIVE_SITE, :boolean, default: false

WcaOnRails/app/assets/stylesheets/application.css.scss

@@ -54,3 +54,4 @@
 @import "competition_tabs";
 @import "server_status";
 @import "relations";
+@import "edit_events";

WcaOnRails/app/assets/stylesheets/competitions.scss

@@ -51,6 +51,11 @@ $competition-nav-padding: 50px;
     width: calc(100% - (#{$competition-nav-width} + #{$competition-nav-padding}));
   }
 
+  .show-events-table {
+    .last-round > td {
+      border-bottom: 4px solid #ccc;
+    }
+  }
 }
 
 // Workaround for https://github.com/cubing/icons/issues/16

WcaOnRails/app/assets/stylesheets/edit_events.scss

@@ -0,0 +1,49 @@
+#events-edit-area {
+  .panel-heading {
+    padding-top: 10px;
+    padding-bottom: 10px;
+
+    .panel-title {
+      white-space: nowrap;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+
+      $cubing-icon-size: 55px;
+      .img-thumbnail.cubing-icon {
+        font-size: 40px;
+        position: absolute;
+        top: -5px;
+        height: $cubing-icon-size;
+        z-index: 1;
+      }
+
+      .title {
+        padding-left: $cubing-icon-size;
+        padding-right: 5px;
+      }
+
+      .add-event {
+        margin-left: auto;
+      }
+
+      .input-group {
+        margin-left: auto;
+
+        select {
+          width: 100px;
+        }
+
+        .input-group-btn {
+          display: inline-block;
+        }
+      }
+    }
+  }
+
+  .panel-body {
+    select {
+      width: 100%;
+    }
+  }
+}

WcaOnRails/app/assets/stylesheets/wca.scss

@@ -365,3 +365,62 @@ a.plain {
   color: inherit;
   text-decoration: none;
 }
+
+// From http://stackoverflow.com/a/22892773
+.row.equal {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+// Modified from http://bootsnipp.com/snippets/featured/loading-button-effect-no-js
+button.saving {
+  @keyframes ld {
+    0% { transform: rotate(0deg) scale(1); }
+    50% { transform: rotate(180deg) scale(1.1); }
+    100% { transform: rotate(360deg) scale(1); }
+  }
+
+  position: relative;
+  opacity: 0.8;
+
+  &:hover,
+  &:active,
+  &:focus {
+    cursor: default;
+    box-shadow: none;
+  }
+
+  &::before {
+    content: '';
+
+    display: inline-block;
+
+    position: absolute;
+    background: transparent;
+    border: 1px solid currentColor;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+
+    box-sizing: border-box;
+
+    top: 50%;
+    left: 50%;
+    margin-top: -12px;
+    margin-left: -12px;
+
+    width: 24px;
+    height: 24px;
+
+    animation: ld 1s ease-in-out infinite;
+  }
+}
+
+// Modified from https://stackoverflow.com/a/22920590
+.input-xs {
+  height: 22px;
+  padding: 2px 0;
+  font-size: 12px;
+  line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */
+  border-radius: 3px;
+}

WcaOnRails/app/controllers/competitions_controller.rb

@@ -317,12 +317,16 @@ def post_results
     end
   end
 
+  def show_events
+    @competition = competition_from_params(includes: [:events, competition_events: { rounds: [:format, :competition_event] }])
+  end
+
   def edit_events
-    @competition = competition_from_params(includes: [:events])
+    @competition = competition_from_params(includes: [:events, competition_events: { rounds: [:competition_event] }])
   end
 
   def update_events
-    @competition = competition_from_params(includes: [:events])
+    @competition = competition_from_params
     if @competition.update_attributes(competition_params)
       flash[:success] = t('.update_success')
       redirect_to edit_events_path(@competition)
@@ -348,6 +352,8 @@ def update_events_from_wcif
       status: "Error while saving WCIF events",
       error: e.message,
     }
+  rescue WcaExceptions::ApiException => e
+    render status: e.status, json: { error: e.to_s }
   end
 
   def get_nearby_competitions(competition)

WcaOnRails/app/javascript/edit-events/ButtonActivatedModal.jsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import cn from 'classnames'
+import Modal from 'react-bootstrap/lib/Modal'
+import Button from 'react-bootstrap/lib/Button'
+import addEventListener from 'react-overlays/lib/utils/addEventListener';
+import ownerDocument from 'react-overlays/lib/utils/ownerDocument';
+
+export default class ButtonActivatedModal extends React.Component {
+  constructor() {
+    super();
+    this.state = { showModal: false };
+  }
+
+  open = () => {
+    this.setState({ showModal: true });
+  }
+
+  close = ({ skipUnsavedChangesCheck } = { skipUnsavedChangesCheck: false }) => {
+    if(skipUnsavedChangesCheck || !this.props.hasUnsavedChanges() || confirm("Are you sure you want to discard your changes?")) {
+      this.props.reset();
+      this.setState({ showModal: false });
+    }
+  }
+
+  render() {
+    return (
+      <button type="button" name={this.props.name} className={cn("btn", this.props.buttonClass)} onClick={this.open}>
+        {this.props.buttonValue}
+        <KeydownDismissModal show={this.state.showModal} onHide={this.close}>
+          <form className={this.props.formClass} onSubmit={e => { e.preventDefault(); this.props.onOk(); }}>
+            {this.props.children}
+            <Modal.Footer>
+              <Button onClick={this.close} bsStyle="warning">Close</Button>
+              <Button type="submit" bsStyle="success">Ok</Button>
+            </Modal.Footer>
+          </form>
+        </KeydownDismissModal>
+      </button>
+    );
+  }
+}
+
+// More or less copied from https://github.com/react-bootstrap/react-overlays/pull/195
+// This can go away once a new version of react-overlays is released and react-bootstrap
+// is updated to depend on it.
+class KeydownDismissModal extends React.Component {
+  static defaultProps = Modal.defaultProps;
+
+  handleDocumentKeyDown = (e) => {
+    if (this.props.keyboard && e.key === 'Escape' && this._modal._modal.isTopModal()) {
+      if (this.props.onEscapeKeyDown) {
+        this.props.onEscapeKeyDown(e);
+      }
+
+      this.props.onHide();
+    }
+  }
+
+  onShow = () => {
+    let doc = ownerDocument(this);
+    this._onDocumentKeydownListener =
+      addEventListener(doc, 'keydown', this.handleDocumentKeyDown);
+  }
+
+  onHide = () => {
+    this._onDocumentKeydownListener.remove();
+  }
+
+  render() {
+    let subprops = {
+      ...this.props,
+      keyboard: false,
+      onShow: this.onShow,
+    };
+    return <Modal {...subprops} ref={m => this._modal = m} />;
+  }
+}