From c34a8673873c84448b3d864173eaf1b2169a0a56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Sun, 24 Nov 2019 21:22:27 +0100
Subject: [PATCH 01/11] Errors active icon name

---
 src/components/Movie.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Movie.vue b/src/components/Movie.vue
index 213f937..ac1b551 100644
--- a/src/components/Movie.vue
+++ b/src/components/Movie.vue
@@ -32,10 +32,8 @@
 
         <!-- SIDEBAR ACTIONS -->
         <div class="movie__actions" v-if="movie">
-
-          <sidebar-list-element :iconRef="'#iconNot_exsits'" :active="matched"
-            :iconRefActive="'#iconExists'" :textActive="'Already in plex 🎉'">
-
+          <sidebar-list-element :iconRef="'#iconNot_exsits'" :active="requested"
+            :iconRefActive="'#iconExists'" :textActive="'Already in plex 🎉'" :class="requested ? 'rotate-180' : null">
             Not yet in plex
           </sidebar-list-element>
           <sidebar-list-element @click="sendRequest" :iconRef="'#iconSent'"
-- 
2.34.1


From 5e33d8cfefa9523745b713e4a658442906d8efcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Sun, 24 Nov 2019 21:22:42 +0100
Subject: [PATCH 02/11] New list element for reporting an issue

---
 src/components/Movie.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Movie.vue b/src/components/Movie.vue
index ac1b551..4a97710 100644
--- a/src/components/Movie.vue
+++ b/src/components/Movie.vue
@@ -36,17 +36,22 @@
             :iconRefActive="'#iconExists'" :textActive="'Already in plex 🎉'" :class="requested ? 'rotate-180' : null">
             Not yet in plex
           </sidebar-list-element>
+
           <sidebar-list-element @click="sendRequest" :iconRef="'#iconSent'"
             :active="requested" :textActive="'Requested to be downloaded'">
-
             Request to be downloaded?
           </sidebar-list-element>
+
           <sidebar-list-element v-if="admin" @click="showTorrents=!showTorrents"
             :iconRef="'#icon_torrents'" :active="showTorrents"
             :supplementaryText="numberOfTorrentResults">
-
             Search for torrents
           </sidebar-list-element>
+
+          <sidebar-list-element @click="reportIssue" :iconRef="null" :active="showIssueForm">
+            &nbsp;⚠️ &nbsp;Report an issue!
+          </sidebar-list-element>
+
           <sidebar-list-element @click="openTmdb" :iconRef="'#icon_info'">
             See more info
           </sidebar-list-element>
-- 
2.34.1


From a5c68ffd8d02acf33543ae94efa8246729a44c6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Sun, 24 Nov 2019 21:24:19 +0100
Subject: [PATCH 03/11] Issue form for submitting an issue. Imported som ui
 elements used in the form

---
 src/components/Movie.vue | 60 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 58 insertions(+), 2 deletions(-)

diff --git a/src/components/Movie.vue b/src/components/Movie.vue
index 4a97710..65b4904 100644
--- a/src/components/Movie.vue
+++ b/src/components/Movie.vue
@@ -96,6 +96,17 @@
             </div>
           </div>
 
+
+
+          <div v-if="showIssueForm" class="issueForm">
+            <h2 class="movie__details-title">Report an issue</h2>
+            <RadioButtons class="issueOptions"
+                          :options="issueOptions"
+                          :value.sync="selectedIssue" />
+            <TextArea title="Additional information" :rows="3"
+                      placeholder="Placeholder text" />
+            <SeasonedButton>Report issue</SeasonedButton>
+          </div>
         </div>
 
         <!-- TODO: change this classname, this is general  -->
@@ -125,12 +136,23 @@ import Person from './Person'
 import SidebarListElement from './ui/sidebarListElem'
 import store from '@/store'
 import LoadingPlaceholder from './ui/LoadingPlaceholder'
+import RadioButtons from './ui/RadioButtons'
+import TextArea from './ui/TextArea'
+import SeasonedButton from './ui/SeasonedButton'
 
 import { getMovie, getShow, request, getRequestStatus } from '@/api'
 
 export default {
   props: ['id', 'type'],
-  components: { TorrentList, Person, LoadingPlaceholder, SidebarListElement },
+  components: {
+    TorrentList,
+    Person,
+    LoadingPlaceholder,
+    SidebarListElement,
+    RadioButtons,
+    TextArea,
+    SeasonedButton
+  },
   directives: { img: img }, // TODO decide to remove or use
   data(){
     return{
@@ -145,7 +167,9 @@ export default {
       requested: false,
       admin: localStorage.getItem('admin'),
       showTorrents: false,
-      compact: false
+      compact: false,
+      showIssueForm: false,
+      selectedIssue: null
     }
   },
   methods: {
@@ -180,6 +204,9 @@ export default {
       const tmdbType = this.type === 'show' ? 'tv' : this.type
       window.location.href = 'https://www.themoviedb.org/' + tmdbType + '/' + this.id
     },
+    reportIssue() {
+      this.showIssueForm = !this.showIssueForm;
+    }
   },
   watch: {
     id: function(val){
@@ -194,6 +221,35 @@ export default {
     numberOfTorrentResults: () => {
       let numTorrents = store.getters['torrentModule/resultCount']
       return numTorrents !== null ? numTorrents + ' results' : null
+    },
+    issueOptions: function() {
+      return [{
+          value: 'playback',
+          text: 'Unable to play'
+        }, {
+          value: 'missing-episode',
+          text: 'Missing Episode',
+          subElements: this.seasonOptions
+        }, {
+          value: 'missing-subtitle',
+          text: 'Missing subtitles'
+        }]
+    },
+    seasonOptions: function() {
+      if (this.movie.type !== 'show') {
+        return []
+      }
+
+      const options = []
+      const length = this.movie.seasons;
+
+      for (var i = 0; i < length; i++) {
+        options.push({
+          value: i+1,
+          text: `Season ${i+1}`
+        })
+      }
+      return options;
     }
   },
   beforeDestroy() {
-- 
2.34.1


From cdf2ddae1c899da7a638b5532d7a4c7337ddd5cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Sun, 24 Nov 2019 21:24:34 +0100
Subject: [PATCH 04/11] Hide movie info when reporting an issue.

---
 src/components/Movie.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Movie.vue b/src/components/Movie.vue
index 65b4904..f87faf6 100644
--- a/src/components/Movie.vue
+++ b/src/components/Movie.vue
@@ -67,14 +67,16 @@
 
         <!-- MOVIE INFO -->
         <div class="movie__info">
-          <div class="movie__description" v-if="movie"> {{ movie.overview }}</div>
 
           <!-- Loading placeholder -->
-          <div v-else class="movie__description">
+          <div v-if="!movie" class="movie__description">
             <loading-placeholder :count="12" />
           </div>
 
-          <div class="movie__details" v-if="movie">
+          <div class="movie__details" v-if="movie && !showIssueForm">
+            <div class="movie__description">
+              {{ movie.overview }}
+            </div>
             <div v-if="movie.year" class="movie__details-block">
               <h2 class="movie__details-title">Release Date</h2>
               <div class="movie__details-text">{{ movie.year }}</div>
-- 
2.34.1


From 53c0aca4602ca36a73fa3ce69f46bec418865287 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Sun, 24 Nov 2019 21:24:58 +0100
Subject: [PATCH 05/11] All of the movie element should have the same
 background- and text color.

---
 src/components/Movie.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Movie.vue b/src/components/Movie.vue
index f87faf6..17fa1a0 100644
--- a/src/components/Movie.vue
+++ b/src/components/Movie.vue
@@ -285,6 +285,9 @@ export default {
 @import "./src/scss/media-queries";
 
 .movie {
+  background-color: $background-color;
+  color: $text-color;
+
   &__wrap {
     display: flex;
     &--header {
@@ -298,9 +301,6 @@ export default {
       @include tablet-min{
         flex-direction: row;
       }
-
-      background-color: $background-color;
-      color: $text-color;
     }
   }
   &__header {
-- 
2.34.1


From 5bc27092316b9f2ca58c7aaeb2532369f047ea36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Sun, 24 Nov 2019 21:25:26 +0100
Subject: [PATCH 06/11] Align movie attributes with flex instead of float

---
 src/components/Movie.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Movie.vue b/src/components/Movie.vue
index 17fa1a0..d435465 100644
--- a/src/components/Movie.vue
+++ b/src/components/Movie.vue
@@ -421,15 +421,19 @@ export default {
       font-size: 13px;
       line-height: 1.8;
       margin-bottom: 20px;
+      flex: 0 0 100%;
+
       @include tablet-min {
         margin-bottom: 30px;
         font-size: 14px;
       }
     }
     &__details {
-      &-block {
-        float: left;
-      }
+      display: flex;
+      width: 100%;
+      flex-direction: row;
+      flex-wrap: wrap;
+
       &-block:not(:last-child) {
         margin-bottom: 20px;
         margin-right: 20px;
-- 
2.34.1


From 5121aec6eecf25570bf25a2b935b907345703cde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Sun, 24 Nov 2019 21:25:40 +0100
Subject: [PATCH 07/11] Issue form styling

---
 src/components/Movie.vue | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/components/Movie.vue b/src/components/Movie.vue
index d435465..9cec538 100644
--- a/src/components/Movie.vue
+++ b/src/components/Movie.vue
@@ -482,4 +482,24 @@ export default {
         }
     }
 }
+
+.issueForm {
+  // padding: 40px;
+
+  .issueOptions {
+    margin-top: 1rem;
+  }
+
+  .seasonOptions {
+    margin-top: 2rem;
+
+    h2 {
+      margin-bottom: 1rem;
+    }
+
+    > :not(h2) {
+      margin-left: 1rem;
+    }
+  }
+}
 </style>
-- 
2.34.1


From 20ad97693941aa1f85736cec5dde64abe2f76594 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Sun, 24 Nov 2019 21:25:58 +0100
Subject: [PATCH 08/11] Increased letter spacing for button text

---
 src/components/ui/SeasonedButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/SeasonedButton.vue b/src/components/ui/SeasonedButton.vue
index 165668a..172f125 100644
--- a/src/components/ui/SeasonedButton.vue
+++ b/src/components/ui/SeasonedButton.vue
@@ -31,7 +31,7 @@ export default {
   font-size: 11px;
   line-height: 2;
   height: 45px;
-  letter-spacing: 0.5px;
+  letter-spacing: 1.2px;
   padding: 5px 20px 4px 20px;
   margin: 0;
   margin-right: 0.3rem;
-- 
2.34.1


From 0a842237781d1fb3abf3490a8301da4080a4bfda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Sun, 24 Nov 2019 21:28:30 +0100
Subject: [PATCH 09/11] sidebar element icon is now optional and added more
 strict styling

---
 src/components/ui/sidebarListElem.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/sidebarListElem.vue b/src/components/ui/sidebarListElem.vue
index de69e41..134cc4e 100644
--- a/src/components/ui/sidebarListElem.vue
+++ b/src/components/ui/sidebarListElem.vue
@@ -1,8 +1,10 @@
 <template>
   <div>
     <a @click="$emit('click')"><li>
-      <figure :class="activeClassIfActive">
-        <svg><use :xlink:href="iconRefNameIfActive"/></svg>
+      <figure :class="activeClassIfActive" v-if="iconRefNameIfActive">
+        <svg class="icon">
+          <use :xlink:href="iconRefNameIfActive"/>
+        </svg>
       </figure>
 
       <span :class="activeClassIfActive">{{ contentTextToDisplay }}</span>
@@ -21,7 +23,7 @@ export default {
   props: {
     iconRef: {
       type: String,
-      required: true
+      required: false
     },
     iconRefActive: {
       type: String,
@@ -44,7 +46,7 @@ export default {
     iconRefNameIfActive() {
       const { iconRefActive, iconRef, active } = this
 
-      if ((iconRefActive && iconRef) & active) {
+      if ((iconRefActive && iconRef) && active) {
         return iconRefActive
       }
       return iconRef
@@ -98,7 +100,7 @@ li {
     text-align: right;
   }
 
-  figure, figure > svg {
+  figure, figure > .icon {
     width: 18px;
     height: 18px;
     margin: 0 7px 0 0;
-- 
2.34.1


From a2c00d929d6dec0938472bb300f3ae7bb8d6d06e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Sun, 24 Nov 2019 21:37:16 +0100
Subject: [PATCH 10/11] Show toast when submitting an issue

---
 src/components/Movie.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Movie.vue b/src/components/Movie.vue
index 9cec538..7c5a7b3 100644
--- a/src/components/Movie.vue
+++ b/src/components/Movie.vue
@@ -48,7 +48,9 @@
             Search for torrents
           </sidebar-list-element>
 
-          <sidebar-list-element @click="reportIssue" :iconRef="null" :active="showIssueForm">
+          <sidebar-list-element @click="showIssueForm = !showIssueForm"
+                                :iconRef="null"
+                                :active="showIssueForm">
             &nbsp;⚠️ &nbsp;Report an issue!
           </sidebar-list-element>
 
@@ -107,7 +109,7 @@
                           :value.sync="selectedIssue" />
             <TextArea title="Additional information" :rows="3"
                       placeholder="Placeholder text" />
-            <SeasonedButton>Report issue</SeasonedButton>
+            <SeasonedButton @click="reportIssue">Report issue</SeasonedButton>
           </div>
         </div>
 
@@ -207,7 +209,13 @@ export default {
       window.location.href = 'https://www.themoviedb.org/' + tmdbType + '/' + this.id
     },
     reportIssue() {
-      this.showIssueForm = !this.showIssueForm;
+      if (this.showIssueForm) {
+        this.$notifications.success({
+          title: 'Issue successfully submitted',
+          description: 'Reported issue: Missing subtitles',
+          timeout: 300000
+        })
+      }
     }
   },
   watch: {
-- 
2.34.1


From 841ee4327ec0ff279c85c220247a4dba984fcc87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Thu, 26 Dec 2019 00:43:10 +0100
Subject: [PATCH 11/11] Ui components for radiobuttons and textarea

---
 src/components/ui/RadioButtons.vue | 133 +++++++++++++++++++++++++++++
 src/components/ui/TextArea.vue     |  79 +++++++++++++++++
 2 files changed, 212 insertions(+)
 create mode 100644 src/components/ui/RadioButtons.vue
 create mode 100644 src/components/ui/TextArea.vue

diff --git a/src/components/ui/RadioButtons.vue b/src/components/ui/RadioButtons.vue
new file mode 100644
index 0000000..988785a
--- /dev/null
+++ b/src/components/ui/RadioButtons.vue
@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <label v-for="option in options" class="radio" @click="selected = option.value">
+      <input type="radio" v-model="selected" :value="option.value" />
+      <label>{{ option.text }}</label>
+
+
+      <div class="sub-radios" v-if="option.subElements && selected === option.value">
+        <label class="radio" v-for="elem in option.subElements">
+          <input type="radio" v-model="selectedSubItem" :value="option.value + '-' + elem.value" />
+          <label>{{ elem.text }}</label>
+        </label>
+      </div>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      required: true
+    },
+    value: {
+      required: false,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      selected: this.value || this.options[0].value,
+      selectedSubItem: null
+    };
+  },
+  beforeMount() {
+    this.handleChange()
+  },
+  watch: {
+    selected() {
+      this.handleChange();
+    }
+  },
+  methods: {
+    handleChange() {
+      if (this.value !== undefined) {
+        this.$emit("update:value", this.selected);
+      } else {
+        this.$emit("changed", this.selected);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables.scss";
+
+$radioSize: 16px;
+$ui-border-width: 2px;
+
+.sub-radios {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 100%;
+  margin-left: 1rem;
+  
+  &:first-of-type {
+    margin-top: 1rem;
+  }
+}
+
+.radio {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-bottom: 14px;
+  width: max-content;
+
+  input[type="radio"] {
+    display: block;
+    opacity: 0;
+
+    + label {
+      position: relative;
+      display: inline-block;
+      cursor: pointer;
+      padding-left: 1.25rem;
+      font-weight: 300;
+
+      &::before {
+        content: "";
+        display: inline-block;
+        position: absolute;
+        left: -($radioSize / 4) * 4;
+        border-radius: 50%;
+        border: $ui-border-width solid $text-color-70;
+        width: $radioSize;
+        height: $radioSize;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        display: inline-block;
+        left: -($radioSize / 4) * 3;
+        top: $radioSize / 4;
+        border-radius: 50%;
+        width: ($radioSize / 4) * 3;
+        height: ($radioSize / 4) * 3;
+      }
+    }
+
+    &:checked,
+    &:hover {
+      + label::after {
+        background-color: $green;
+      }
+      + label::before {
+        border-color: $text-color;
+      }
+    }
+
+    &:focus {
+      + label::before {
+        outline: $ui-border-width solid Highlight;
+        outline-style: auto;
+        outline-color: -webkit-focus-ring-color;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/ui/TextArea.vue b/src/components/ui/TextArea.vue
new file mode 100644
index 0000000..33cdfcc
--- /dev/null
+++ b/src/components/ui/TextArea.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="wrapper">
+    <h3 v-if="title" class="title">{{ title }}</h3>
+    <textarea :placeholder="placeholder" @input="handleInput" v-model="value" :rows="rows" />
+  </div>
+</template>
+
+
+<script>
+
+export default {
+  props: {
+    placeholder: {
+      type: String,
+      required: false
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    rows: {
+      type: Number,
+      required: false,
+      default: 10
+    },
+    value: {
+      type: String,
+      required: false,
+      default: undefined
+    }
+  },
+  methods: {
+    handleInput(event) {
+      if (this.value !== undefined) {
+        this.$emit('update:value', this.value)
+      } else {
+        this.$emit('input', this.value, event)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables.scss";
+
+.wrapper {
+  width: 100%;
+}
+
+.title {
+  margin: 0;
+  font-weight: 400;
+  text-transform: uppercase;
+  font-size: 14px;
+  color: $green;
+  margin-bottom: 0.5rem;
+  @include tablet-min {
+    font-size: 16px;
+  }
+}
+
+textarea {
+  width: 100%;
+  font-size: 14px;
+  padding: 0.5rem;
+  border: 2px solid $text-color-50;
+
+  &:focus {
+    border-color: $text-color;
+
+    outline: none;
+
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+  }
+}
+</style>
-- 
2.34.1