<commit_before>'use babel'

import { Emitter, CompositeDisposable } from 'atom'
import { View } from 'atom-space-pen-views'
import { logo } from '../../assets/svgs'

const descriptions = {
  NOT_INSTALLED: {
    title: 'kd is missing',
    description: 'Please open a terminal window and install it with the following commands and come back once done.'
  },
  NOT_LOGGEDIN: {
    title: 'Login/Register',
    description: 'You are not logged in, please log in with the following commands and come back.'
  },
  DAEMON_NOT_INSTALLED: {
    title: 'Daemon is missing',
    description: 'It seems like the kd binary is installed but its daemon is missing, please install it with the following command.'
  },
  DAEMON_STOPPED: {
    title: 'Daemon is not running',
    description: 'kd daemon is not running please run it with the following command:'
  }
}

const helpers = {
  NOT_INSTALLED: [
    'brew tap rjeczalik/kd',
    'brew install kd',
    'sudo kd daemon install --team yourteam'
  ],
  NOT_LOGGEDIN: [
    'kd auth login --baseurl https://koding.com --team [your-team-slug]'
  ],
  DAEMON_NOT_INSTALLED: [
    'sudo kd daemon install --team yourteam'
  ],
  DAEMON_STOPPED: [
    'sudo kd daemon restart'
  ]
}

export default class KDHelpView extends View {

  static content (data = {}) {
    this.div(() => {
      this.div({ class: 'koding-login-view--logo' }, () => { this.raw(logo) })
      this.div({ outlet: 'content' }, () => {
        this.raw("
Checking for kd
")
      })
    })
  }

  setData (data = {}) {
    this.__data = data
    return data
  }

  getData () {
    return this.__data
  }

  initialize (data) {
    let { prompt } = data
    this.setData(data)
    this.emitter = new Emitter()
    this.disposables = new CompositeDisposable()
    this.bindViews()
    this.check(prompt)
  }

  setContent (prompt) {
    this.content.html('')
    let commandsHTML = ''
    if (helpers[prompt]) {
      for (let command of Array.from(helpers[prompt])) {
        commandsHTML += `<code>${command}</code><br>`
      }
    }
    this.content.append(`<h2>${descriptions[prompt].title}</h2>`)
    this.content.append(`<p>${descriptions[prompt].description}</p>`)
    if (commandsHTML) {
      this.content.append(`<pre>${commandsHTML}</pre>`)
    }
  }

    }
  attached () {
    log('attached')
  }

  bindViews () {
    log('bindViews')
  }

}
<commit_msg>help-view improved<commit_after>'use babel'

import { Emitter, CompositeDisposable } from 'atom'
import { View } from 'atom-space-pen-views'
import { logo } from '../../assets/svgs'

const descriptions = {
  NOT_INSTALLED: {
    title: 'kd is missing',
    description: 'Please open a terminal window and install it with the following commands and come back once done.'
  },
  NOT_LOGGEDIN: {
    title: 'Login/Register',
    description: 'You are not logged in, please log in with the following commands and come back.'
  },
  DAEMON_NOT_INSTALLED: {
    title: 'Daemon is missing',
    description: 'It seems like the kd binary is installed but its daemon is missing, please install it with the following command.'
  },
  DAEMON_STOPPED: {
    title: 'Daemon is not running',
    description: 'kd daemon is not running please run it with the following command:'
  },
  ALL_GOOD: {
    title: 'kd is up & running',
    description: 'kd daemon running & you\'re logged in!'
  }
}

const success = {
  NOT_INSTALLED: 'kd is installed',
  NOT_LOGGEDIN: 'you are logged in',
  DAEMON_NOT_INSTALLED: 'kd daemon is installed',
  DAEMON_STOPPED: 'kd daemon is running'
}

const helpers = {
  NOT_INSTALLED: [
    'brew tap rjeczalik/kd',
    'brew install kd',
    'sudo kd daemon install --team yourteam'
  ],
  NOT_LOGGEDIN: [
    'kd auth login --baseurl https://koding.com --team [your-team-slug]'
  ],
  DAEMON_NOT_INSTALLED: [
    'sudo kd daemon install --team yourteam'
  ],
  DAEMON_STOPPED: [
    'sudo kd daemon restart'
  ]
}

export default class KDHelpView extends View {

  static content (data = {}) {
    this.div(() => {
      if (!data.mini) {
        this.div({ class: 'koding-login-view--logo' }, () => { this.raw(logo) })
      }
      this.div({ outlet: 'content' }, () => {
        this.raw("
checking kd…
")
      })
    })
  }

  setData (data = {}) {
    this.__data = data
    return data
  }

  getData () {
    return this.__data
  }

  initialize (data) {
    let { prompt, succeeded } = data
    this.setData(data)
    this.emitter = new Emitter()
    this.disposables = new CompositeDisposable()
    if (prompt) {
      this.setContent(prompt)
    }
    if (!prompt && succeeded.length) {
      succeeded.forEach(step => {
        this.appendContent(step)
      })
    }
  }

  setContent (prompt) {
    this.content.html('')
    let commandsHTML = ''
    if (helpers[prompt]) {
      for (let command of Array.from(helpers[prompt])) {
        commandsHTML += `<code>${command}</code><br>`
      }
    }
    this.content.append(`<h2>${descriptions[prompt].title}</h2>`)
    this.content.append(`<p>${descriptions[prompt].description}</p>`)
    if (commandsHTML) {
      this.content.append(`<pre>${commandsHTML}</pre>`)
    }
  }

  appendContent (step) {
    if (success[step]) {
      this.content.append(`<div class='icon icon-check'>${success[step]}</div>`)
    }
  }

}
<|endoftext|>


<commit_before>// If we're in Node.js then require VTTRegion so we can extend it, otherwise assume
// VTTRegion is on the global.
if (typeof module !== "undefined" && module.exports) {
  this.VTTRegion = require("./vttregion").VTTRegion;
}

// Extend VTTRegion with methods to convert to JSON, from JSON, and construct a
// VTTRegion from an options object. The primary purpose of this is for use in the
// vtt.js test suite. It's also useful if you need to work with VTTRegions in
// JSON format.
(function(root) {

  root.VTTRegion.create = function(options) {
    var region = new root.VTTRegion();
    for (var key in options) {
      if (region.hasOwnProperty(key)) {
        region[key] = options[key];
      }
    }
    return region;
  };

  root.VTTRegion.create = function(json) {
    return this.create(JSON.parse(json));
  };

}(this));
<commit_msg>Fix accidental change of fromJSON() to create().<commit_after>// If we're in Node.js then require VTTRegion so we can extend it, otherwise assume
// VTTRegion is on the global.
if (typeof module !== "undefined" && module.exports) {
  this.VTTRegion = require("./vttregion").VTTRegion;
}

// Extend VTTRegion with methods to convert to JSON, from JSON, and construct a
// VTTRegion from an options object. The primary purpose of this is for use in the
// vtt.js test suite. It's also useful if you need to work with VTTRegions in
// JSON format.
(function(root) {

  root.VTTRegion.create = function(options) {
    var region = new root.VTTRegion();
    for (var key in options) {
      if (region.hasOwnProperty(key)) {
        region[key] = options[key];
      }
    }
    return region;
  };

  root.VTTRegion.fromJSON = function(json) {
    return this.create(JSON.parse(json));
  };

}(this));
<|endoftext|>


<commit_before>// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP

import React, { Component } from 'react';
import Tiles from 'grommet/components/Tiles';
import Tile from 'grommet/components/Tile';
import Box from 'grommet/components/Box';
import Animate from 'grommet/components/Animate';
import Example from '../../Example';

export default class ScrollAnimation extends Component {
  constructor (props) {
    super(props);
    this._onScroll = this._onScroll.bind(this);
    this.state = {
      scrollableHeight: 0,
      scrollProgress: 0
    };
  }

  _onScroll (event) {
    const element = event.target;
    const scrollTop = element.scrollTop;
    const scrollHeight = element.scrollHeight;
    const scrollableHeight = scrollHeight - 500;
    const scrollPercent = scrollTop / scrollableHeight;
    const scrollProgress = Math.round(scrollPercent * 100);

    if (scrollableHeight !== this.state.scrollableHeight) {
      this.setState({ scrollableHeight });
    }
    if (scrollProgress !== this.state.scrollProgress) {
      this.setState({ scrollProgress });
    }
  }

  render () {
    const { scrollProgress } = this.state;

    return (
      <Example name="Scroll" code={
        <Box
          onScroll={this._onScroll}
          pad="medium" colorIndex="light-2"
          style={{ height: 500, overflow: 'auto' }}
        >
          <Tiles flex={false} fill={true}>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 150 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 150 }}
              component={Tile} visible={scrollProgress > 0} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

1

            </Animate>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 300 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 300 }}
              component={Tile} visible={scrollProgress > 0} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

2

            </Animate>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 450 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 450 }}
              component={Tile} visible={scrollProgress > 0} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

3

            </Animate>
          </Tiles>
          <Tiles flex={false} fill={true}>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 150 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 150 }}
              component={Tile} visible={scrollProgress > 16} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

1

            </Animate>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 300 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 300 }}
              component={Tile} visible={scrollProgress > 16} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

2

            </Animate>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 450 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 450 }}
              component={Tile} visible={scrollProgress > 16} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

3

            </Animate>
          </Tiles>
          <Tiles flex={false} fill={true}>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 150 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 150 }}
              component={Tile} visible={scrollProgress > 32} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

1

            </Animate>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 300 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 300 }}
              component={Tile} visible={scrollProgress > 32} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

2

            </Animate>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 450 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 450 }}
              component={Tile} visible={scrollProgress > 32} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

3

            </Animate>
          </Tiles>
        </Box>
      } />
    );
  }
};
<commit_msg>Fix scroll example spacing on IE11<commit_after>// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP

import React, { Component } from 'react';
import Tiles from 'grommet/components/Tiles';
import Tile from 'grommet/components/Tile';
import Box from 'grommet/components/Box';
import Animate from 'grommet/components/Animate';
import Example from '../../Example';

export default class ScrollAnimation extends Component {
  constructor (props) {
    super(props);
    this._onScroll = this._onScroll.bind(this);
    this.state = {
      scrollableHeight: 0,
      scrollProgress: 0
    };
  }

  _onScroll (event) {
    const element = event.target;
    const scrollTop = element.scrollTop;
    const scrollHeight = element.scrollHeight;
    const scrollableHeight = scrollHeight - 500;
    const scrollPercent = scrollTop / scrollableHeight;
    const scrollProgress = Math.round(scrollPercent * 100);

    if (scrollableHeight !== this.state.scrollableHeight) {
      this.setState({ scrollableHeight });
    }
    if (scrollProgress !== this.state.scrollProgress) {
      this.setState({ scrollProgress });
    }
  }

  render () {
    const { scrollProgress } = this.state;

    return (
      <Example name="Scroll" code={
        <Box
          onScroll={this._onScroll}
          pad="medium" colorIndex="light-2"
          style={{ maxHeight: 500, overflow: 'auto' }}
        >
          <Tiles flex={false} fill={true}>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 150 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 150 }}
              component={Tile} visible={scrollProgress > 0} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

1

            </Animate>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 300 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 300 }}
              component={Tile} visible={scrollProgress > 0} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

2

            </Animate>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 450 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 450 }}
              component={Tile} visible={scrollProgress > 0} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

3

            </Animate>
          </Tiles>
          <Tiles flex={false} fill={true}>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 150 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 150 }}
              component={Tile} visible={scrollProgress > 16} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

1

            </Animate>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 300 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 300 }}
              component={Tile} visible={scrollProgress > 16} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

2

            </Animate>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 450 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 450 }}
              component={Tile} visible={scrollProgress > 16} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

3

            </Animate>
          </Tiles>
          <Tiles flex={false} fill={true}>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 150 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 150 }}
              component={Tile} visible={scrollProgress > 32} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

1

            </Animate>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 300 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 300 }}
              component={Tile} visible={scrollProgress > 32} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

2

            </Animate>
            <Animate
              enter={{ animation: 'slide-up', duration: 500, delay: 450 }}
              leave={{ animation: 'slide-down', duration: 500, delay: 450 }}
              component={Tile} visible={scrollProgress > 32} keep={true}
              colorIndex="brand" justify="center" align="center"
              style={{ height: 250 }}
            >

3

            </Animate>
          </Tiles>
        </Box>
      } />
    );
  }
};
<|endoftext|>


<commit_before>/**
 * @license
 * Copyright 2019 The FOAM Authors. All Rights Reserved.
 * http://www.apache.org/licenses/LICENSE-2.0
 */

foam.CLASS({
  package: 'foam.u2.detail',
  name: 'SectionedDetailPropertyView',
  extends: 'foam.u2.View',

  documentation: `
    View for one property of a SectionedDetailView.
  `,

  css: `
    ^ m3 {
      font-size: 16px;
      font-weight: bold;
    }

    ^validation-container {
      margin-top: 4px;
      color: #d9170e;
    }

    ^helper-icon {
      width: 20px;
      height: 20px;
      margin-top 4px;
    }

    ^tooltip {
      display: inline-flex;
      overflow:overlay;
      direction: rtl;
      float: right;
      width: 20px;
      height: 20px;
    }

    ^tooltip-container {
      z-index: -1;
      display: none;
      width: 80%;
      height: auto;
      line-height: 1.5;
      margin-right: 3px;
    }

    ^helper-text {
      background-color: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 5px;
      border-top-right-radius: 0px;
      direction: ltr;
      padding: 2px;
      text-align: center;
    }

    ^arrow-right {
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left:10px solid rgba(0, 0, 0, 0.8);
    }

    ^tooltip:hover {
      position: absolute;
      width: 100%;
      height: auto;
    }

    ^tooltip:hover .foam-u2-detail-SectionedDetailPropertyView-tooltip-container{
      display: inline-flex;
      z-index: 10;
    }

    ^error-icon {
      width: 16px;
      height: 16px;
    }

    ^error .foam-u2-TextField {
      background-color: #fbedec;
      border: solid 1px #d9170e;
      font-size: 12px;
    }

    ^error .foam-u2-tag-TextArea {
      background-color: #fbedec;
      border: solid 1px #d9170e;
      font-size: 12px;
    }

    ^error .foam-u2-tag-Select {
      background-color: #fbedec;
      border: solid 1px #d9170e;
      font-size: 12px;
    }

    ^error .foam-u2-view-date-DateTimePicker .date-display-box {
      background-color: #fbedec;
      border: solid 1px #d9170e;
      font-size: 12px;
    }

    /*
      !IMPORTANT!
      For the following inputs below, we are planning
      encode these changes in the actual foam files
    */

    ^ .foam-u2-TextField {
      width: 100%;
      padding: 10px 8px;
      font-size: 14px;
    }

    ^ .foam-u2-tag-TextArea {
      width: 100%;
      padding: 10px 8px;
      font-size: 14px;
    }

    ^ .foam-u2-view-date-DateTimePicker {
      cursor: pointer;
    }

    ^ .foam-u2-tag-Select {
      width: 100%;
      font-size: 14px;
      border: solid 1px #8e9090;
      border-radius: 3px;
      font-weight: 400;
      padding: 10px 8px;
      box-shadow: none;
      background: #ffffff url('images/dropdown-icon.svg') no-repeat 99% 50%;
      -webkit-appearance: none;
      cursor: pointer;
    }

    ^ .foam-u2-view-RichChoiceView {
      display: flex;
    }

    ^ .foam-u2-view-RichChoiceView-chevron {
      content: '▾';
      padding-left: 0px;
      font-size: 16px;
      color: #8D9090;
    }

    ^ .foam-u2-view-RichChoiceView-selection-view {
      padding: 2px 12px 0px 8px;
      width: 100%;
      border-radius: 3px;
      border: solid 1px #8e9090;
      background-color: #ffffff;
      box-sizing: border-box;
      -webkit-appearance: none;
      cursor: pointer;
      font-size: 14px;
    }

    ^ .foam-u2-view-RichChoiceView .search {
      padding: 8px 16px;
      font-size: 14px;
      border-bottom: 1px solid #f4f4f9;
    }

    ^ .foam-u2-detail-SectionedDetailPropertyView .property-filter {
      font-size: 14px;
      padding-left: 16px;
    }

    ^ .foam-u2-view-RichChoiceView .search input {
      border-bottom: none;
    }

    ^ .foam-u2-view-RichChoiceView .search img {
      top: 8px;
    }

    ^ .foam-u2-view-RichChoiceView-heading {
      border-bottom: 1px solid #f4f4f9;
      line-height: 24px;
      font-size: 14px;
      color: #333;
      font-weight: 900;
      padding: 6px 16px;
    }

    ^ .foam-u2-IntView {
      width: 100%;
      padding: 10px 8px;
      font-size: 14px;
    }

    ^ .foam-u2-view-RichChoiceView-container {
      z-index: 1000;
    }

    ^ .DefaultRowView-row {
      background: white;
      padding: 8px 16px;
      font-size: 12px;
      color: #424242;
    }

    ^ .DefaultRowView-row:hover {
      background: #f4f4f9;
      cursor: pointer;
    }

    ^ .foam-u2-CheckBox {
      -webkit-appearance: none;
      border-radius: 2px;
      border: solid 1px #8e9090;
      box-sizing: border-box;
      display: inline-block;
      fill: rgba(0, 0, 0, 0);

      vertical-align: middle;

      height: 16px;
      width: 16px;

      opacity: 1;

      transition: background-color 140ms, border-color 140ms;
    }

    ^ .foam-u2-CheckBox-label {
      margin-left: 12px;
      vertical-align: middle;
      white-space: pre-wrap;
    }

    ^ .foam-u2-CheckBox:checked {
      background-color: #604aff;
      fill: white;
      border: solid 1px #604aff;
    }

    /*
    ^ .foam-u2-CheckBox:checked:after {
      content: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2048%2048%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2215%22%20height%3D%2215%22%20version%3D%221.1%22%3E%0A%20%20%20%3Cpath%20fill%3D%22white%22%20stroke-width%3D%223%22%20d%3D%22M18%2032.34L9.66%2024l-2.83%202.83L18%2038l24-24-2.83-2.83z%22/%3E%0A%3C/svg%3E);
    }
    */

    /*
    ^ input[type="radio" i] {
      -webkit-appearance: none;
      border-radius: 8px;
      background-color: #ffffff;
      border: solid 1px #8e9090;
      box-sizing: border-box;
      display: inline-block;
      fill: rgba(0, 0, 0, 0);

      vertical-align: middle;

      height: 16px;
      width: 16px;

      opacity: 1;

      transition: background-color 140ms, border-color 140ms;
    }

    ^ input[type="radio" i]:checked {
      background-color: #604aff;
    }

    ^ input[type="radio" i]:checked:after {
      content: url('images/active-radio.svg');
    }

    */

    ^ .foam-u2-view-RadioView .foam-u2-view-RadioView {
      margin-bottom:16px;
      display: flex;
      align-items: center;
      font-size: 16px;
    }

    ^ .foam-u2-view-RadioView label {
      margin-left: 12px;
    }
  `,

  requires: [
    'foam.u2.layout.Cols',
    'foam.u2.layout.Item',
    'foam.u2.layout.Rows'
  ],

  properties: [
    'prop',
  ],

  methods: [
    function initE() {
      var self = this;
      this.SUPER();
      this
        .show(this.prop.createVisibilityFor(this.data$)
          .map(m => m != foam.u2.Visibility.HIDDEN))
        .addClass(this.myClass())
        .start(self.Rows, { defaultChildStyle: { padding: '8px 0' } })
          .add(this.slot(function(data, prop, prop$label) {
            var errorSlot = prop.validateObj ?
              data.slot(prop.validateObj) :
              foam.core.ConstantSlot.create({ value: null });

            return self.E()
              .start(self.Rows, { defaultChildStyle:  { 'line-height': '2' } })
                .callIf(prop$label, function() {
                  this.start('m3').add(prop$label).end();
                })
                .start()
                  .style({ 'position': 'relative', 'display': 'inline-flex', 'width': '100%' })
                  .start(self.Item)
                    .style({'flex-grow': 1})
                    .add(prop)
                    .enableClass(this.myClass('error'), errorSlot)
                  .end()
                  .callIf(prop.help, function() {
                    this.start()
                      .addClass(self.myClass('tooltip'))
                      .start({
                        class: 'foam.u2.tag.Image',
                        data: 'images/question-icon.svg'
                      })
                        .addClass(self.myClass('helper-icon'))
                      .end()

                      .start()
                        .addClass(self.myClass('tooltip-container'))
                        .start()
                          .addClass(self.myClass('arrow-right'))
                        .end()
                        .start()
                          .addClass(self.myClass('helper-text'))
                          .start('p').style({ 'padding': '3px' })
                            .add(prop.help)
                          .end()
                        .end()
                      .end()
                    .end()
                  })
                .end()
                .start(this.Item).style({'align-items': 'center'})
                  .start(self.Cols, { defaultChildStyle: {
                    'justify-content': 'flex-start',
                    'margin': '0 8px 0 0',
                    'position': 'absolute'
                  }})
                    .addClass(this.myClass('validation-container'))
                    .show(errorSlot)
                    .start({
                      class: 'foam.u2.tag.Image',
                      data: 'images/inline-error-icon.svg'
                    })
                      .addClass(this.myClass('error-icon'))
                    .end()
                    .start(this.Item)
                    .style({ 'flex-grow': 1 })
                      .add(errorSlot.map((s) => {
                        return self.E().add(s);
                      }))
                    .end()
                  .end()
                .end()
              .end();
          }));
    }
  ]
});<commit_msg>Nuked an unnecessary position absolute<commit_after>/**
 * @license
 * Copyright 2019 The FOAM Authors. All Rights Reserved.
 * http://www.apache.org/licenses/LICENSE-2.0
 */

foam.CLASS({
  package: 'foam.u2.detail',
  name: 'SectionedDetailPropertyView',
  extends: 'foam.u2.View',

  documentation: `
    View for one property of a SectionedDetailView.
  `,

  css: `
    ^ m3 {
      font-size: 16px;
      font-weight: bold;
    }

    ^validation-container {
      margin-top: 4px;
      color: #d9170e;
    }

    ^helper-icon {
      width: 20px;
      height: 20px;
      margin-top 4px;
    }

    ^tooltip {
      display: inline-flex;
      overflow:overlay;
      direction: rtl;
      float: right;
      width: 20px;
      height: 20px;
    }

    ^tooltip-container {
      z-index: -1;
      display: none;
      width: 80%;
      height: auto;
      line-height: 1.5;
      margin-right: 3px;
    }

    ^helper-text {
      background-color: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 5px;
      border-top-right-radius: 0px;
      direction: ltr;
      padding: 2px;
      text-align: center;
    }

    ^arrow-right {
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left:10px solid rgba(0, 0, 0, 0.8);
    }

    ^tooltip:hover {
      position: absolute;
      width: 100%;
      height: auto;
    }

    ^tooltip:hover .foam-u2-detail-SectionedDetailPropertyView-tooltip-container{
      display: inline-flex;
      z-index: 10;
    }

    ^error-icon {
      width: 16px;
      height: 16px;
    }

    ^error .foam-u2-TextField {
      background-color: #fbedec;
      border: solid 1px #d9170e;
      font-size: 12px;
    }

    ^error .foam-u2-tag-TextArea {
      background-color: #fbedec;
      border: solid 1px #d9170e;
      font-size: 12px;
    }

    ^error .foam-u2-tag-Select {
      background-color: #fbedec;
      border: solid 1px #d9170e;
      font-size: 12px;
    }

    ^error .foam-u2-view-date-DateTimePicker .date-display-box {
      background-color: #fbedec;
      border: solid 1px #d9170e;
      font-size: 12px;
    }

    /*
      !IMPORTANT!
      For the following inputs below, we are planning
      encode these changes in the actual foam files
    */

    ^ .foam-u2-TextField {
      width: 100%;
      padding: 10px 8px;
      font-size: 14px;
    }

    ^ .foam-u2-tag-TextArea {
      width: 100%;
      padding: 10px 8px;
      font-size: 14px;
    }

    ^ .foam-u2-view-date-DateTimePicker {
      cursor: pointer;
    }

    ^ .foam-u2-tag-Select {
      width: 100%;
      font-size: 14px;
      border: solid 1px #8e9090;
      border-radius: 3px;
      font-weight: 400;
      padding: 10px 8px;
      box-shadow: none;
      background: #ffffff url('images/dropdown-icon.svg') no-repeat 99% 50%;
      -webkit-appearance: none;
      cursor: pointer;
    }

    ^ .foam-u2-view-RichChoiceView {
      display: flex;
    }

    ^ .foam-u2-view-RichChoiceView-chevron {
      content: '▾';
      padding-left: 0px;
      font-size: 16px;
      color: #8D9090;
    }

    ^ .foam-u2-view-RichChoiceView-selection-view {
      padding: 2px 12px 0px 8px;
      width: 100%;
      border-radius: 3px;
      border: solid 1px #8e9090;
      background-color: #ffffff;
      box-sizing: border-box;
      -webkit-appearance: none;
      cursor: pointer;
      font-size: 14px;
    }

    ^ .foam-u2-view-RichChoiceView .search {
      padding: 8px 16px;
      font-size: 14px;
      border-bottom: 1px solid #f4f4f9;
    }

    ^ .foam-u2-detail-SectionedDetailPropertyView .property-filter {
      font-size: 14px;
      padding-left: 16px;
    }

    ^ .foam-u2-view-RichChoiceView .search input {
      border-bottom: none;
    }

    ^ .foam-u2-view-RichChoiceView .search img {
      top: 8px;
    }

    ^ .foam-u2-view-RichChoiceView-heading {
      border-bottom: 1px solid #f4f4f9;
      line-height: 24px;
      font-size: 14px;
      color: #333;
      font-weight: 900;
      padding: 6px 16px;
    }

    ^ .foam-u2-IntView {
      width: 100%;
      padding: 10px 8px;
      font-size: 14px;
    }

    ^ .foam-u2-view-RichChoiceView-container {
      z-index: 1000;
    }

    ^ .DefaultRowView-row {
      background: white;
      padding: 8px 16px;
      font-size: 12px;
      color: #424242;
    }

    ^ .DefaultRowView-row:hover {
      background: #f4f4f9;
      cursor: pointer;
    }

    ^ .foam-u2-CheckBox {
      -webkit-appearance: none;
      border-radius: 2px;
      border: solid 1px #8e9090;
      box-sizing: border-box;
      display: inline-block;
      fill: rgba(0, 0, 0, 0);

      vertical-align: middle;

      height: 16px;
      width: 16px;

      opacity: 1;

      transition: background-color 140ms, border-color 140ms;
    }

    ^ .foam-u2-CheckBox-label {
      margin-left: 12px;
      vertical-align: middle;
      white-space: pre-wrap;
    }

    ^ .foam-u2-CheckBox:checked {
      background-color: #604aff;
      fill: white;
      border: solid 1px #604aff;
    }

    /*
    ^ .foam-u2-CheckBox:checked:after {
      content: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2048%2048%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2215%22%20height%3D%2215%22%20version%3D%221.1%22%3E%0A%20%20%20%3Cpath%20fill%3D%22white%22%20stroke-width%3D%223%22%20d%3D%22M18%2032.34L9.66%2024l-2.83%202.83L18%2038l24-24-2.83-2.83z%22/%3E%0A%3C/svg%3E);
    }
    */

    /*
    ^ input[type="radio" i] {
      -webkit-appearance: none;
      border-radius: 8px;
      background-color: #ffffff;
      border: solid 1px #8e9090;
      box-sizing: border-box;
      display: inline-block;
      fill: rgba(0, 0, 0, 0);

      vertical-align: middle;

      height: 16px;
      width: 16px;

      opacity: 1;

      transition: background-color 140ms, border-color 140ms;
    }

    ^ input[type="radio" i]:checked {
      background-color: #604aff;
    }

    ^ input[type="radio" i]:checked:after {
      content: url('images/active-radio.svg');
    }

    */

    ^ .foam-u2-view-RadioView .foam-u2-view-RadioView {
      margin-bottom:16px;
      display: flex;
      align-items: center;
      font-size: 16px;
    }

    ^ .foam-u2-view-RadioView label {
      margin-left: 12px;
    }
  `,

  requires: [
    'foam.u2.layout.Cols',
    'foam.u2.layout.Item',
    'foam.u2.layout.Rows'
  ],

  properties: [
    'prop',
  ],

  methods: [
    function initE() {
      var self = this;
      this.SUPER();
      this
        .show(this.prop.createVisibilityFor(this.data$)
          .map(m => m != foam.u2.Visibility.HIDDEN))
        .addClass(this.myClass())
        .start(self.Rows, { defaultChildStyle: { padding: '8px 0' } })
          .add(this.slot(function(data, prop, prop$label) {
            var errorSlot = prop.validateObj ?
              data.slot(prop.validateObj) :
              foam.core.ConstantSlot.create({ value: null });

            return self.E()
              .start(self.Rows, { defaultChildStyle:  { 'line-height': '2' } })
                .callIf(prop$label, function() {
                  this.start('m3').add(prop$label).end();
                })
                .start()
                  .style({ 'position': 'relative', 'display': 'inline-flex', 'width': '100%' })
                  .start(self.Item)
                    .style({'flex-grow': 1})
                    .add(prop)
                    .enableClass(this.myClass('error'), errorSlot)
                  .end()
                  .callIf(prop.help, function() {
                    this.start()
                      .addClass(self.myClass('tooltip'))
                      .start({
                        class: 'foam.u2.tag.Image',
                        data: 'images/question-icon.svg'
                      })
                        .addClass(self.myClass('helper-icon'))
                      .end()

                      .start()
                        .addClass(self.myClass('tooltip-container'))
                        .start()
                          .addClass(self.myClass('arrow-right'))
                        .end()
                        .start()
                          .addClass(self.myClass('helper-text'))
                          .start('p').style({ 'padding': '3px' })
                            .add(prop.help)
                          .end()
                        .end()
                      .end()
                    .end()
                  })
                .end()
                .start(this.Item).style({'align-items': 'center'})
                  .start(self.Cols, { defaultChildStyle: {
                    'justify-content': 'flex-start',
                    'margin': '0 8px 0 0'
                  }})
                    .addClass(this.myClass('validation-container'))
                    .show(errorSlot)
                    .start({
                      class: 'foam.u2.tag.Image',
                      data: 'images/inline-error-icon.svg'
                    })
                      .addClass(this.myClass('error-icon'))
                    .end()
                    .start(this.Item)
                    .style({ 'flex-grow': 1 })
                      .add(errorSlot.map((s) => {
                        return self.E().add(s);
                      }))
                    .end()
                  .end()
                .end()
              .end();
          }));
    }
  ]
});<|endoftext|>


<commit_before>/**
 * @license
 * Copyright 2019 The FOAM Authors. All Rights Reserved.
 * http://www.apache.org/licenses/LICENSE-2.0
 */

foam.CLASS({
  package: 'foam.u2.detail',
  name: 'SectionedDetailPropertyView',
  extends: 'foam.u2.View',

  documentation: `
    View for one property of a SectionedDetailView.
  `,

  css: `
    ^ m3 {
      font-size: 16px;
      font-weight: bold;
    }

    ^validation-container {
      margin-top: 4px;
      color: #d9170e;
    }

    ^helper-icon {
      width: 20px;
      height: 20px;
      margin-top 4px;
    }

    ^tooltip {
      display: inline-flex;
      overflow:overlay;
      direction: rtl;
      float: right;
      width: 20px;
      height: 20px;
    }

    ^tooltip-container {
      z-index: -1;
      display: none;
      width: 80%;
      height: auto;
      line-height: 1.5;
      margin-right: 3px;
    }

    ^helper-text {
      background-color: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 5px;
      border-top-right-radius: 0px;
      direction: ltr;
      padding: 2px;
      text-align: center;
    }

    ^arrow-right {
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left:10px solid rgba(0, 0, 0, 0.8);
    }

    ^tooltip:hover {
      position: absolute;
      width: 100%;
      height: auto;
    }

    ^tooltip:hover .foam-u2-detail-SectionedDetailPropertyView-tooltip-container{
      display: inline-flex;
      z-index: 10;
    }

    ^error-icon {
      width: 16px;
      height: 16px;
    }

    ^error .foam-u2-TextField {
      background-color: #fbedec;
      border: solid 1px #d9170e;
      font-size: 12px;
    }

    ^error .foam-u2-tag-TextArea {
      background-color: #fbedec;
      border: solid 1px #d9170e;
      font-size: 12px;
    }

    ^error .foam-u2-tag-Select {
      background-color: #fbedec;
      border: solid 1px #d9170e;
      font-size: 12px;
    }

    ^error .foam-u2-view-date-DateTimePicker .date-display-box {
      background-color: #fbedec;
      border: solid 1px #d9170e;
      font-size: 12px;
    }

    /*
      !IMPORTANT!
      For the following inputs below, we are planning
      encode these changes in the actual foam files
    */

    ^ .foam-u2-TextField {
      width: 100%;
      padding: 10px 8px;
      font-size: 14px;
    }

    ^ .foam-u2-tag-TextArea {
      width: 100%;
      padding: 10px 8px;
      font-size: 14px;
    }

    ^ .foam-u2-view-date-DateTimePicker {
      cursor: pointer;
    }

    ^ .foam-u2-tag-Select {
      width: 100%;
      font-size: 14px;
      border: solid 1px #8e9090;
      border-radius: 3px;
      font-weight: 400;
      padding: 10px 8px;
      box-shadow: none;
      background: #ffffff url('images/dropdown-icon.svg') no-repeat 99% 50%;
      -webkit-appearance: none;
      cursor: pointer;
    }

    ^ .foam-u2-view-RichChoiceView {
      display: flex;
    }

    ^ .foam-u2-view-RichChoiceView-chevron {
      content: '▾';
      padding-left: 0px;
      font-size: 16px;
      color: #8D9090;
    }

    ^ .foam-u2-view-RichChoiceView-selection-view {
      padding: 2px 12px 0px 8px;
      width: 100%;
      border-radius: 3px;
      border: solid 1px #8e9090;
      background-color: #ffffff;
      box-sizing: border-box;
      -webkit-appearance: none;
      cursor: pointer;
      font-size: 14px;
    }

    ^ .foam-u2-view-RichChoiceView .search {
      padding: 8px 16px;
      font-size: 14px;
      border-bottom: 1px solid #f4f4f9;
    }

    ^ .foam-u2-detail-SectionedDetailPropertyView .property-filter {
      font-size: 14px;
      padding-left: 16px;
    }

    ^ .foam-u2-view-RichChoiceView .search input {
      border-bottom: none;
    }

    ^ .foam-u2-view-RichChoiceView .search img {
      top: 8px;
    }

    ^ .foam-u2-view-RichChoiceView-heading {
      border-bottom: 1px solid #f4f4f9;
      line-height: 24px;
      font-size: 14px;
      color: #333;
      font-weight: 900;
      padding: 6px 16px;
    }

    ^ .foam-u2-IntView {
      width: 100%;
      padding: 10px 8px;
      font-size: 14px;
    }

    ^ .foam-u2-view-RichChoiceView-container {
      z-index: 1000;
    }

    ^ .DefaultRowView-row {
      background: white;
      padding: 8px 16px;
      font-size: 12px;
      color: #424242;
    }

    ^ .DefaultRowView-row:hover {
      background: #f4f4f9;
      cursor: pointer;
    }

    ^ .foam-u2-CheckBox {
      -webkit-appearance: none;
      border-radius: 2px;
      border: solid 1px #8e9090;
      box-sizing: border-box;
      display: inline-block;
      fill: rgba(0, 0, 0, 0);

      vertical-align: middle;

      height: 16px;
      width: 16px;

      opacity: 1;

      transition: background-color 140ms, border-color 140ms;
    }

    ^ .foam-u2-CheckBox-label {
      margin-left: 12px;
      vertical-align: middle;
    }

    ^ .foam-u2-CheckBox:checked {
      background-color: #604aff;
      fill: white;
      border: solid 1px #604aff;
    }

    ^ .foam-u2-CheckBox:checked:after {
      content: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2048%2048%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2215%22%20height%3D%2215%22%20version%3D%221.1%22%3E%0A%20%20%20%3Cpath%20fill%3D%22white%22%20stroke-width%3D%223%22%20d%3D%22M18%2032.34L9.66%2024l-2.83%202.83L18%2038l24-24-2.83-2.83z%22/%3E%0A%3C/svg%3E);
    }

    ^ input[type="radio" i] {
      -webkit-appearance: none;
      border-radius: 8px;
      background-color: #ffffff;
      border: solid 1px #8e9090;
      box-sizing: border-box;
      display: inline-block;
      fill: rgba(0, 0, 0, 0);

      vertical-align: middle;

      height: 16px;
      width: 16px;

      opacity: 1;

      transition: background-color 140ms, border-color 140ms;
    }

    ^ input[type="radio" i]:checked {
      background-color: #604aff;
    }

    ^ input[type="radio" i]:checked:after {
      content: url('images/active-radio.svg');
    }

    ^ .foam-u2-view-RadioView .foam-u2-view-RadioView {
      margin-bottom:16px;
      display: flex;
      align-items: center;
      font-size: 16px;
    }

    ^ .foam-u2-view-RadioView label {
      margin-left: 12px;
    }
  `,

  requires: [
    'foam.u2.layout.Cols',
    'foam.u2.layout.Item',
    'foam.u2.layout.Rows'
  ],

  properties: [
    'prop',
  ],

  methods: [
    function initE() {
      var self = this;
      this.SUPER();
      this
        .show(this.prop.createVisibilityFor(this.data$)
          .map(m => m != foam.u2.Visibility.HIDDEN))
        .addClass(this.myClass())
        .start(self.Rows, { defaultChildStyle: { padding: '8px 0' } })
          .add(this.slot(function(data, prop) {
            var errorSlot = prop.validateObj ?
              data.slot(prop.validateObj) :
              foam.core.ConstantSlot.create({ value: null });

            return self.E()
              .start(self.Rows, { defaultChildStyle:  { 'line-height': '2' } })
                .start('m3').add(prop.label$).end()
                .start()
                  .style({ 'position': 'relative', 'display': 'inline-flex', 'width': '100%' })
                  .start(self.Item)
                    .style({'flex-grow': 1})
                    .add(prop)
                    .enableClass(this.myClass('error'), errorSlot)
                  .end()
                  .callIf(prop.help, function() {
                    this.start()
                      .addClass(self.myClass('tooltip'))
                      .start({
                        class: 'foam.u2.tag.Image',
                        data: 'images/question-icon.svg'
                      })
                        .addClass(self.myClass('helper-icon'))
                        .attrs({ title: prop.help })
                      .end()

                      .start()
                        .addClass(self.myClass('tooltip-container'))
                        .start()
                          .addClass(self.myClass('arrow-right'))
                        .end()
                        .start()
                          .addClass(self.myClass('helper-text'))
                          .start('p').style({ 'padding': '3px' })
                            .add(prop.help)
                          .end()
                        .end()
                      .end()
                    .end()
                  })
                .end()
                .start(this.Item).style({'align-items': 'center'})
                  .start(self.Cols, { defaultChildStyle: {
                    'justify-content': 'flex-start',
                    'margin': '0 8px 0 0',
                    'position': 'absolute'
                  }})
                    .addClass(this.myClass('validation-container'))
                    .show(errorSlot)
                    .start({
                      class: 'foam.u2.tag.Image',
                      data: 'images/inline-error-icon.svg'
                    })
                      .addClass(this.myClass('error-icon'))
                    .end()
                    .start(this.Item)
                    .style({ 'flex-grow': 1 })
                      .add(errorSlot.map((s) => {
                        return self.E().add(s);
                      }))
                    .end()
                  .end()
                .end()
              .end();
          }));
    }
  ]
});<commit_msg>removed radio view styling so that it doesn't affect foam<commit_after>/**
 * @license
 * Copyright 2019 The FOAM Authors. All Rights Reserved.
 * http://www.apache.org/licenses/LICENSE-2.0
 */

foam.CLASS({
  package: 'foam.u2.detail',
  name: 'SectionedDetailPropertyView',
  extends: 'foam.u2.View',

  documentation: `
    View for one property of a SectionedDetailView.
  `,

  css: `
    ^ m3 {
      font-size: 16px;
      font-weight: bold;
    }

    ^validation-container {
      margin-top: 4px;
      color: #d9170e;
    }

    ^helper-icon {
      width: 20px;
      height: 20px;
      margin-top 4px;
    }

    ^tooltip {
      display: inline-flex;
      overflow:overlay;
      direction: rtl;
      float: right;
      width: 20px;
      height: 20px;
    }

    ^tooltip-container {
      z-index: -1;
      display: none;
      width: 80%;
      height: auto;
      line-height: 1.5;
      margin-right: 3px;
    }

    ^helper-text {
      background-color: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 5px;
      border-top-right-radius: 0px;
      direction: ltr;
      padding: 2px;
      text-align: center;
    }

    ^arrow-right {
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left:10px solid rgba(0, 0, 0, 0.8);
    }

    ^tooltip:hover {
      position: absolute;
      width: 100%;
      height: auto;
    }

    ^tooltip:hover .foam-u2-detail-SectionedDetailPropertyView-tooltip-container{
      display: inline-flex;
      z-index: 10;
    }

    ^error-icon {
      width: 16px;
      height: 16px;
    }

    ^error .foam-u2-TextField {
      background-color: #fbedec;
      border: solid 1px #d9170e;
      font-size: 12px;
    }

    ^error .foam-u2-tag-TextArea {
      background-color: #fbedec;
      border: solid 1px #d9170e;
      font-size: 12px;
    }

    ^error .foam-u2-tag-Select {
      background-color: #fbedec;
      border: solid 1px #d9170e;
      font-size: 12px;
    }

    ^error .foam-u2-view-date-DateTimePicker .date-display-box {
      background-color: #fbedec;
      border: solid 1px #d9170e;
      font-size: 12px;
    }

    /*
      !IMPORTANT!
      For the following inputs below, we are planning
      encode these changes in the actual foam files
    */

    ^ .foam-u2-TextField {
      width: 100%;
      padding: 10px 8px;
      font-size: 14px;
    }

    ^ .foam-u2-tag-TextArea {
      width: 100%;
      padding: 10px 8px;
      font-size: 14px;
    }

    ^ .foam-u2-view-date-DateTimePicker {
      cursor: pointer;
    }

    ^ .foam-u2-tag-Select {
      width: 100%;
      font-size: 14px;
      border: solid 1px #8e9090;
      border-radius: 3px;
      font-weight: 400;
      padding: 10px 8px;
      box-shadow: none;
      background: #ffffff url('images/dropdown-icon.svg') no-repeat 99% 50%;
      -webkit-appearance: none;
      cursor: pointer;
    }

    ^ .foam-u2-view-RichChoiceView {
      display: flex;
    }

    ^ .foam-u2-view-RichChoiceView-chevron {
      content: '▾';
      padding-left: 0px;
      font-size: 16px;
      color: #8D9090;
    }

    ^ .foam-u2-view-RichChoiceView-selection-view {
      padding: 2px 12px 0px 8px;
      width: 100%;
      border-radius: 3px;
      border: solid 1px #8e9090;
      background-color: #ffffff;
      box-sizing: border-box;
      -webkit-appearance: none;
      cursor: pointer;
      font-size: 14px;
    }

    ^ .foam-u2-view-RichChoiceView .search {
      padding: 8px 16px;
      font-size: 14px;
      border-bottom: 1px solid #f4f4f9;
    }

    ^ .foam-u2-detail-SectionedDetailPropertyView .property-filter {
      font-size: 14px;
      padding-left: 16px;
    }

    ^ .foam-u2-view-RichChoiceView .search input {
      border-bottom: none;
    }

    ^ .foam-u2-view-RichChoiceView .search img {
      top: 8px;
    }

    ^ .foam-u2-view-RichChoiceView-heading {
      border-bottom: 1px solid #f4f4f9;
      line-height: 24px;
      font-size: 14px;
      color: #333;
      font-weight: 900;
      padding: 6px 16px;
    }

    ^ .foam-u2-IntView {
      width: 100%;
      padding: 10px 8px;
      font-size: 14px;
    }

    ^ .foam-u2-view-RichChoiceView-container {
      z-index: 1000;
    }

    ^ .DefaultRowView-row {
      background: white;
      padding: 8px 16px;
      font-size: 12px;
      color: #424242;
    }

    ^ .DefaultRowView-row:hover {
      background: #f4f4f9;
      cursor: pointer;
    }

    ^ .foam-u2-CheckBox {
      -webkit-appearance: none;
      border-radius: 2px;
      border: solid 1px #8e9090;
      box-sizing: border-box;
      display: inline-block;
      fill: rgba(0, 0, 0, 0);

      vertical-align: middle;

      height: 16px;
      width: 16px;

      opacity: 1;

      transition: background-color 140ms, border-color 140ms;
    }

    ^ .foam-u2-CheckBox-label {
      margin-left: 12px;
      vertical-align: middle;
    }

    ^ .foam-u2-CheckBox:checked {
      background-color: #604aff;
      fill: white;
      border: solid 1px #604aff;
    }

    ^ .foam-u2-CheckBox:checked:after {
      content: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2048%2048%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2215%22%20height%3D%2215%22%20version%3D%221.1%22%3E%0A%20%20%20%3Cpath%20fill%3D%22white%22%20stroke-width%3D%223%22%20d%3D%22M18%2032.34L9.66%2024l-2.83%202.83L18%2038l24-24-2.83-2.83z%22/%3E%0A%3C/svg%3E);
    }

    /*
    ^ input[type="radio" i] {
      -webkit-appearance: none;
      border-radius: 8px;
      background-color: #ffffff;
      border: solid 1px #8e9090;
      box-sizing: border-box;
      display: inline-block;
      fill: rgba(0, 0, 0, 0);

      vertical-align: middle;

      height: 16px;
      width: 16px;

      opacity: 1;

      transition: background-color 140ms, border-color 140ms;
    }

    ^ input[type="radio" i]:checked {
      background-color: #604aff;
    }

    ^ input[type="radio" i]:checked:after {
      content: url('images/active-radio.svg');
    }

    */

    ^ .foam-u2-view-RadioView .foam-u2-view-RadioView {
      margin-bottom:16px;
      display: flex;
      align-items: center;
      font-size: 16px;
    }

    ^ .foam-u2-view-RadioView label {
      margin-left: 12px;
    }
  `,

  requires: [
    'foam.u2.layout.Cols',
    'foam.u2.layout.Item',
    'foam.u2.layout.Rows'
  ],

  properties: [
    'prop',
  ],

  methods: [
    function initE() {
      var self = this;
      this.SUPER();
      this
        .show(this.prop.createVisibilityFor(this.data$)
          .map(m => m != foam.u2.Visibility.HIDDEN))
        .addClass(this.myClass())
        .start(self.Rows, { defaultChildStyle: { padding: '8px 0' } })
          .add(this.slot(function(data, prop) {
            var errorSlot = prop.validateObj ?
              data.slot(prop.validateObj) :
              foam.core.ConstantSlot.create({ value: null });

            return self.E()
              .start(self.Rows, { defaultChildStyle:  { 'line-height': '2' } })
                .start('m3').add(prop.label$).end()
                .start()
                  .style({ 'position': 'relative', 'display': 'inline-flex', 'width': '100%' })
                  .start(self.Item)
                    .style({'flex-grow': 1})
                    .add(prop)
                    .enableClass(this.myClass('error'), errorSlot)
                  .end()
                  .callIf(prop.help, function() {
                    this.start()
                      .addClass(self.myClass('tooltip'))
                      .start({
                        class: 'foam.u2.tag.Image',
                        data: 'images/question-icon.svg'
                      })
                        .addClass(self.myClass('helper-icon'))
                        .attrs({ title: prop.help })
                      .end()

                      .start()
                        .addClass(self.myClass('tooltip-container'))
                        .start()
                          .addClass(self.myClass('arrow-right'))
                        .end()
                        .start()
                          .addClass(self.myClass('helper-text'))
                          .start('p').style({ 'padding': '3px' })
                            .add(prop.help)
                          .end()
                        .end()
                      .end()
                    .end()
                  })
                .end()
                .start(this.Item).style({'align-items': 'center'})
                  .start(self.Cols, { defaultChildStyle: {
                    'justify-content': 'flex-start',
                    'margin': '0 8px 0 0',
                    'position': 'absolute'
                  }})
                    .addClass(this.myClass('validation-container'))
                    .show(errorSlot)
                    .start({
                      class: 'foam.u2.tag.Image',
                      data: 'images/inline-error-icon.svg'
                    })
                      .addClass(this.myClass('error-icon'))
                    .end()
                    .start(this.Item)
                    .style({ 'flex-grow': 1 })
                      .add(errorSlot.map((s) => {
                        return self.E().add(s);
                      }))
                    .end()
                  .end()
                .end()
              .end();
          }));
    }
  ]
});<|endoftext|>


<commit_before>var Z = new function(v) {

	this.l = function(text, color) {
		if (color) {
			console.log("%c" + text, "color: " + color + ";");
		} else {
			console.log(text);
		}
	}

	this.get = function(url, values, good, bad) {
		var xhttp = new XMLHttpRequest();
		if (values && values[0]) {
			url += "?";
			url += get_val(values);
		}
		xhttp.onreadystatechange = function() {
			if (xhttp.readyState == 4 && xhttp.status == 200) {
				good(xhttp.responseText);
			} else if (xhttp.readyState == 4) {
				if (bad) {
					bad(xhttp);
				}
			}
		}
		xhttp.open("GET", url, true);
		xhttp.send();
	}

	this.post = function(url, values, good, bad) {
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
			if (xhttp.readyState == 4 && xhttp.status == 200) {
				good(xhttp.responseText);
			} else if (xhttp.readyState == 4) {
				if (bad) {
					bad(xhttp);
				}
			}
		}
		xhttp.open("GET", url, true);
		xhttp.send(get_val(values));
	}

	var get_val = function(values) {
		var url = "";

		if (values && values[0]) {
			for (var k in values) {
				w += k + "=" + values[k] + "&";
			}
			if (k.length > 1) {
				url = url.slice(0, -1);
			}
		}
		return (url);
	}

}
<commit_msg>Values of GET and POST are used<commit_after>var Z = new function(v) {

	this.l = function(text, color) {
		if (color) {
			console.log("%c" + text, "color: " + color + ";");
		} else {
			console.log(text);
		}
	}

	this.get = function(url, values, good, bad) {
		var xhttp = new XMLHttpRequest();
		if (values) {
			url += "?";
			url += get_val(values);
		}
		xhttp.onreadystatechange = function() {
			if (xhttp.readyState == 4 && xhttp.status == 200) {
				good(xhttp.responseText);
			} else if (xhttp.readyState == 4) {
				if (bad) {
					bad(xhttp);
				}
			}
		}
		xhttp.open("GET", url, true);
		xhttp.send();
	}

	this.post = function(url, values, good, bad) {
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
			if (xhttp.readyState == 4 && xhttp.status == 200) {
				good(xhttp.responseText);
			} else if (xhttp.readyState == 4) {
				if (bad) {
					bad(xhttp);
				}
			}
		}
		xhttp.open("GET", url, true);
		xhttp.send(get_val(values));
	}

	var get_val = function(values) {
		var url = "";

		if (values) {
			for (var k in values) {
				url += k + "=" + values[k] + "&";
			}
			if (k.length > 1) {
				url = url.slice(0, -1);
			}
		}
		return (url);
	}

}
<|endoftext|>


<commit_before>/* eslint-env mocha*/

var http = require('http')
var Pouchdb = require('pouchdb')

var TOKEN = 'test:' + process.env.TEST_TOKEN
var DOCTYPE = 'io.cozy.pouchtestobject'
var SOURCE = 'http://' + TOKEN + '@localhost:8080/data/' + DOCTYPE + '/'

var auth = new Buffer(TOKEN, 'binary').toString('base64')

function stackRequest (method, path, body, expect, callback) {
  var opts = {
    'method': method,
    'port': process.env.COZY_STACK_PORT || 8080,
    'path': path,
    'headers': {
      'Authorization': 'Basic ' + auth
    }
  }

  if (body) opts.headers['Content-Type'] = 'application/json'

  var req = http.request(opts, function (res) {
    var buffers = []
    res.on('error', callback)
    res.on('data', function (chunk) { buffers.push(chunk) })
    res.on('end', function () {
      var resbody = buffers.length === 0 ? ''
        : JSON.parse(Buffer.concat(buffers).toString('utf8'))

      if (res.statusCode !== expect) {
        callback(new Error('expected ' + expect + ', got ' + res.statusCode))
      }
      callback(null, res.statusCode, resbody)
    })
  })

  if (body) req.write(JSON.stringify(body))

  req.end()
}

function asyncForEachKey (obj, iter, done) {
  var n = 0
  Object.keys(obj).forEach(function (key) {
    n++
    iter(obj[key], function (err) {
      if (err) return done && done(err)
      if (--n === 0) return done(null)
    })
  })
}

function createTestObject (value) {
  return function (done) {
    var ctx = this
    ctx.docIds = ctx.docIds || {}
    var doc = {test: value}
    stackRequest('POST', '/data/' + DOCTYPE + '/', doc, 201,
      function (err, status, body) {
        if (err) return done(err)
        ctx.docIds[value] = body
        done(null)
      })
  }
}

function destroySource (done) {
  http.request({
    'method': 'DELETE',
    'port': process.env.COUCH_PORT || 5984,
    'path': '/dev%2Fio-cozy-pouchtestobject'
  }, function (res) {
    var buffers = []
    res.on('error', done)
    res.on('data', function (chunk) { buffers.push(chunk) })
    res.on('end', function () {
      var resbody = buffers.length === 0 ? ''
        : JSON.parse(Buffer.concat(buffers).toString('utf8'))
      console.log('DESTROY DB', res.statusCode, resbody)
      done(null)
    })
  }).end()
}

function destroyObjects (done) {
  var ctx = this
  asyncForEachKey(ctx.docIds, function (doc, next) {
    var path = '/data/' + DOCTYPE + '/' + doc.id + '?rev=' + doc.rev
    stackRequest('DELETE', path, false, 200, next)
  }, done)
}

describe('Replication stack -> pouchdb', function () {
  var target = new Pouchdb('replication-target')
  before(destroySource)
  before(createTestObject(42))
  before(createTestObject(666))
  before(createTestObject(1969))

  it('When I start a replication', function (done) {
    target.replicate.from(SOURCE, {skip_setup: true}, done)
  })

  it('Then I have 3 items in target', function (done) {
    target.get(this.docIds[42].id, function (err, res) {
      if (err) return done()
      if (res['test'] !== 42) done(new Error('wrong doc'))
      done(null)
    })
  })

  after(destroyObjects)
  after(function (done) { target.destroy(done) })
})

describe('Replication pouchdb -> stack', function () {
  var target = new Pouchdb('replication-target')
  before(destroySource)

  var docs;

  it('create doc in bulk', function (done) {
    Promise.all([
      target.post({ title: 'Coucou 1' }),
      target.post({ title: 'Coucou 2' }),
    ]).then((_docs) => {
      docs = _docs
      target.replicate.to(SOURCE, {}, done)
    }, done)
  })

  it('update doc in bulk', function (done) {
    Promise.all([
      target.put({ title: 'Coucou 1 - edited', "_id": docs[0].id, "_rev": docs[0].rev }),
      target.put({ title: 'Coucou 2 - edited', "_id": docs[1].id, "_rev": docs[1].rev }),
    ]).then(() => {
      target.replicate.to(SOURCE, {}, done)
    }, done)
  })
})
<commit_msg>Fix integration tests<commit_after>/* eslint-env mocha*/

var http = require('http')
var Pouchdb = require('pouchdb')

var TOKEN = 'test:' + process.env.TEST_TOKEN
var DOCTYPE = 'io.cozy.pouchtestobject'
var SOURCE = 'http://' + TOKEN + '@localhost:8080/data/' + DOCTYPE + '/'

var auth = new Buffer(TOKEN, 'binary').toString('base64')

function stackRequest (method, path, body, expect, callback) {
  var opts = {
    'method': method,
    'port': process.env.COZY_STACK_PORT || 8080,
    'path': path,
    'headers': {
      'Authorization': 'Basic ' + auth
    }
  }

  if (body) opts.headers['Content-Type'] = 'application/json'

  var req = http.request(opts, function (res) {
    var buffers = []
    res.on('error', callback)
    res.on('data', function (chunk) { buffers.push(chunk) })
    res.on('end', function () {
      var resbody = buffers.length === 0 ? ''
        : JSON.parse(Buffer.concat(buffers).toString('utf8'))

      if (res.statusCode !== expect) {
        callback(new Error('expected ' + expect + ', got ' + res.statusCode))
      }
      callback(null, res.statusCode, resbody)
    })
  })

  if (body) req.write(JSON.stringify(body))

  req.end()
}

function asyncForEachKey (obj, iter, done) {
  var n = 0
  Object.keys(obj).forEach(function (key) {
    n++
    iter(obj[key], function (err) {
      if (err) return done && done(err)
      if (--n === 0) return done(null)
    })
  })
}

function createTestObject (value) {
  return function (done) {
    var ctx = this
    ctx.docIds = ctx.docIds || {}
    var doc = {test: value}
    stackRequest('POST', '/data/' + DOCTYPE + '/', doc, 201,
      function (err, status, body) {
        if (err) return done(err)
        ctx.docIds[value] = body
        done(null)
      })
  }
}

function destroySource (done) {
  http.request({
    'method': 'DELETE',
    'port': process.env.COUCH_PORT || 5984,
    'path': '/dev%2Fio-cozy-pouchtestobject'
  }, function (res) {
    var buffers = []
    res.on('error', done)
    res.on('data', function (chunk) { buffers.push(chunk) })
    res.on('end', function () {
      var resbody = buffers.length === 0 ? ''
        : JSON.parse(Buffer.concat(buffers).toString('utf8'))
      console.log('DESTROY DB', res.statusCode, resbody)
      done(null)
    })
  }).end()
}

function destroyObjects (done) {
  var ctx = this
  asyncForEachKey(ctx.docIds, function (doc, next) {
    var path = '/data/' + DOCTYPE + '/' + doc.id + '?rev=' + doc.rev
    stackRequest('DELETE', path, false, 200, next)
  }, done)
}

describe('Replication pouchdb -> stack', function () {
  var target = new Pouchdb('replication-target')
  before(destroySource)

  var docs;

  it('create doc in bulk', function (done) {
    Promise.all([
      target.post({ title: 'Coucou 1' }),
      target.post({ title: 'Coucou 2' }),
    ]).then((_docs) => {
      docs = _docs
      target.replicate.to(SOURCE, {}, done)
    }, done)
  })

  it('update doc in bulk', function (done) {
    Promise.all([
      target.put({ title: 'Coucou 1 - edited', "_id": docs[0].id, "_rev": docs[0].rev }),
      target.put({ title: 'Coucou 2 - edited', "_id": docs[1].id, "_rev": docs[1].rev }),
    ]).then(() => {
      target.replicate.to(SOURCE, {}, done)
    }, done)
  })
})

describe('Replication stack -> pouchdb', function () {
  var target = new Pouchdb('replication-target')
  before(destroySource)
  before(createTestObject(42))
  before(createTestObject(666))
  before(createTestObject(1969))

  it('When I start a replication', function (done) {
    target.replicate.from(SOURCE, {skip_setup: true}, done)
  })

  it('Then I have 3 items in target', function (done) {
    target.get(this.docIds[42].id, function (err, res) {
      if (err) return done()
      if (res['test'] !== 42) done(new Error('wrong doc'))
      done(null)
    })
  })

  after(destroyObjects)
  after(function (done) { target.destroy(done) })
})
<|endoftext|>


<commit_before>var MongoClient = require('mongodb').MongoClient
  , assert = require('assert'), cfg = require('./config');

function layers() {
	this.strPolygons = "init";
  this.strPoints = "init";
  this.pageInfo = "init";
	this.db = null;
	console.log("Object Created:")
}

layers.prototype.runQuery = function() {
  this.db.collection(this.geoname).find({'geometry.type': 'Point'},{'_id': false}).toArray(function (err, items) {
    console.log(items);
    console.log(err);
      console.log("Object Created:")
  });

}

layers.prototype.getDBData = function(callback, geotype, myobj) {
	this.db.collection(this.geoname).find({'geometry.type': geotype},{'_id': false}).toArray(function (err, items) {
		var obj1 = {
				"type": "FeatureCollection",
  				"features": []
  			}
		obj1.features = items;//push(obj1.features[0]);
		//console.log(obj1);
		var strJSONData = JSON.stringify(obj1);
		callback(strJSONData,geotype, myobj);

	});
}

layers.prototype.getPageInfoData = function(callback, myobj) {
  this.db.collection(this.infoname).find({}).toArray(function (err, items) {
    var obj1 = {
        "types": []
        }
    obj1.types = items;//push(obj1.features[0]);
    console.log(obj1);
    var strJSONData = JSON.stringify(obj1);
    callback(strJSONData, myobj);

  });
}

layers.prototype.init = function(geoname, infoname) {
  this.geoname = geoname;
  this.infoname = infoname;
	this.connectDB(this.callFetch, this);
	this.testVal = "2";

}

layers.prototype.callFetch = function(theDB, myobj) {
	myobj.db = theDB;
	myobj.getDBData(myobj.updateJSON, "Point", myobj);
  myobj.getDBData(myobj.updateJSON, "Polygon", myobj);
  myobj.getPageInfoData(myobj.updateInfoJSON, myobj);
}

layers.prototype.connectDB = function(callback, myobj) {
	var url = cfg.mongodb.url;
	MongoClient.connect(url, function(err, db) {
		assert.equal(null, err);
		console.log("Connected correctly to server");
		console.log("err:" + err);
		callback(db, myobj);
	});
}

layers.prototype.updateJSON = function(res, geotype, myobj) {
  if(geotype=="Point") {
	   myobj.strPoints = res;
  } else {
      myobj.strPolygons = res;
  }
	console.log("updateJSON: " + res);
}

layers.prototype.updateInfoJSON = function(res, myobj) {
  myobj.pageInfo = res;
  console.log("updateJSON: " + res);
}

module.exports = layers

layers.prototype.savePointer = function(newJSON) {
	this.db.collection(cfg.mongodb.col).insert(newJSON);
}

layers.prototype.addHTML = function() {
        var pageInfo = {
        "types":
           [
            {
              "id": "IndDev",
              "text": "Industrial Development",
              "type": "threat"
            },
            {
              "id": "ResDev",
              "text": "Residental Development",
              "type": "threat"
           },
           {
              "id": "Vehicles",
              "text": "Vehicles",
              "type": "threat"
           },
           {
              "id": "OffLeashDogs",
              "text": "Off Leash Dogs",
              "type": "threat"
           },
           {
              "id": "BadWaterMgmt",
              "text": "Changes to water flows",
              "type": "threat"
           },
           {
              "id": "RecImpact",
              "text": "Recreational Impacts",
              "type": "threat"
           },
           {
              "id": "Weeds",
              "text": "Weeds",
              "type": "threat"
           },
           {
              "id": "IntroPred",
              "text": "Introduced Predators",
              "type": "threat"
           },
           {
              "id": "Pollution",
              "text": "Pollution",
              "type": "threat",
           },
           {
              "id": "UnsusHarvest",
              "text": "Unsustainable harvesting",
              "type": "threat"
           },

           {
              "id": "CommMon",
              "text": "Community Monitoring",
              "type": "action"
            },
            {
              "id": "Research",
              "text": "Research",
              "type": "action"
            },
            {
              "id": "ImprovPol",
              "text": "Improved policy and legislation",
              "type": "action"
            },

            {
              "id": "Education",
              "text": "Education and events",
              "type": "action"
            },

            {
              "id": "SiteProtect",
              "text": "Site Protection",
              "type": "action"
            },

            {
              "id": "RubbishRemoval",
              "text": "Rubbish removal",
              "type": "action"
            },
            {
              "id": "WeedRemoval",
              "text": "Weed removal",
              "type": "action"
            },
            {
              "id": "Predator control",
              "text": "Predator control",
              "type": "action"
            },
            {
              "id": "HabitatCtrl",
              "text": "Habitat creation",
              "type": "action"
            },
            {
              "id": "ImprovWaterMgmt",
              "text": "Improved water management",
              "type": "action"
            },
            {
              "id": "impbirdsite",
              "text": "Important Bird Areas",
              "type": "layer"
            },
            {
              "id": "ramsar",
              "text": "Ramsar Sites",
              "type": "layer"
            }
          ]
      };

        var url = cfg.mongodb.url;
    MongoClient.connect(url, function(err, db) {
      assert.equal(null, err);
      console.log("Connected correctly to server");

      for(var i=0;i<pageInfo.types.length;i++) {
                db.collection('pageinfo').insert(pageInfo.types[i]);
      }

    });
}

layers.prototype.testsave = function () {
	var url = cfg.mongodb.url;
	MongoClient.connect(url, function(err, db) {
	  	assert.equal(null, err);
	  	console.log("Connected correctly to server");

	  	console.log(err);

      var dt = new Date();

	var myj2= {
      				"type": "Feature",
      				"properties":
      				{
            "type": "layer",
            "typeid": "impbirdsite",
            "typetext": "Important Bird Sites",
            "comment": "This is an Important Bird site",
            "icon": "",
            "link": "http://www.birdsites.com",
            "yourname": "Toby",
            "youremail": "tadams1@gmail.com",
            "datesaved":  dt.toJSON()
      				},
      				"geometry":
      				{
        				"type": "Polygon",
        				"coordinates": [
          				[
            				[123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            				[118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            				[121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
       				     	[124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
       				     	[121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            				[122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
       				     	[120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            				[123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          				]
        				]
      				}
      			}
      	console.log(myj2);

      	db.collection(cfg.mongodb.col).insert(myj2);

	 myj2=     {
      "type": "Feature",
      "properties": {
            "type": "layer",
            "typeid": "ramsar",
            "typetext": "Ramsar Sites",
            "comment": "This is a Ramsar site",
            "icon": "",
            "link": "http://www.ramsar.com",
            "yourname": "Toby",
            "youremail": "tadams1@gmail.com",
            "datesaved":  dt.toJSON()
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    }

    console.log(myj2);

    db.collection(cfg.mongodb.col).insert(myj2);

        });

}

<commit_msg>Updated threat and action types<commit_after>var MongoClient = require('mongodb').MongoClient
  , assert = require('assert'), cfg = require('./config');

function layers() {
	this.strPolygons = "init";
  this.strPoints = "init";
  this.pageInfo = "init";
	this.db = null;
	console.log("Object Created:")
}

layers.prototype.runQuery = function() {
  this.db.collection(this.geoname).find({'geometry.type': 'Point'},{'_id': false}).toArray(function (err, items) {
    console.log(items);
    console.log(err);
      console.log("Object Created:")
  });

}

layers.prototype.getDBData = function(callback, geotype, myobj) {
	this.db.collection(this.geoname).find({'geometry.type': geotype},{'_id': false}).toArray(function (err, items) {
		var obj1 = {
				"type": "FeatureCollection",
  				"features": []
  			}
		obj1.features = items;//push(obj1.features[0]);
		//console.log(obj1);
		var strJSONData = JSON.stringify(obj1);
		callback(strJSONData,geotype, myobj);

	});
}

layers.prototype.getPageInfoData = function(callback, myobj) {
  this.db.collection(this.infoname).find({}).toArray(function (err, items) {
    var obj1 = {
        "types": []
        }
    obj1.types = items;//push(obj1.features[0]);
    console.log(obj1);
    var strJSONData = JSON.stringify(obj1);
    callback(strJSONData, myobj);

  });
}

layers.prototype.init = function(geoname, infoname) {
  this.geoname = geoname;
  this.infoname = infoname;
	this.connectDB(this.callFetch, this);
	this.testVal = "2";

}

layers.prototype.callFetch = function(theDB, myobj) {
	myobj.db = theDB;
	myobj.getDBData(myobj.updateJSON, "Point", myobj);
  myobj.getDBData(myobj.updateJSON, "Polygon", myobj);
  myobj.getPageInfoData(myobj.updateInfoJSON, myobj);
}

layers.prototype.connectDB = function(callback, myobj) {
	var url = cfg.mongodb.url;
	MongoClient.connect(url, function(err, db) {
		assert.equal(null, err);
		console.log("Connected correctly to server");
		console.log("err:" + err);
		callback(db, myobj);
	});
}

layers.prototype.updateJSON = function(res, geotype, myobj) {
  if(geotype=="Point") {
	   myobj.strPoints = res;
  } else {
      myobj.strPolygons = res;
  }
	console.log("updateJSON: " + res);
}

layers.prototype.updateInfoJSON = function(res, myobj) {
  myobj.pageInfo = res;
  console.log("updateJSON: " + res);
}

module.exports = layers

layers.prototype.savePointer = function(newJSON) {
	this.db.collection(cfg.mongodb.col).insert(newJSON);
}

layers.prototype.addHTML = function() {
        var pageInfo = {
        "types":
           [
            {
              "id": "Dev",
              "text": "Development - industrial or residential",
              "type": "threat"
            },

            {
              "id": "RecImpact",
              "text": "Recreational - e.g. Off-leash dogs, off-road driving",
              "type": "threat"
           },

           {
              "id": "BadWaterMgmt",
              "text": "Inappropriate water management",
              "type": "threat"
           },

           {
              "id": "Weeds",
              "text": "Weeds invasion",
              "type": "threat"
           },
           {
              "id": "IntroPred",
              "text": "Introduced Predators",
              "type": "threat"
           },
           {
              "id": "Pollution",
              "text": "Pollution",
              "type": "threat",
           },
           {
              "id": "Clim",
              "text": "Climate change",
              "type": "threat"
           },

           {
              "id": "ShowLove",
              "text": "Show the love for shorebirds",
              "type": "action"
            },
            {
              "id": "PetIt",
              "text": "Sign a petition",
              "type": "action"
            },

            {
              "id": "Education",
              "text": "Education and events",
              "type": "action"
            },

            {
              "id": "HabitatRes",
              "text": "Habitat restoration or care",
              "type": "action"
            },

            {
              "id": "Advocoacy",
              "text": "Advocacy - saving shorebird habitat",
              "type": "action"
            },
            {
              "id": "impbirdsite",
              "text": "Important Bird Areas",
              "type": "layer"
            },
            {
              "id": "ramsar",
              "text": "Ramsar Sites",
              "type": "layer"
            }
          ]
      };

        var url = cfg.mongodb.url;
    MongoClient.connect(url, function(err, db) {
      assert.equal(null, err);
      console.log("Connected correctly to server");

      for(var i=0;i<pageInfo.types.length;i++) {
                db.collection('pageinfo').insert(pageInfo.types[i]);
      }

    });
}

layers.prototype.testsave = function () {
	var url = cfg.mongodb.url;
	MongoClient.connect(url, function(err, db) {
	  	assert.equal(null, err);
	  	console.log("Connected correctly to server");

	  	console.log(err);

      var dt = new Date();

	var myj2= {
      				"type": "Feature",
      				"properties":
      				{
            "type": "layer",
            "typeid": "impbirdsite",
            "typetext": "Important Bird Sites",
            "comment": "This is an Important Bird site",
            "icon": "",
            "link": "http://www.birdsites.com",
            "yourname": "Toby",
            "youremail": "tadams1@gmail.com",
            "datesaved":  dt.toJSON()
      				},
      				"geometry":
      				{
        				"type": "Polygon",
        				"coordinates": [
          				[
            				[123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            				[118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            				[121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
       				     	[124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
       				     	[121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            				[122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
       				     	[120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            				[123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          				]
        				]
      				}
      			}
      	console.log(myj2);

      	db.collection(cfg.mongodb.col).insert(myj2);

	 myj2=     {
      "type": "Feature",
      "properties": {
            "type": "layer",
            "typeid": "ramsar",
            "typetext": "Ramsar Sites",
            "comment": "This is a Ramsar site",
            "icon": "",
            "link": "http://www.ramsar.com",
            "yourname": "Toby",
            "youremail": "tadams1@gmail.com",
            "datesaved":  dt.toJSON()
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    }

    console.log(myj2);

    db.collection(cfg.mongodb.col).insert(myj2);

        });

}

<|endoftext|>