<commit_before><template>
  <div>
    <div id="sidebar">
      <div id="hamburger">
        <div class="icon positive">
          <icon name="bars"></icon>
        </div>
      </div>

      <router-link
        :to="{name: 'dispatch'}">
        <img class="logo" alt="" src="/static/img/drunkenfall.png"/>
      </router-link>

      <div class="content main">
        <div class="tournaments">
          <sidebar-tournament
            class="tournament"
            :tournament="tournament"
            v-for="tournament in tournaments"></sidebar-tournament>
        </div>

        <div v-if="user.isProducer && viewing(['start'])">
          <h1>Actions</h1>
          <div class="actions links">
            <router-link class="action"
              :to="{ name: 'new'}">
              <div class="icon positive">
                <icon name="plus"></icon>
              </div>
              <p>New tournament</p>
              <div class="clear"></div>
            </router-link>

            <a href="/api/facebook/login">
              <div class="icon warning">
                <icon name="facebook"></icon>
              </div>
              <p>Re-facebook</p>
              <div class="clear"></div>
            </a>

            <a @click="clear">
              <div class="icon danger">
                <icon name="trash"></icon>
              </div>
              <p>Clear test tournaments</p>
              <div class="clear"></div>
            </a>
          </div>
        </div>
      </div>

      <div v-if="userLoaded && user.authenticated" class="user">
        <div @click="settings" class="settings">
          <icon name="cog"></icon>
        </div>
        <img @click="profile" :alt="user.firstName" :src="user.avatar"/>

        <div @click="logout" class="logout">
          <icon name="sign-out"></icon>
        </div>

        <h1 id="sidebar-username" :class="user.color">{{user.nick}}</h1>
      </div>

      <div v-if="!viewing(['facebook']) && userLoaded && !user.authenticated" class="content facebook">
        <div class="links">
          <a href="/api/facebook/login">
            <div class="icon">
              <icon name="facebook"></icon>
            </div>
            <p>Sign in</p>
            <div class="clear"></div>
          </a>
        </div>
      </div>

      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
import _ from "lodash"
import Person from '../models/Person.js'
import SidebarTournament from './SidebarTournament'
import DrunkenFallMixin from "../mixin"

export default {
  name: 'Sidebar',
  mixins: [DrunkenFallMixin],
  components: {
    Person,
    SidebarTournament,
  },

  methods: {
    viewing (names) {
      // Returns true if currently viewing any of the route names.
      return _.includes(names, this.$route.name)
    },
    clear (event) {
      let $vue = this
      event.preventDefault()
      return this.$http.get('/api/towerfall/tournament/clear/').then(function (res) {
        console.log(res)
      }, function (res) {
        $vue.$alert("Clearing failed. See console.")
        console.error(res)
        return { tournaments: [] }
      })
    },
    logout () {
      this.user.logout(this)
    },
    settings () {
      this.$router.push("/towerfall/settings")
    },
    profile () {
      this.$router.push(`/towerfall/profile/${this.user.id}`)
    },
  },
  created () {
    document.onkeydown = (e) => {
      if (e.keyCode === 37) {
        let b = document.getElementsByTagName("body")[0]
        if (b.className === "sidebar-less") {
          b.className = ""
        } else {
          b.className = "sidebar-less"
        }
      }
    }
  },
}
</script>

<style lang="scss">
@import "../variables.scss";

#sidebar {
  background-color: #333339;
  transition: 0.5s ease-in-out;
  box-shadow: 4px 0px 4px rgba(0,0,0,0.3);
  user-select: none;
  z-index: 100;
  font-size: 1.3em;

  /* Real devices */
  @media screen and (min-device-width: 770px) {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    font-size: 1.3em;
    width: $sidebar-width;<commit_msg>Set the sidebar to be fixed<commit_after><template>
  <div>
    <div id="sidebar">
      <div id="hamburger">
        <div class="icon positive">
          <icon name="bars"></icon>
        </div>
      </div>

      <router-link
        :to="{name: 'dispatch'}">
        <img class="logo" alt="" src="/static/img/drunkenfall.png"/>
      </router-link>

      <div class="content main">
        <div class="tournaments">
          <sidebar-tournament
            class="tournament"
            :tournament="tournament"
            v-for="tournament in tournaments"></sidebar-tournament>
        </div>

        <div v-if="user.isProducer && viewing(['start'])">
          <h1>Actions</h1>
          <div class="actions links">
            <router-link class="action"
              :to="{ name: 'new'}">
              <div class="icon positive">
                <icon name="plus"></icon>
              </div>
              <p>New tournament</p>
              <div class="clear"></div>
            </router-link>

            <a href="/api/facebook/login">
              <div class="icon warning">
                <icon name="facebook"></icon>
              </div>
              <p>Re-facebook</p>
              <div class="clear"></div>
            </a>

            <a @click="clear">
              <div class="icon danger">
                <icon name="trash"></icon>
              </div>
              <p>Clear test tournaments</p>
              <div class="clear"></div>
            </a>
          </div>
        </div>
      </div>

      <div v-if="userLoaded && user.authenticated" class="user">
        <div @click="settings" class="settings">
          <icon name="cog"></icon>
        </div>
        <img @click="profile" :alt="user.firstName" :src="user.avatar"/>

        <div @click="logout" class="logout">
          <icon name="sign-out"></icon>
        </div>

        <h1 id="sidebar-username" :class="user.color">{{user.nick}}</h1>
      </div>

      <div v-if="!viewing(['facebook']) && userLoaded && !user.authenticated" class="content facebook">
        <div class="links">
          <a href="/api/facebook/login">
            <div class="icon">
              <icon name="facebook"></icon>
            </div>
            <p>Sign in</p>
            <div class="clear"></div>
          </a>
        </div>
      </div>

      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
import _ from "lodash"
import Person from '../models/Person.js'
import SidebarTournament from './SidebarTournament'
import DrunkenFallMixin from "../mixin"

export default {
  name: 'Sidebar',
  mixins: [DrunkenFallMixin],
  components: {
    Person,
    SidebarTournament,
  },

  methods: {
    viewing (names) {
      // Returns true if currently viewing any of the route names.
      return _.includes(names, this.$route.name)
    },
    clear (event) {
      let $vue = this
      event.preventDefault()
      return this.$http.get('/api/towerfall/tournament/clear/').then(function (res) {
        console.log(res)
      }, function (res) {
        $vue.$alert("Clearing failed. See console.")
        console.error(res)
        return { tournaments: [] }
      })
    },
    logout () {
      this.user.logout(this)
    },
    settings () {
      this.$router.push("/towerfall/settings")
    },
    profile () {
      this.$router.push(`/towerfall/profile/${this.user.id}`)
    },
  },
  created () {
    document.onkeydown = (e) => {
      if (e.keyCode === 37) {
        let b = document.getElementsByTagName("body")[0]
        if (b.className === "sidebar-less") {
          b.className = ""
        } else {
          b.className = "sidebar-less"
        }
      }
    }
  },
}
</script>

<style lang="scss">
@import "../variables.scss";

#sidebar {
  background-color: #333339;
  transition: 0.5s ease-in-out;
  box-shadow: 4px 0px 4px rgba(0,0,0,0.3);
  user-select: none;
  z-index: 100;
  font-size: 1.3em;

  /* Real devices */
  @media screen and (min-device-width: 770px) {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    font-size: 1.3em;
    width: $sidebar-width;
{'fraction_non_alphanumeric': 0.17476669494606714, 'fraction_numerical': 0.009453399587928736, 'mean_word_length': 1.8435561681598898, 'pattern_counts': {'":': 0, '<': 181, '<?xml version=': 0, '>': 183, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1182775', 'n_tokens_mistral': 2687, 'n_tokens_neox': 2560, 'n_words': 526}