station 0.0.0 → 0.0.100

data/lib/nexmo_developer/app/webpacker/javascript/components/concatenation/Concatenation.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="Vlt-box">
+    <h2>Try it out</h2>
+
+    <h4>Message</h4>
+    <div class="Vlt-textarea">
+      <textarea v-model="body" />
+    </div>
+
+    <div class="Vlt-margin--top2" />
+
+    <h4>Data</h4>
+    <div class="Vlt-box Vlt-box--white Vlt-box--lesspadding">
+      <div class="Vlt-grid">
+        <div class="Vlt-col Vlt-col--1of3">
+          <b>Unicode is Required?</b>
+          <i v-if="unicodeRequired" class="icon icon--large icon-check-circle color--success"></i>
+          <i v-else class="icon icon--large icon-times-circle color--error"></i>
+        </div>
+        <div class="Vlt-col Vlt-col--2of3">
+        </div>
+        <hr class="hr--shorter"/>
+        <div class="Vlt-col Vlt-col--1of3">
+          <b>Length</b>
+        </div>
+        <div class="Vlt-col Vlt-col--2of3" v-html="smsComposition" id="sms-composition"></div>
+      </div>
+    </div>
+
+    <h4>Parts</h4>
+    <div class="Vlt-box Vlt-box--white Vlt-box--lesspadding" id="parts">
+      <div v-for= "(message, index) in messages" class="Vlt-grid">
+        <div class="Vlt-col Vlt-col--1of3"><b>Part {{index + 1}}</b></div>
+        <div class="Vlt-col Vlt-col--2of3">
+          <code>
+            <span v-if="messages.length > 1">
+              <span class="Vlt-badge Vlt-badge--blue">User Defined Header</span>
+              <span>&nbsp;</span>
+            </span>
+            {{message}}
+          </code>
+        </div>
+        <hr v-if="index + 1 !== messages.length" class="hr--shorter"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CharacterCounter from './character_counter';
+
+export default {
+  data: function () {
+    return {
+      body: 'It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.'
+    };
+  },
+  computed: {
+    smsInfo: function() {
+      return new CharacterCounter(this.body).getInfo();
+    },
+    messages: function() {
+      return this.smsInfo.messages;
+    },
+    unicodeRequired: function() {
+      return this.smsInfo.unicodeRequired;
+    },
+    smsComposition: function() {
+      let count = this.smsInfo.charactersCount;
+      let characters = this.pluralize('character', count);
+      let messagesLength = this.messages.length;
+      let parts = this.pluralize('part', messagesLength);
+
+      return `${count} ${characters} sent in ${messagesLength} message ${parts}`;
+    }
+  },
+  methods: {
+    pluralize: function(singular, count) {
+      if (count === 1) { return singular; }
+      return `${singular}s`;
+    }
+  }
+}
+</script>
+
+<style scoped>
+  textarea {
+    width: 100%;
+    height: 150px;
+    resize: vertical;
+  }
+  code {
+    whiteSpace: normal;
+    wordBreak: break-all;
+ }
+</style>

data/lib/nexmo_developer/app/webpacker/javascript/components/concatenation/character_counter.js

@@ -0,0 +1,112 @@
+import difference from 'lodash/difference'
+
+const GSM_STANDARD_CHARS = [
+  '@', '0', '¡', 'P', '¿',
+  'p', '£', '_', '!', '1',
+  'A', 'Q', 'a', 'q', '$',
+  '"', '2', 'B', 'R', 'b',
+  'r', '¥', '?', '#', '3',
+  'C', 'S', 'c', 's', 'è',
+  '?', '4', 'D', 'T', 'd',
+  't', 'é', '?', '%', '5',
+  'E', 'U', 'e', 'u', 'ù',
+  '6', 'F', 'V', 'f', 'v',
+  'ì', '?', "'", '7', 'G',
+  'W', 'g', 'w', 'ò', '(',
+  '8', 'H', 'X', 'h', 'x',
+  'Ç', ')', '9', 'I', 'Y',
+  'i', 'y', '*', ':', 'J',
+  'Z', 'j', 'z', 'Ø', '+',
+  ';', 'K', 'Ä', 'k', 'ä',
+  'Æ', ',', '<', 'L', 'l',
+  'ö', 'æ', '-', '=', 'M',
+  'Ñ', 'm', 'ñ', 'Å', 'ß',
+  '.', '>', 'N', 'Ü', 'n',
+  'ü', 'å', 'É', '/', 'O',
+  '§', 'o', 'à', 'Δ', 'Φ',
+  'Γ', 'Λ', 'Ω', 'Π', 'Ψ',
+  'Σ', 'Θ', 'Ξ', 'Ö', 'Ä',
+  'Ü', 'ø', ' ', '\r', '\n'
+]
+
+const GSM_EXTENDED_CHARS = [
+  '|', '^', '€', '{', '}', '[', ']', '~', '\\'
+]
+
+const BYTE_SIZE = 8;
+const CHARACTER_SIZE = 7;
+const GSM_METADATA_LENGTH = 7;
+const GSM_METADATA_SIZE = GSM_METADATA_LENGTH * CHARACTER_SIZE;
+const GSM_MAX_SIZE = 140 * BYTE_SIZE;
+
+class CharacterCounter {
+  constructor(text) {
+    this.text = text;
+  }
+
+  getInfo() {
+    let messages = this.getMessages();
+    return {
+      messages: messages,
+      unicodeRequired: this.isUnicodeRequired(),
+      charactersCount: messages.reduce(function(sum, sms) { return sum + sms.length }, 0)
+    }
+  }
+
+  isUnicodeRequired() {
+    let remainder = difference([...this.text], [...GSM_STANDARD_CHARS, ...GSM_EXTENDED_CHARS]);
+    return remainder.length !== 0;
+  }
+
+  getMessages() {
+    return this.splitIntoSMS(GSM_MAX_SIZE);
+  }
+
+  splitIntoSMS(maxSize) {
+    let index = 0;
+    let messages = [];
+    let text = this.text;
+    while(index <= this.text.length) {
+      let sms  = this.getSMS(text, maxSize);
+      messages.push(sms);
+      text = text.slice(sms.length);
+      index += sms.length + 1;
+    }
+    return messages;
+  }
+
+  getSMS(text, maxSize) {
+    let index = 0, currentSize = 0;
+    const maxSizeWithMeta = maxSize - GSM_METADATA_SIZE;
+
+    while (currentSize + this.getCharSize(text[index]) <= maxSizeWithMeta && index < text.length) {
+      currentSize += this.getCharSize(text[index]);
+      index += 1;
+    }
+    if (this.getTextSize(text.slice(index)) + currentSize <= maxSize && text.length - index <= GSM_METADATA_LENGTH) {
+      index = text.length;
+    }
+    return text.slice(0, index);
+  }
+
+  getTextSize(text) {
+    return [...text].map(this.getCharSize, this).reduce(function(sum, c) { return sum + c }, 0);
+  }
+
+  getSizeInBytes() {
+    return Math.ceil(this.getTextSize(this.text) / BYTE_SIZE);
+  }
+
+  getCharSize(character) {
+    if(!character) { return 0; }
+    if (this.isUnicodeRequired()) {
+      return character.length * BYTE_SIZE * 2;
+    } else if (GSM_EXTENDED_CHARS.includes(character)) {
+      return CHARACTER_SIZE * 2;
+    } else {
+      return CHARACTER_SIZE;
+    }
+  }
+}
+
+export default CharacterCounter;

data/lib/nexmo_developer/app/webpacker/javascript/components/feedback/Feedback.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="Vlt-modal__panel">
+    <div class="Vlt-modal__dismiss" v-on:click="reset"></div>
+    <div class="Vlt-modal__header" v-if="!showSteps">
+      <span>Feedback</span>
+      <h4 class="Vlt-modal__title">{{title}}</h4>
+    </div>
+
+    <div class="Vlt-modal__content">
+      <feedback-path v-bind:feedback_path="selectedPath" v-if="showSteps"/>
+      <div v-show="!showSteps" class="paths Vlt-form__element" v-bind:class="{ 'Vlt-form__element--error': hasError }">
+        <div v-for="(path, index) in paths" class="radio-button Vlt-radio">
+          <label :for=index>
+            <span class="Vlt-radio__button">
+              <input name="feedbackPath" type="radio" :id=index :value=index v-model="currentPathIndex">
+              <span class="Vlt-radio__icon"></span>
+            </span>
+            {{path.question}}
+          </label>
+        </div>
+
+        <small v-if="hasError" class="Vlt-form__element__error">This field is required</small>
+        <button class="Vlt-btn Vlt-btn--app Vlt-btn--tertiary Vlt-modal__cancel" v-on:click="reset">Cancel</button>
+        <button class="Vlt-btn Vlt-btn--app Vlt-btn--secondary" v-on:click="onPathSelection">Continue</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import FeedbackPath from './FeedbackPath.vue';
+import eventHub from './eventHub';
+import store from './store';
+
+export default {
+  props: ['paths', 'title', 'source', 'configId', 'codeLanguage'],
+  components: { FeedbackPath },
+  data: function() {
+    return {
+      currentPathIndex: null,
+      selected: false,
+      cancelText: 'Cancel',
+      hasError: false,
+      store: store,
+      programmingLanguage: this.codeLanguage,
+      programmingLanguageSelectedWhilstOnPage: null,
+      programmingLanguageSetByUrl: !!this.codeLanguage
+    }
+  },
+  computed: {
+    showSteps: function() {
+      return this.currentPathIndex !== null && this.selected;
+    },
+    selectedPath: function() {
+      return this.paths[this.currentPathIndex];
+    },
+  },
+  methods: {
+    onPathSelection: function() {
+      if (this.$el.querySelector('input[type="radio"][name="feedbackPath"]:checked') !== null) {
+        this.hasError = false;
+        this.selected = true;
+        store.setPath(this.currentPathIndex);
+        store.setSentiment(this.selectedPath.sentiment);
+        this.createOrUpdateFeedback();
+      } else {
+        this.hasError = true;
+      }
+    },
+    reset: function() {
+      this.selected = false;
+      this.hasError = false;
+      this.currentPathIndex = null;
+      this.createOrUpdateFeedback();
+      store.clearState();
+
+      Array.from(document.getElementsByClassName('Vlt-modal_visible'), function(modal) {
+        modal.classList.remove('Vlt-modal_visible');
+      })
+      document.body.classList.remove('Vlt-body--modal-open');
+      return false;
+    },
+    parameters: function() {
+      return {
+        feedback_feedback: Object.assign(
+          store.toParam(),
+          {
+            code_language: this.programmingLanguage,
+            code_language_selected_whilst_on_page: this.programmingLanguageSelectedWhilstOnPage,
+            code_language_set_by_url: this.programmingLanguageSetByUrl,
+          }
+        ),
+      };
+    },
+    createOrUpdateFeedback: function() {
+      fetch('/feedback/feedbacks', {
+        method: 'POST',
+        credentials: 'same-origin',
+        body: JSON.stringify(this.parameters()),
+        headers: { 'Content-Type': 'application/json' }
+      })
+      .then((response) => {
+        if (response.ok) { return response.json() }
+        return Promise.reject({ message: 'Bad response from server', response })
+      })
+      .then((payload) => {
+        if (this.selected) {
+          store.setFeedbackId(payload.id);
+        }
+      })
+      .catch((error) => {
+        console.log(error)
+      });
+    },
+    handleCodeLanguageChange: function(event) {
+      this.programmingLanguage = event.detail.language;
+      this.programmingLanguageSelectedWhilstOnPage = true;
+      this.programmingLanguageSetByUrl = false;
+    }
+  },
+  mounted: function() {
+    document.addEventListener('codeLanguageChange', this.handleCodeLanguageChange);
+    store.setSource(this.source);
+    store.setConfigId(this.configId);
+    eventHub.$on('reset-modal', this.reset);
+  },
+  beforeDestroy: function() {
+    document.removeEventListener('codeLanguageChange', this.handleCodeLanguageChange.bind(this));
+  }
+}
+</script>
+<style scoped>
+.radio-button {
+  margin-bottom: 11px;
+}
+.Vlt-modal__panel {
+  padding: 0px;
+  width: auto;
+}
+.Vlt-modal__header {
+  padding: 32px 32px 0 32px;
+}
+.Vlt-modal__title {
+  margin: auto;
+  white-space: pre-line;
+}
+.Vlt-modal__content {
+  padding: 0px;
+}
+.paths {
+  padding: 32px;
+  @media only screen and (min-width: 575px) {
+    min-width: 500px;
+  };
+}
+</style>

data/lib/nexmo_developer/app/webpacker/javascript/components/feedback/FeedbackPath.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <step v-show="index === currentStepIndex"
+      v-for="(step, index) in feedback_path.steps"
+      v-bind:step="step"
+      v-bind:last-step="lastStep" />
+  </div>
+</template>
+<script>
+
+import Step from './step/base.vue';
+import eventHub from './eventHub';
+import store from './store';
+
+export default {
+  props: ['feedback_path'],
+  components: { Step },
+  data: function() {
+    return {
+      currentStepIndex: 0
+    };
+  },
+  computed: {
+    currentStep: function() {
+      return this.feedback_path.steps[this.currentStepIndex];
+    },
+    lastStep: function() {
+      return this.currentStepIndex === (this.feedback_path.steps.length - 1);
+    }
+  },
+  methods: {
+    nextStep: function(answer) {
+      this.currentStepIndex += 1;
+      store.addStep(answer);
+      return false;
+    },
+    reset: function() {
+      this.currentStepIndex = 0;
+      return false;
+    }
+  },
+  mounted: function() {
+    eventHub.$on('reset-modal', this.reset);
+    eventHub.$on('next-step', this.nextStep);
+  },
+  beforeDestroy: function() {
+    eventHub.$off('next-step');
+  }
+}
+</script>
+<style scoped>
+.feedback-path {
+  display: flex;
+  flex-direction: column;
+}
+</style>

data/lib/nexmo_developer/app/webpacker/javascript/components/feedback/eventHub.js

@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();

data/lib/nexmo_developer/app/webpacker/javascript/components/feedback/step/FieldSet.vue

@@ -0,0 +1,78 @@
+<template>
+  <fieldset>
+    <div class="Vlt-form-element" v-bind:class="{ 'Vlt-form__element--error': hasError }">
+      <div v-for="field in step.fields">
+        <label class="Vlt-label" v-if="field.label !== undefined">{{field.label}}</label>
+        <div v-if="field.type === 'input'" class="Vlt-input">
+          <input :name="field.name" v-model="$data[field.name]"></input>
+        </div>
+        <div v-else-if="field.type === 'textarea'" class="Vlt-textarea">
+          <textarea :name="field.name" v-model="$data[field.name]" rows="5" :placeholder="field.placeholder"></textarea>
+          <small class="Vlt-form__element__hint" v-if="field.hint !== undefined">{{field.hint}}</small>
+        </div>
+        <div v-else></div>
+      </div>
+
+      <small v-if="hasError"class="Vlt-form__element__error">These fields are required</small>
+      <button v-show="!lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--tertiary Vlt-modal__cancel" v-on:click="reset">Cancel</button>
+      <button v-show="lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--secondary Vlt-modal__cancel" v-on:click="reset">Close</button>
+      <button v-show="!lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--secondary" v-on:click="validate">Continue</button>
+    </div>
+  </fieldset>
+</template>
+<script>
+
+import eventHub from '../eventHub';
+
+export default {
+  props: ['step', 'lastStep'],
+  data: function() {
+    return {
+      name: '',
+      companyName: '',
+      feedback: '',
+      email: '',
+      hasError: false,
+    }
+  },
+  computed: {
+    answer: function() {
+      return {
+        name: this.name,
+        companyName: this.companyName,
+        feedback: this.feedback,
+        email: this.email
+      };
+    }
+  },
+  methods: {
+    resetFields: function() {
+      this.name = '';
+      this.companyName = '';
+      this.feedback = '';
+      this.email = '';
+      this.hasError = false;
+    },
+    validate: function() {
+      if (this.name === '' || this.companyName === '' || this.feedback === '' || this.email === '') {
+        this.hasError = true;
+      } else {
+        this.hasError = false;
+        eventHub.$emit('next-step', this.answer);
+      }
+    },
+    reset: function() {
+      eventHub.$emit('reset-modal');
+    }
+  },
+  mounted: function() {
+    eventHub.$on('reset-modal', this.resetFields);
+  }
+}
+</script>
+<style scoped>
+.content {
+  white-space: pre-line;
+  max-width: 434px;
+}
+</style>