<commit_before>// Import React
import React from "react";

// Import Spectacle Core tags
import {
  Appear,
  BlockQuote,
  Cite,
  CodePane,
  Deck,
  Fill,
  Heading,
  Image,
  Layout,
  Link,
  ListItem,
  List,
  Markdown,
  Quote,
  Slide,
  Spectacle,
  Text
} from "spectacle";

// Import image preloader util
import preloader from "spectacle/lib/utils/preloader";

// Import theme
import createTheme from "spectacle/lib/themes/default";

// Import custom component
import Interactive from "../assets/interactive";

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");

const images = {
  ih: require("../assets/IHZ_150916_master_locations_1.jpg"),
  iha: require("../assets/IHZ_150916_master_locations_3.jpg"),
  ih_logo: require("../assets/IHZ_ect_Logo_white.png"),
  logo: require("../assets/FHNW_HT_10mm.png"),
  ihlogo: require("../assets/151009_MashUp_Banner1.png"),
  coffee: require("../assets/SkillShare.png"),
  garage: require("../assets/IHZ_150916_master_locations_L2.jpg"),
  postit: require("../assets/ImpactWS.png"),
};

preloader(images);

const theme = createTheme({
  primary: "#198caa"
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Spectacle theme={theme}>
        <Deck transition={["slide", "spin"]} transitionDuration={500}>
          <Slide transition={["slide", "spin"]} bgColor="primary">
            {
              //Egal
            }
            <Heading size={1} fit textColor="white">Bachelorthesis - HubApp</Heading>
            <Text textColor="white">Developed with ❤ by Livio and Raphael</Text>
            <Image src={images.logo} width="300" style={{marginTop: 100}} />
          </Slide>
          <Slide bgImage={images.postit} bgDarken={0.3} align="flex-start">
            {
              //Egal
            }
            <Heading size={1} textColor="white">Inhalt</Heading>
            <Layout style={{ marginTop: 40 }}>
              <Fill>
                <Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Impact Hub</Heading>
                <Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Herausforderungen</Heading>
                <Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Demo</Heading>
                <Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Highligts</Heading>
                <Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Reflexion</Heading>
                <Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Ausblick</Heading>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.ih} align="flex-start" bgDarken={0.3} notes=
            "

Vorstellung Impact Hub

Aktuelle Situation im Impact Hub wie man Personen sucht

">
            {
              //Raffi
            }
            <Layout>
              <Fill>
                <Heading fit size={1} textColor="white">Impact Hub</Heading>
              </Fill>
              <Fill>
                <Image src={images.ih_logo} align="flex-start" width="40%" />
              </Fill>
            </Layout>
            <Layout style={{ marginTop: 20 }}>
              <Fill>
                <Text textColor="white" textAlign="left" style={{ paddingRight: 20 }}>
                  Impact Hub hat weltweit über 12000 Mitglieder, davon sind etwa 700 in Zürich.
                </Text>
                <Text textColor="white" textAlign="left" style={{ paddingRight: 20 }}>
                  Zurzeit hat es vier Standorte in Zürich.
                </Text>
                <Text textColor="white" textAlign="left" style={{ paddingRight: 20 }}>
                  Das Suchen von Personen innerhalb der Community findet zurzeit durch Mundpropaganda statt, da bisherige Tools dazu nicht geeignet sind.
                </Text>
              </Fill>
              <Fill>
                <Text textColor="white" textAlign="left" style={{ paddingRight: 20 }}>
                  Dies dauert lange und kostet Ressourcen bei den Mitarbeiter.
                </Text>
                <Text textColor="white" textAlign="left" style={{ paddingRight: 20 }}>
                  Dass soll in Zukunft geändert werden.
                </Text>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.postit} bgDarken={0.3} align="flex-start">
            {
              //Egal
            }
            <Heading size={1} textColor="white">Vorgehen</Heading>
          </Slide>
          <Slide bgImage={images.postit} bgDarken={0.3} align="flex-start">
            {
              //Egal
            }
            <Heading size={1} textColor="white">Analyse</Heading>
          </Slide>
          <Slide bgImage={images.iha} bgDarken={0.5} notes=
            "

Übersicht über die Herausforderungen

Word2Vec: Was es ist, was es kann, wie wir es verwendet hatten

Styling: Erstellen von Guis mit React-Native

Motivation: Design Pattern

Tagging: Repräsentation der Skills als Tag

">
            {
              //Raffi
            }
            <Heading size={1} textColor="white" padding={20} margin={10} style={{ marginBottom: 0 }} bgColor="primary">Herausforderungen</Heading>
            <Layout style={{ marginTop: 0 }}>
              <Fill>
                <Heading size={2} bgColor="primary" style={{ margin: 10, marginRight: 5 }} textColor="white" padding={15}>Word2Vec</Heading>
                <Heading size={2} bgColor="primary" style={{ margin: 10, marginRight: 5 }} textColor="white" padding={15}>Styling</Heading>
              </Fill>
              <Fill>
                <Heading size={2} bgColor="primary" style={{ margin: 10, marginLeft: 5 }} textColor="white" padding={15}>Motivation</Heading>
                <Heading size={2} bgColor="primary" style={{ margin: 10, marginLeft: 5 }} textColor="white" padding={15}>Tagging</Heading>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.iha} align="flex-start" bgDarken={0.5} notes=
            "

Quellen

Java vs. Python

Demo

">
            {
              //Raffi
            }
            <Heading size={1} textColor="white">Word2Vec</Heading>
            <Layout style={{ marginTop: 40 }}>
              <Fill>
                <Text textAlign="left" textColor="white">Das finden einer geeigneten Datenquelle zum lernen.</Text>

                  <Quote textColor="white">
                    Das isch jo wie Google!
                  </Quote>

                    Jana Neumann

              </Fill>
              <Fill>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">LinkedIn</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Xing</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Wikipedia</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">StackExchange</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Google News</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Impact Hub</Heading></Appear>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.iha} align="flex-start" bgDarken={0.5}>
            {
              //Livio
            }
            <Heading size={1} textColor="white">Styling</Heading>
            <Layout style={{ marginTop: 40 }}>
              <Fill>
                <Text textAlign="left" textColor="white">Erstellen von brauchbaren UI-Komponenten.</Text>
              </Fill>
              <Fill>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Tags</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Tagcloud</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Buttons</Heading></Appear>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.iha} align="flex-start" bgDarken={0.5}>
            {
              //Raffi
            }
            <Heading size={1} textColor="white">Motivation</Heading>
            <Layout style={{ marginTop: 40 }}>
              <Fill>
                <Text textAlign="left" textColor="white">Das Design-Pattern von Nir Eyal umfasst vier States.</Text>
              </Fill>
              <Fill>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Trigger</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Action</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Reward</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Investement</Heading></Appear>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.iha} align="flex-start" bgDarken={0.5}>
            {
              //Raffi
            }
            <Heading size={1} textColor="white">Tagging</Heading>
            <Layout style={{ marginTop: 40 }}>
              <Fill>
                <Text textAlign="left" textColor="white">Mit dem Tagging kann man Probleme wie Messy Metadata mithilfe von einfachen Tools lösen.</Text>
              </Fill>
              <Fill>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Suggestions</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Tag Cloud</Heading></Appear>
              </Fill>
            </Layout>
          </Slide>
          <Slide>
            <Heading size={1} fit caps textColor="white">Demo</Heading>
            <Heading size={3} textColor="white" margin={70}>📲</Heading>
          </Slide>
          <Slide bgImage={images.coffee} align="flex-start" bgDarken={0.3}>
            <Heading>Highligts</Heading>
            <Layout style={{ marginTop: 230 }}>
              <Fill>
                <Text textAlign="left" textColor="white">Die Kooperation mit dem Kunden und dessen Mitarbeiter ☕,</Text>
                <Text textAlign="left" textColor="white">sowie die Verwendung von React-Native 🎉.</Text>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.coffee} align="flex-start" bgDarken={0.3}>
            {
              //Livio
            }
            <Heading>React-Native</Heading>
            <Layout style={{ marginTop: 230 }}>
              <Fill>
                <Text textAlign="left" textColor="white">Die Kooperation mit dem Kunden und dessen Mitarbeiter ☕,</Text>
                <Text textAlign="left" textColor="white">sowie die Verwendung von React-Native 🎉.</Text>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.coffee} align="flex-start" bgDarken={0.3}>
            {
              //Raffi
            }
            <Heading>Usertests</Heading>
            <Layout style={{ marginTop: 230 }}>
              <Fill>
                <Text textAlign="left" textColor="white">Die Kooperation mit dem Kunden und dessen Mitarbeiter ☕,</Text>
                <Text textAlign="left" textColor="white">sowie die Verwendung von React-Native 🎉.</Text>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.garage} align="flex-start" bgDarken={0.7}>
            {
              //
            }
            <Heading>Reflexion</Heading>
            <Layout style={{ marginTop: 100 }}>
              <Fill>
                <Text textSize={60} textAlign="left" textColor="white">Langsamer Start des Projektes.</Text>
                <Text textSize={60} textAlign="left" textColor="white">Qualität erster Interviews.</Text>
                <Text textSize={60} textAlign="left" textColor="white">Mitarbeit der Members.</Text>
                <Text textSize={60} textAlign="left" textColor="white">Usability Testing.</Text>
                <Text textSize={60} textAlign="left" textColor="white">Motivation.</Text>
              </Fill>
            </Layout>
          </Slide>
          <Slide>
            {
              //
            }
            <Heading size={1} textColor="white">Ausblick</Heading>
          </Slide>
          <Slide>
            {
              //
            }
            <Heading fit>Fragen?</Heading>
            <Text textSize={30} textColor="white" margin={50}>That's a silly question!</Text>
          </Slide>
        </Deck>
      </Spectacle>
    );
  }
}
<commit_msg>added some more notes<commit_after>// Import React
import React from "react";

// Import Spectacle Core tags
import {
  Appear,
  BlockQuote,
  Cite,
  CodePane,
  Deck,
  Fill,
  Heading,
  Image,
  Layout,
  Link,
  ListItem,
  List,
  Markdown,
  Quote,
  Slide,
  Spectacle,
  Text
} from "spectacle";

// Import image preloader util
import preloader from "spectacle/lib/utils/preloader";

// Import theme
import createTheme from "spectacle/lib/themes/default";

// Import custom component
import Interactive from "../assets/interactive";

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");

const images = {
  ih: require("../assets/IHZ_150916_master_locations_1.jpg"),
  iha: require("../assets/IHZ_150916_master_locations_3.jpg"),
  ih_logo: require("../assets/IHZ_ect_Logo_white.png"),
  logo: require("../assets/FHNW_HT_10mm.png"),
  ihlogo: require("../assets/151009_MashUp_Banner1.png"),
  coffee: require("../assets/SkillShare.png"),
  garage: require("../assets/IHZ_150916_master_locations_L2.jpg"),
  postit: require("../assets/ImpactWS.png"),
};

preloader(images);

const theme = createTheme({
  primary: "#198caa"
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Spectacle theme={theme}>
        <Deck transition={["slide", "spin"]} transitionDuration={500}>
          <Slide transition={["slide", "spin"]} bgColor="primary">
            {
              //Egal
            }
            <Heading size={1} fit textColor="white">Bachelorthesis - HubApp</Heading>
            <Text textColor="white">Developed with ❤ by Livio and Raphael</Text>
            <Image src={images.logo} width="300" style={{marginTop: 100}} />
          </Slide>
          <Slide bgImage={images.postit} bgDarken={0.3} align="flex-start">
            {
              //Egal
            }
            <Heading size={1} textColor="white">Inhalt</Heading>
            <Layout style={{ marginTop: 40 }}>
              <Fill>
                <Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Impact Hub</Heading>
                <Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Herausforderungen</Heading>
                <Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Demo</Heading>
                <Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Highligts</Heading>
                <Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Reflexion</Heading>
                <Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Ausblick</Heading>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.ih} align="flex-start" bgDarken={0.3} notes=
            "

Vorstellung Impact Hub

Aktuelle Situation im Impact Hub wie man Personen sucht

">
            {
              //Raffi
            }
            <Layout>
              <Fill>
                <Heading fit size={1} textColor="white">Impact Hub</Heading>
              </Fill>
              <Fill>
                <Image src={images.ih_logo} align="flex-start" width="40%" />
              </Fill>
            </Layout>
            <Layout style={{ marginTop: 20 }}>
              <Fill>
                <Text textColor="white" textAlign="left" style={{ paddingRight: 20 }}>
                  Impact Hub hat weltweit über 12000 Mitglieder, davon sind etwa 700 in Zürich.
                </Text>
                <Text textColor="white" textAlign="left" style={{ paddingRight: 20 }}>
                  Zurzeit hat es vier Standorte in Zürich.
                </Text>
                <Text textColor="white" textAlign="left" style={{ paddingRight: 20 }}>
                  Das Suchen von Personen innerhalb der Community findet zurzeit durch Mundpropaganda statt, da bisherige Tools dazu nicht geeignet sind.
                </Text>
              </Fill>
              <Fill>
                <Text textColor="white" textAlign="left" style={{ paddingRight: 20 }}>
                  Dies dauert lange und kostet Ressourcen bei den Mitarbeiter.
                </Text>
                <Text textColor="white" textAlign="left" style={{ paddingRight: 20 }}>
                  Dass soll in Zukunft geändert werden.
                </Text>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.postit} bgDarken={0.3} align="flex-start">
            {
              //Egal
            }
            <Heading size={1} textColor="white">Vorgehen</Heading>
          </Slide>
          <Slide bgImage={images.postit} bgDarken={0.3} align="flex-start">
            {
              //Egal
            }
            <Heading size={1} textColor="white">Analyse</Heading>
          </Slide>
          <Slide bgImage={images.iha} bgDarken={0.5} notes=
            "

Übersicht über die Herausforderungen

Word2Vec: Was es ist, was es kann, wie wir es verwendet hatten

Styling: Erstellen von Guis mit React-Native

Motivation: Design Pattern

Tagging: Repräsentation der Skills als Tag

">
            {
              //Raffi
            }
            <Heading size={1} textColor="white" padding={20} margin={10} style={{ marginBottom: 0 }} bgColor="primary">Herausforderungen</Heading>
            <Layout style={{ marginTop: 0 }}>
              <Fill>
                <Heading size={2} bgColor="primary" style={{ margin: 10, marginRight: 5 }} textColor="white" padding={15}>Word2Vec</Heading>
                <Heading size={2} bgColor="primary" style={{ margin: 10, marginRight: 5 }} textColor="white" padding={15}>Styling</Heading>
              </Fill>
              <Fill>
                <Heading size={2} bgColor="primary" style={{ margin: 10, marginLeft: 5 }} textColor="white" padding={15}>Motivation</Heading>
                <Heading size={2} bgColor="primary" style={{ margin: 10, marginLeft: 5 }} textColor="white" padding={15}>Tagging</Heading>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.iha} align="flex-start" bgDarken={0.5} notes=
            "

Quellen

Java vs. Python

Demo: Postman

Funny Quote

">
            {
              //Raffi
            }
            <Heading size={1} textColor="white">Word2Vec</Heading>
            <Layout style={{ marginTop: 40 }}>
              <Fill>
                <Text textAlign="left" textColor="white">Das finden einer geeigneten Datenquelle zum lernen.</Text>

                  <Quote textColor="white">
                    Das isch jo wie Google!
                  </Quote>

                    Jana Neumann

              </Fill>
              <Fill>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">LinkedIn</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Xing</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Wikipedia</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">StackExchange</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Google News</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Impact Hub</Heading></Appear>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.iha} align="flex-start" bgDarken={0.5}>
            {
              //Livio
            }
            <Heading size={1} textColor="white">Styling</Heading>
            <Layout style={{ marginTop: 40 }}>
              <Fill>
                <Text textAlign="left" textColor="white">Erstellen von brauchbaren UI-Komponenten.</Text>
              </Fill>
              <Fill>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Tags</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Tagcloud</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Buttons</Heading></Appear>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.iha} align="flex-start" bgDarken={0.5} notes=
            "

Nir Eyal

Trigger: Person suchen

Action: Suche starten

Reward: Resultate erhalten, Similarity unterstützt dabei

Investment: Angabe von skills, weitere investments notwendig

">
            {
              //Raffi
            }
            <Heading size={1} textColor="white">Motivation</Heading>
            <Layout style={{ marginTop: 40 }}>
              <Fill>
                <Text textAlign="left" textColor="white">Das Design-Pattern von Nir Eyal umfasst vier States.</Text>
              </Fill>
              <Fill>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Trigger</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Action</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Reward</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Investement</Heading></Appear>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.iha} align="flex-start" bgDarken={0.5} notes=
            "

Skills als Tags

Messy Metadata

Suggestions

Tagcloud als Unterstützung

Tags als Button verwenden und weitere Funktionalitäten

">
            {
              //Raffi
            }
            <Heading size={1} textColor="white">Tagging</Heading>
            <Layout style={{ marginTop: 40 }}>
              <Fill>
                <Text textAlign="left" textColor="white">Mit dem Tagging kann man Probleme wie Messy Metadata mithilfe von einfachen Tools lösen.</Text>
              </Fill>
              <Fill>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Suggestions</Heading></Appear>
                <Appear><Heading padding={10} margin={10} size={5} textColor="white" bgColor="primary">Tag Cloud</Heading></Appear>
              </Fill>
            </Layout>
          </Slide>
          <Slide>
            <Heading size={1} fit caps textColor="white">Demo</Heading>
            <Heading size={3} textColor="white" margin={70}>📲</Heading>
          </Slide>
          <Slide bgImage={images.coffee} align="flex-start" bgDarken={0.3}>
            <Heading>Highligts</Heading>
            <Layout style={{ marginTop: 230 }}>
              <Fill>
                <Text textAlign="left" textColor="white">Die Kooperation mit dem Kunden und dessen Mitarbeiter ☕,</Text>
                <Text textAlign="left" textColor="white">sowie die Verwendung von React-Native 🎉.</Text>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.coffee} align="flex-start" bgDarken={0.3}>
            {
              //Livio
            }
            <Heading>React-Native</Heading>
            <Layout style={{ marginTop: 230 }}>
              <Fill>
                <Text textAlign="left" textColor="white">Die Kooperation mit dem Kunden und dessen Mitarbeiter ☕,</Text>
                <Text textAlign="left" textColor="white">sowie die Verwendung von React-Native 🎉.</Text>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.coffee} align="flex-start" bgDarken={0.3} notes=
            "

Lookback ist kostenlos

Lookback braucht keinen Jailbreak

Sendet Aufnahme direkt auf das Dashboard

Verlangsamt die Applikation bei der Aufnahme

im Debug nicht verwenden, nur beim Release

">
            {
              //Raffi
            }
            <Heading>Usertests</Heading>
            <Layout style={{ marginTop: 230 }}>
              <Fill>
                <Text textAlign="left" textColor="white">Die Kooperation mit dem Kunden und dessen Mitarbeiter ☕,</Text>
                <Text textAlign="left" textColor="white">sowie die Verwendung von React-Native 🎉.</Text>
              </Fill>
            </Layout>
          </Slide>
          <Slide bgImage={images.garage} align="flex-start" bgDarken={0.7}>
            {
              //
            }
            <Heading>Reflexion</Heading>
            <Layout style={{ marginTop: 100 }}>
              <Fill>
                <Text textSize={60} textAlign="left" textColor="white">Langsamer Start des Projektes.</Text>
                <Text textSize={60} textAlign="left" textColor="white">Qualität erster Interviews.</Text>
                <Text textSize={60} textAlign="left" textColor="white">Mitarbeit der Members.</Text>
                <Text textSize={60} textAlign="left" textColor="white">Usability Testing.</Text>
                <Text textSize={60} textAlign="left" textColor="white">Motivation.</Text>
              </Fill>
            </Layout>
          </Slide>
          <Slide>
            {
              //
            }
            <Heading size={1} textColor="white">Ausblick</Heading>
          </Slide>
          <Slide>
            {
              //
            }
            <Heading fit>Fragen?</Heading>
            <Text textSize={30} textColor="white" margin={50}>That's a silly question!</Text>
          </Slide>
        </Deck>
      </Spectacle>
    );
  }
}
<|endoftext|>


<commit_before>/*#ifndef(UMD)*/
"use strict";
/*global _GPF_EVENT_END_OF_DATA*/ // gpf.events.EVENT_END_OF_DATA
/*global _gpfA*/ // gpf.attributes
/*global _gpfAttributesAdd*/ // Shortcut for gpf.attributes.add
/*global _gpfDefAttr*/ // gpf.define for attributes
/*global _gpfDefIntrf*/ // gpf.define for interfaces
/*global _gpfErrorDeclare*/ // Declare new gpf.Error names
/*global _gpfEventsFire*/ // gpf.events.fire (internal, parameters must match)
/*global _gpfI*/ // gpf.interfaces
/*global _gpfIgnore*/ // Helper to remove unused parameter warning
/*global _gpfIsArrayLike*/ // Return true if the parameter looks like an array
/*exported _gpfArrayEnumerator*/
/*#endif*/

_gpfErrorDeclare("i_enumerator", {
    enumerableInvalidMember:
        "$Enumerator can be associated to arrays only"
});

/**
 * Enumerable interface
 *
 * @class gpf.interfaces.IEnumerator
 * @extends gpf.interfaces.Interface
 */
_gpfDefIntrf("IEnumerator", {

    /**
     * Sets the enumerator to its initial position, which is *before* the first element in the collection.
     *
     * NOTE once reset has been called, you must call moveNext to access (or not)the first element.
     */
    reset: function () {
    },

    /**
     * Moves the enumerator to the next element of the enumeration.
     *
     * @param {gpf.events.Handler} eventsHandler
     * @return {Boolean}
     * - true if the enumerator was successfully advanced to the next element
     * - false if the enumerator has passed the end of the collection or it has to go through an asynchronous operation
     *
     * NOTE: if no eventsHandler is specified, no asynchronous operation will be triggered when false is returned.
     *
     * @event gpf.events.EVENT_DATA
     * The asynchronous operation succeeded, the current item is available through the current method
     *
     * @event gpf.events.EVENT_END_OF_DATA
     * No more data is available
     */
    "[moveNext]": [gpf.$ClassEventHandler()],
    moveNext: function (eventsHandler) {
        _gpfIgnore(eventsHandler);
        return false;
    },

    /**
     * Gets the current element in the collection.
     *
     * @return {*}
     */
    current: function () {
        return null;
    },

    static: {

        /**
         * Enumerates all elements of the enumerator and call the callback function.
         *
         * NOTE: reset is *not* called.
         *
         * @param {gpf.interfaces.IEnumerator} enumerator
         * @param {Function} callback receive each item of the enumerator, signature is either:
         * - {*} element
         * or
         * - {*} element
         * - {gpf.events.Handler} eventsHandler
         *
         * If the signature supports two parameter, the last one will be used to control the iteration.
         * The callback function has to trigger
         * - gpf.events.EVENT_CONTINUE
         * - gpf.events.EVENT_STOP
         *
         * @param {gpf.events.Handler} eventsHandler
         *
         * @event gpf.events.EVENT_END_OF_DATA
         * No more data is available, the each function terminated
         *
         * @event gpf.events.EVENT_STOPPED
         * The processing function requested to stop enumeration
         */
        // TODO how to put attributes on static members?
        // "[each]": [gpf.$ClassEventHandler()],
        each: function (enumerator, callback, eventsHandler) {
            var iEnumerator = _gpfI.query(enumerator, _gpfI.IEnumerator),
                process;
            function end (event) {
                _gpfEventsFire.apply(enumerator, [event, {}, eventsHandler]);
            }
            if (1 < callback.length) {
                process = function (event) {
                    if (gpf.events.EVENT_CONTINUE === event.type) {
                        if (!iEnumerator.moveNext(process)) {
                            return;
                        }
                    } else if (gpf.events.EVENT_STOP === event.type) {
                        return end(gpf.events.EVENT_STOPPED);
                    } else if (gpf.events.EVENT_DATA !== event.type) {
                        return end(event.type);
                    }
                    callback(iEnumerator.current(), process);
                };
                if (iEnumerator.moveNext(process)) {
                    callback(iEnumerator.current(), process);
                }

            } else {
                process = function (event) {
                    if (gpf.events.EVENT_DATA !== event.type) {
                        return end(event.type);
                    }
                    do {
                        callback(iEnumerator.current());
                    } while (iEnumerator.moveNext(process));
                };
                while (iEnumerator.moveNext(process)) {
                    callback(iEnumerator.current());
                }
            }
        }

    }

});

/**
 * Builds an enumerable interface based on an array
 *
 * @param {Object[]} array Base of the enumeration
 * @return {Object} Object implementing the IEnumerable interface
 */
function _gpfArrayEnumerator(array) {
    var pos = -1;
    return {
        reset: function () {
            pos = -1;
        },
        moveNext: function (eventsHandler) {
            var result;
            ++pos;
            result = pos < array.length;
            if (!result && eventsHandler) {
                _gpfEventsFire.apply(this, [_GPF_EVENT_END_OF_DATA, {}, eventsHandler]);
            }
            return result;
        },
        current: function () {
            if (0 > pos || pos >= array.length) {
                return undefined;
            }
            return array[pos];
        }
    };
}

/**
 * Interface builder that connects to the EnumerableAttribute attribute
 *
 * @param {Object} object
 * @return {Object} Object implementing the IEnumerable interface
 */
function _buildEnumeratorOnObjectArray(object) {
    var attributes = new _gpfA.Map(object).filter(_gpfA.EnumerableAttribute),
        members = attributes.getMembers();
    return _gpfArrayEnumerator(object[members[0]]);
}

/**
 * Extend the class to provide an enumerator interface
 *
 * @class gpf.attributes.EnumerableAttribute
 * @extends gpf.attributes.ClassAttribute
 * @alias gpf.$Enumerable
 */
_gpfDefAttr("$Enumerable", _gpfA.ClassAttribute, {

    "Class": [gpf.$UniqueAttribute(), gpf.$MemberAttribute()],

    // @inheritdoc gpf.attributes.Attribute#_alterPrototype
    _alterPrototype: function (objPrototype) {
        if (!_gpfIsArrayLike(objPrototype[this._member])) {
            throw gpf.Error.enumerableInvalidMember();
        }
        _gpfAttributesAdd(objPrototype.constructor, "Class", [
            new _gpfA.InterfaceImplementAttribute(_gpfI.IEnumerator, _buildEnumeratorOnObjectArray)
        ]);
    }

});
<commit_msg>Eslint fixes<commit_after>/*#ifndef(UMD)*/
"use strict";
/*global _GPF_EVENT_END_OF_DATA*/ // gpf.events.EVENT_END_OF_DATA
/*global _gpfA*/ // gpf.attributes
/*global _gpfAttributesAdd*/ // Shortcut for gpf.attributes.add
/*global _gpfDefAttr*/ // gpf.define for attributes
/*global _gpfDefIntrf*/ // gpf.define for interfaces
/*global _gpfErrorDeclare*/ // Declare new gpf.Error names
/*global _gpfEventsFire*/ // gpf.events.fire (internal, parameters must match)
/*global _gpfI*/ // gpf.interfaces
/*global _gpfIgnore*/ // Helper to remove unused parameter warning
/*global _gpfIsArrayLike*/ // Return true if the parameter looks like an array
/*exported _gpfArrayEnumerator*/
/*#endif*/

_gpfErrorDeclare("i_enumerator", {
    enumerableInvalidMember:
        "$Enumerator can be associated to arrays only"
});

/**
 * Enumerable interface
 *
 * @class gpf.interfaces.IEnumerator
 * @extends gpf.interfaces.Interface
 */
_gpfDefIntrf("IEnumerator", {

    /**
     * Sets the enumerator to its initial position, which is *before* the first element in the collection.
     *
     * NOTE once reset has been called, you must call moveNext to access (or not)the first element.
     */
    reset: function () {
    },

    /**
     * Moves the enumerator to the next element of the enumeration.
     *
     * @param {gpf.events.Handler} eventsHandler
     * @return {Boolean}
     * - true if the enumerator was successfully advanced to the next element
     * - false if the enumerator has passed the end of the collection or it has to go through an asynchronous operation
     *
     * NOTE: if no eventsHandler is specified, no asynchronous operation will be triggered when false is returned.
     *
     * @event gpf.events.EVENT_DATA
     * The asynchronous operation succeeded, the current item is available through the current method
     *
     * @event gpf.events.EVENT_END_OF_DATA
     * No more data is available
     */
    "[moveNext]": [gpf.$ClassEventHandler()],
    moveNext: function (eventsHandler) {
        _gpfIgnore(eventsHandler);
        return false;
    },

    /**
     * Gets the current element in the collection.
     *
     * @return {*}
     */
    current: function () {
        return null;
    },

    static: {

        /**
         * Enumerates all elements of the enumerator and call the callback function.
         *
         * NOTE: reset is *not* called.
         *
         * @param {gpf.interfaces.IEnumerator} enumerator
         * @param {Function} callback receive each item of the enumerator, signature is either:
         * - {*} element
         * or
         * - {*} element
         * - {gpf.events.Handler} eventsHandler
         *
         * If the signature supports two parameter, the last one will be used to control the iteration.
         * The callback function has to trigger
         * - gpf.events.EVENT_CONTINUE
         * - gpf.events.EVENT_STOP
         *
         * @param {gpf.events.Handler} eventsHandler
         *
         * @event gpf.events.EVENT_END_OF_DATA
         * No more data is available, the each function terminated
         *
         * @event gpf.events.EVENT_STOPPED
         * The processing function requested to stop enumeration
         */
        // TODO how to put attributes on static members?
        // "[each]": [gpf.$ClassEventHandler()],
        each: function (enumerator, callback, eventsHandler) {
            var iEnumerator = _gpfI.query(enumerator, _gpfI.IEnumerator),
                process;
            function end (event) {
                _gpfEventsFire.apply(enumerator, [event, {}, eventsHandler]);
            }
            if (1 < callback.length) {
                process = function (event) {
                    if (gpf.events.EVENT_CONTINUE === event.type) {
                        if (!iEnumerator.moveNext(process)) {
                            return;
                        }
                    } else if (gpf.events.EVENT_STOP === event.type) {
                        return end(gpf.events.EVENT_STOPPED);
                    } else if (gpf.events.EVENT_DATA !== event.type) {
                        return end(event.type);
                    }
                    callback(iEnumerator.current(), process);
                };
                if (iEnumerator.moveNext(process)) {
                    callback(iEnumerator.current(), process);
                }

            } else {
                process = function (event) {
                    if (gpf.events.EVENT_DATA !== event.type) {
                        return end(event.type);
                    }
                    do {
                        callback(iEnumerator.current());
                    } while (iEnumerator.moveNext(process));
                };
                while (iEnumerator.moveNext(process)) {
                    callback(iEnumerator.current());
                }
            }
        }

    }

});

/**
 * Builds an enumerable interface based on an array
 *
 * @param {Object[]} array Base of the enumeration
 * @return {Object} Object implementing the IEnumerable interface
 */
function _gpfArrayEnumerator (array) {
    var pos = -1;
    return {
        reset: function () {
            pos = -1;
        },
        moveNext: function (eventsHandler) {
            var result;
            ++pos;
            result = pos < array.length;
            if (!result && eventsHandler) {
                _gpfEventsFire.apply(this, [_GPF_EVENT_END_OF_DATA, {}, eventsHandler]);
            }
            return result;
        },
        current: function () {
            if (0 > pos || pos >= array.length) {
                return undefined;
            }
            return array[pos];
        }
    };
}

/**
 * Interface builder that connects to the EnumerableAttribute attribute
 *
 * @param {Object} object
 * @return {Object} Object implementing the IEnumerable interface
 */
function _buildEnumeratorOnObjectArray (object) {
    var attributes = new _gpfA.Map(object).filter(_gpfA.EnumerableAttribute),
        members = attributes.getMembers();
    return _gpfArrayEnumerator(object[members[0]]);
}

/**
 * Extend the class to provide an enumerator interface
 *
 * @class gpf.attributes.EnumerableAttribute
 * @extends gpf.attributes.ClassAttribute
 * @alias gpf.$Enumerable
 */
_gpfDefAttr("$Enumerable", _gpfA.ClassAttribute, {

    "Class": [gpf.$UniqueAttribute(), gpf.$MemberAttribute()],

    // @inheritdoc gpf.attributes.Attribute#_alterPrototype
    _alterPrototype: function (objPrototype) {
        if (!_gpfIsArrayLike(objPrototype[this._member])) {
            throw gpf.Error.enumerableInvalidMember();
        }
        _gpfAttributesAdd(objPrototype.constructor, "Class", [
            new _gpfA.InterfaceImplementAttribute(_gpfI.IEnumerator, _buildEnumeratorOnObjectArray)
        ]);
    }

});
<|endoftext|>


<commit_before>/*
 * dbKoda - a modern, open source code editor, for MongoDB.
 * Copyright (C) 2017-2018 Southbank Software
 *
 * This file is part of dbKoda.
 *
 * dbKoda is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * dbKoda is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with dbKoda.  If not, see <http://www.gnu.org/licenses/>.
 *
 * @Author: Chris Trott <christrott>
 * @Date:   2017-07-21T09:27:03+10:00
 * @Email:  chris@southbanksoftware.com
 * @Last modified by:   chris
 * @Last modified time: 2017-10-03T15:35:19+11:00
 */

import {action, observable, runInAction, toJS} from 'mobx';
import yaml from 'js-yaml';
import _ from 'lodash';
import {featherClient} from '~/helpers/feathers';
import {NewToaster} from '#/common/Toaster';

export default class Profiles {
  saveDebounced = _.debounce(this.save, 500);
  profilesFilePath;
  @observable profiles = observable.map();

  constructor() {
    if (global.PATHS) {
      this.profilesFilePath = global.PATHS.profilesPath;
    }
  }

  sanitize(profilesList) {
    for (const profile in profilesList) {
      if (Object.prototype.hasOwnProperty.call(profilesList, profile)) {
        profilesList[profile].status = 'CLOSED';
      }
    }
    return profilesList;
  }

  @action.bound
  load() {
    if (!this.profilesFilePath) {
      return;
    }
    this.loading = true;
    // Call controller file get service
    featherClient()
      .service('files')
      .get(this.profilesFilePath)
      .then((file) => {
        runInAction('Apply changes to profiles from yaml file', () => {
          const profileLoad = yaml.safeLoad(file.content);
          if (profileLoad) {
            this.profiles = observable.map(profileLoad);
          }
          this.profiles.observe(this.saveDebounced);
          if (this.loading) {
            runInAction(() => {
              this.loading = false;
            });
          }
          console.log('Profiles loaded successfully!');
        });
      })
      .catch((e) => {
        console.error(e);
        NewToaster.show({
          message: `Reading profiles.yml failed: ${e.message}`,
          className: 'danger',
          iconName: 'pt-icon-thumbs-down',
        });
      });
  }

  @action.bound
  save() {
    if (!this.profilesFilePath) {
      return;
    }
    this.loading = true;
    try {
      const exportProfiles = this.sanitize(toJS(this.profiles));
      return featherClient()
        .service('files')
        .create({
          _id: this.profilesFilePath,
          content: yaml.safeDump(exportProfiles),
          watching: false,
        })
        .then(() => {
          console.log('profiles.yml updated');
          NewToaster.show({
            message: 'profiles.yml successfully updated',
            className: 'success',
            iconName: 'pt-icon-thumbs-up',
          });
          runInAction(() => {
            this.loading = false;
          });
        })
        .catch(console.error);
    } catch (e) {
      console.error(e);
      NewToaster.show({
        message: `Saving profiles.yml failed: ${e.message}`,
        className: 'danger',
        iconName: 'pt-icon-thumbs-down',
      });
    }
  }
}
<commit_msg>Removed "profile.yml updated" toaster<commit_after>/*
 * dbKoda - a modern, open source code editor, for MongoDB.
 * Copyright (C) 2017-2018 Southbank Software
 *
 * This file is part of dbKoda.
 *
 * dbKoda is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * dbKoda is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with dbKoda.  If not, see <http://www.gnu.org/licenses/>.
 *
 * @Author: Chris Trott <christrott>
 * @Date:   2017-07-21T09:27:03+10:00
 * @Email:  chris@southbanksoftware.com
 * @Last modified by:   guiguan
 * @Last modified time: 2018-01-09T10:50:32+11:00
 */

import {action, observable, runInAction, toJS} from 'mobx';
import yaml from 'js-yaml';
import _ from 'lodash';
import {featherClient} from '~/helpers/feathers';
import {NewToaster} from '#/common/Toaster';

export default class Profiles {
  saveDebounced = _.debounce(this.save, 500);
  profilesFilePath;
  @observable profiles = observable.map();

  constructor() {
    if (global.PATHS) {
      this.profilesFilePath = global.PATHS.profilesPath;
    }
  }

  sanitize(profilesList) {
    for (const profile in profilesList) {
      if (Object.prototype.hasOwnProperty.call(profilesList, profile)) {
        profilesList[profile].status = 'CLOSED';
      }
    }
    return profilesList;
  }

  @action.bound
  load() {
    if (!this.profilesFilePath) {
      return;
    }
    this.loading = true;
    // Call controller file get service
    featherClient()
      .service('files')
      .get(this.profilesFilePath)
      .then((file) => {
        runInAction('Apply changes to profiles from yaml file', () => {
          const profileLoad = yaml.safeLoad(file.content);
          if (profileLoad) {
            this.profiles = observable.map(profileLoad);
          }
          this.profiles.observe(this.saveDebounced);
          if (this.loading) {
            runInAction(() => {
              this.loading = false;
            });
          }
          console.log('Profiles loaded successfully!');
        });
      })
      .catch((e) => {
        console.error(e);
        NewToaster.show({
          message: `Reading profiles.yml failed: ${e.message}`,
          className: 'danger',
          iconName: 'pt-icon-thumbs-down',
        });
      });
  }

  @action.bound
  save() {
    if (!this.profilesFilePath) {
      return;
    }
    this.loading = true;
    try {
      const exportProfiles = this.sanitize(toJS(this.profiles));
      return featherClient()
        .service('files')
        .create({
          _id: this.profilesFilePath,
          content: yaml.safeDump(exportProfiles),
          watching: false,
        })
        .then(() => {
          IS_DEVELOPMENT && console.debug('profiles.yml updated');
          runInAction(() => {
            this.loading = false;
          });
        })
        .catch(console.error);
    } catch (e) {
      console.error(e);
      NewToaster.show({
        message: `Saving profiles.yml failed: ${e.message}`,
        className: 'danger',
        iconName: 'pt-icon-thumbs-down',
      });
    }
  }
}
<|endoftext|>


<commit_before>minispade.register('ring', function() {
  RiakControl.PartitionFilter = Ember.Object.extend(),

  RiakControl.Partition = Ember.Object.extend({
    vnodeStatus: function(vnode) {
      var partitionStatus = this.get('status');
      var vnodeReachable = this.get('reachable');
      var vnodeStatus = this.get('vnodes.' + vnode);
      var handoffStatus = this.get('handoffs.' + vnode);

      if(partitionStatus === "incompatible") { return "unknown"; }
      if(handoffStatus) { return "handoff"; }
      if(vnodeStatus === "primary" && vnodeReachable === true) { return "active"; }
      if(vnodeStatus === "fallback") { return "fallback"; }

      return "disabled";
    },

    kvStatus: function() {
      return this.vnodeStatus('riak_kv');
    }.property("vnodes", "handoffs"),

    pipeStatus: function() {
      return this.vnodeStatus('riak_pipe');
    }.property("vnodes", "handoffs"),

    searchStatus: function() {
      return this.vnodeStatus('riak_search');
    }.property("vnodes", "handoffs")
  });

  RiakControl.PartitionFilterController = Ember.ArrayController.extend({
    init: function() {
      this.load();
    },

    load: function() {
      $.ajax({
        url: '/admin/cluster/list',
        dataType: 'json',
        context: this,
        success: function (data) {
          var nodeFilters = data.map(function(item) {
            return RiakControl.PartitionFilter.create({
              type: 'node',
              name: 'Node: ' + item.name,
              value: item.name
            });
          });

          var statusFilters = [
            RiakControl.PartitionFilter.create({
              type: 'vnodes',
              value: 'fallback',
              name: 'Fallback'
            }),
            RiakControl.PartitionFilter.create({
              type: 'handoffs',
              value: '',
              name: 'Handoff'
            })
          ];

          var filters = nodeFilters.concat(statusFilters);
          this.set('content', filters);
        }
      });
    }
  });

  RiakControl.RingController = Ember.ArrayController.extend({
    content: [],

    init: function() {
      this.load();
    },

    load: function() {
      $.ajax({
        url: '/admin/ring/partitions',
        dataType: 'json',
        context: this,
        success: function (data) {
          var partitions = data.partitions.map(function(partition) {
            return RiakControl.Partition.create(partition);
          });

          this.set('content', partitions);
        }
      });
    },

    startInterval: function() {
      this._intervalId = setInterval($.proxy(this.load, this), 1000);
    },

    cancelInterval: function() {
      if(this._intervalId) {
        clearInterval(this._intervalId);
      }
    },

    filteredContent: function() {
      var selectedPartitionFilter = this.get('selectedPartitionFilter');

      if(selectedPartitionFilter) {
        var filterType = selectedPartitionFilter.get('type');
        var filterValue = selectedPartitionFilter.get('value');
        var self = this;
        var filtered;

        if(filterType) {
          if(filterType == 'vnodes') {
            filtered = ['riak_kv', 'riak_search', 'riak_pipe'].map(function(property) {
              return self.get('content').filterProperty('vnodes.' + property, filterValue);
            });

            return filtered.reduce(function(a, b) { return a.concat(b); });
          } else if(filterType == 'handoffs') {
            filtered = ['riak_kv', 'riak_search', 'riak_pipe'].map(function(property) {
              return self.get('content').filter(function(item) {
                if(item.get('handoffs.' + property) === undefined) {
                  return false;
                } else {
                  return true;
                }
              });
            });

            return filtered.reduce(function(a, b) { return a.concat(b); });
          } else {
            return this.get('content').filterProperty(filterType, filterValue);
          }
        } else {
          return this.get('content');
        }
      } else {
        return this.get('content');
      }
    }.property('selectedPartitionFilter', 'content')
  });

  RiakControl.PartitionFilterView = Ember.View.extend({
    templateName: 'partition_filter'
  });

  RiakControl.PartitionFilterSelectView = Ember.Select.extend({
    change: function(ev) {
      RiakControl.get('router').send('filterRing', this.get('selection'));
    }
  });

  RiakControl.RingView = Ember.View.extend({
    templateName: 'ring'
  });

  RiakControl.PartitionView = Ember.CollectionView.extend({
    tagName: 'tbody',

    itemViewClass: Ember.View.extend({
      tagName: 'tr',

      classNames: 'partition',

      lightClasses: "gui-light gray",

      toIndicator: function(status) {
        if(status === "unknown") {
          return "red";
        } else if(status === "unreachable") {
          return "red";
        } else if(status === "fallback") {
          return "blue";
        } else if(status === "handoff") {
          return "orange";
        } else if(status === "active") {
          return "green";
        }
      },

      kvStatus: function() {
        return this.get('content.kvStatus');
      }.property("content"),

      kvIndicator: function() {
        return this.toIndicator(this.get("kvStatus"));
      }.property("kvStatus"),

      pipeStatus: function() {
        return this.get('content.pipeStatus');
      }.property("content"),

      pipeIndicator: function() {
        return this.toIndicator(this.get("pipeStatus"));
      }.property("pipeStatus"),

      searchStatus: function() {
        return this.get('content.searchStatus');
      }.property("content"),

      searchIndicator: function() {
        return this.toIndicator(this.get("searchStatus"));
      }.property("searchStatus")
    })
  });
});
<commit_msg>If no filter is selected, switch to the default filter.<commit_after>minispade.register('ring', function() {
  RiakControl.PartitionFilter = Ember.Object.extend(),

  RiakControl.Partition = Ember.Object.extend({
    vnodeStatus: function(vnode) {
      var partitionStatus = this.get('status');
      var vnodeReachable = this.get('reachable');
      var vnodeStatus = this.get('vnodes.' + vnode);
      var handoffStatus = this.get('handoffs.' + vnode);

      if(partitionStatus === "incompatible") { return "unknown"; }
      if(handoffStatus) { return "handoff"; }
      if(vnodeStatus === "primary" && vnodeReachable === true) { return "active"; }
      if(vnodeStatus === "fallback") { return "fallback"; }

      return "disabled";
    },

    kvStatus: function() {
      return this.vnodeStatus('riak_kv');
    }.property("vnodes", "handoffs"),

    pipeStatus: function() {
      return this.vnodeStatus('riak_pipe');
    }.property("vnodes", "handoffs"),

    searchStatus: function() {
      return this.vnodeStatus('riak_search');
    }.property("vnodes", "handoffs")
  });

  RiakControl.PartitionFilterController = Ember.ArrayController.extend({
    init: function() {
      this.load();
    },

    load: function() {
      $.ajax({
        url: '/admin/cluster/list',
        dataType: 'json',
        context: this,
        success: function (data) {
          var nodeFilters = data.map(function(item) {
            return RiakControl.PartitionFilter.create({
              type: 'node',
              name: 'Node: ' + item.name,
              value: item.name
            });
          });

          var statusFilters = [
            RiakControl.PartitionFilter.create({
              type: 'vnodes',
              value: 'fallback',
              name: 'Fallback'
            }),
            RiakControl.PartitionFilter.create({
              type: 'handoffs',
              value: '',
              name: 'Handoff'
            })
          ];

          var filters = nodeFilters.concat(statusFilters);
          this.set('content', filters);
        }
      });
    }
  });

  RiakControl.RingController = Ember.ArrayController.extend({
    content: [],

    init: function() {
      this.load();
    },

    load: function() {
      $.ajax({
        url: '/admin/ring/partitions',
        dataType: 'json',
        context: this,
        success: function (data) {
          var partitions = data.partitions.map(function(partition) {
            return RiakControl.Partition.create(partition);
          });

          this.set('content', partitions);
        }
      });
    },

    startInterval: function() {
      this._intervalId = setInterval($.proxy(this.load, this), 1000);
    },

    cancelInterval: function() {
      if(this._intervalId) {
        clearInterval(this._intervalId);
      }
    },

    filteredContent: function() {
      var selectedPartitionFilter = this.get('selectedPartitionFilter');

      if(selectedPartitionFilter) {
        var filterType = selectedPartitionFilter.get('type');
        var filterValue = selectedPartitionFilter.get('value');
        var self = this;
        var filtered;

        if(filterType) {
          if(filterType == 'vnodes') {
            filtered = ['riak_kv', 'riak_search', 'riak_pipe'].map(function(property) {
              return self.get('content').filterProperty('vnodes.' + property, filterValue);
            });

            return filtered.reduce(function(a, b) { return a.concat(b); });
          } else if(filterType == 'handoffs') {
            filtered = ['riak_kv', 'riak_search', 'riak_pipe'].map(function(property) {
              return self.get('content').filter(function(item) {
                if(item.get('handoffs.' + property) === undefined) {
                  return false;
                } else {
                  return true;
                }
              });
            });

            return filtered.reduce(function(a, b) { return a.concat(b); });
          } else {
            return this.get('content').filterProperty(filterType, filterValue);
          }
        } else {
          return this.get('content');
        }
      } else {
        return this.get('content');
      }
    }.property('selectedPartitionFilter', 'content')
  });

  RiakControl.PartitionFilterView = Ember.View.extend({
    templateName: 'partition_filter'
  });

  RiakControl.PartitionFilterSelectView = Ember.Select.extend({
    change: function(ev) {
      var selection = this.get('selection');

      if(selection) {
        RiakControl.get('router').send('filterRing', this.get('selection'));
      } else {
        RiakControl.get('router').send('showRing');
      }
    }
  });

  RiakControl.RingView = Ember.View.extend({
    templateName: 'ring'
  });

  RiakControl.PartitionView = Ember.CollectionView.extend({
    tagName: 'tbody',

    itemViewClass: Ember.View.extend({
      tagName: 'tr',

      classNames: 'partition',

      lightClasses: "gui-light gray",

      toIndicator: function(status) {
        if(status === "unknown") {
          return "red";
        } else if(status === "unreachable") {
          return "red";
        } else if(status === "fallback") {
          return "blue";
        } else if(status === "handoff") {
          return "orange";
        } else if(status === "active") {
          return "green";
        }
      },

      kvStatus: function() {
        return this.get('content.kvStatus');
      }.property("content"),

      kvIndicator: function() {
        return this.toIndicator(this.get("kvStatus"));
      }.property("kvStatus"),

      pipeStatus: function() {
        return this.get('content.pipeStatus');
      }.property("content"),

      pipeIndicator: function() {
        return this.toIndicator(this.get("pipeStatus"));
      }.property("pipeStatus"),

      searchStatus: function() {
        return this.get('content.searchStatus');
      }.property("content"),

      searchIndicator: function() {
        return this.toIndicator(this.get("searchStatus"));
      }.property("searchStatus")
    })
  });
});
<|endoftext|>


<commit_before>module.exports = function(context, callback) {
  // context.webhook contains the webhook payload provided by GitHub
  // context.data contains URL query and webtask token parameters
  callback(null, { some: context });
}
<commit_msg>webhook<commit_after>module.exports = function(context, callback) {
  // context.webhook contains the webhook payload provided by GitHub
  // context.data contains URL query and webtask token parameters
  callback(null, { some: context, test:'2' });
}
<|endoftext|>


<commit_before>https://www.npmjs.org/package/bitcoin
require ("bitcoin");
//note: note all commands are supported by all bitcoin clients, but there is enough consistency
//for our purposes and this library allows us to offer extensibility to future maintainers

var coins = require ("./cryptocurrencies.json"); //may need to JSON.parse(coins)

//external call instantiates
function coinProcessing(transaction){
in constructor, open connections to all coin daemons
for each object in coins:
//Should scale to higher loads better than connecting for every tx
    var propertyname = new bitcoin.Client({
      host: 'localhost',
      port: coins.(transaction[index].currency).port,
      user: coins.(transaction[index].currency).rpcusername,
      pass: coins.(transaction[index].currency).rpcpassword,
      timeout: 30000
    });

    function sendTx(){
    //send transaction
        should look something like:
        command                      address                                     amount                                                     comment
        propertyname.sendToAddress  transaction.withdrawals.external_account_id transacton.withdrawals.(convertToNumber)amount "'ripple_transaction_id'"
        propertyname.sendToAddress(transaction.withdrawals.external_account_id, transaction.withdrawals.(convertToNumber)amount, "'ripple_transaction_id'", function(err, txid, resHeaders){
            if (err) return console.log(err);
            console.log('txid:', txid);
        });
    }

is a txid enough to clear the withdrawal? Hm.

    function clearWithdrawal(){
        //clear pending_withdrawal
    };

//withdrawal object example
//http://github.com/ripple/gatewayd#listing-withdrawals
/*{
  "withdrawals": [
    {
      "data": null,
      "id": 79,
      "amount": "1001",
      "currency": "SWD",
      "deposit": false,
      "external_account_id": 6,
      "status": "queued",
      "ripple_transaction_id": 80,
      "createdAt": "2014-05-30T19:23:48.390Z",
      "updatedAt": "2014-05-30T19:23:48.390Z",
      "uid": null
    },
    {
      "data": null,
      "id": 84,
      "amount": "8.5",
      "currency": "SWD",
      "deposit": false,
      "external_account_id": 6,
      "status": "queued",
      "ripple_transaction_id": 85,
      "createdAt": "2014-06-11T00:23:56.992Z",
      "updatedAt": "2014-06-11T00:23:56.992Z",
      "uid": null
    }
  ]

}*/
<commit_msg>I'm sleepy.<commit_after>https://www.npmjs.org/package/bitcoin
require ("bitcoin");
//note: note all commands are supported by all bitcoin clients, but there is enough consistency
//for our purposes and this library allows us to offer extensibility to future maintainers

var coins = require ("./cryptocurrencies.json"); //may need to JSON.parse(coins)

//external call instantiates
function coinProcessing(transaction){
in constructor, open connections to all coin daemons
for each object in coins:
//Should scale to higher loads better than connecting for every tx
    var propertyname = new bitcoin.Client({ //map property names to variable names to call by name later
      host: 'localhost',
      port: coins.(transaction[index].currency).port,
      user: coins.(transaction[index].currency).rpcusername,
      pass: coins.(transaction[index].currency).rpcpassword,
      timeout: 30000
    });

    function sendTx(){
    //send transaction
        should look something like:
        command                      address                                     amount                                                     comment
        propertyname.sendToAddress  transaction.withdrawals.external_account_id transacton.withdrawals.(convertToNumber)amount "'ripple_transaction_id'"
        propertyname.sendToAddress(transaction.withdrawals.external_account_id, transaction.withdrawals.(convertToNumber)amount, "'ripple_transaction_id'", function(err, txid, resHeaders){
            if (err) return console.log(err);
            console.log('txid:', txid);
        });
    }

is a txid enough to clear the withdrawal? Hm.

    function clearWithdrawal(){
        //clear pending_withdrawal
    };

//withdrawal object example
//http://github.com/ripple/gatewayd#listing-withdrawals
/*{
  "withdrawals": [
    {
      "data": null,
      "id": 79,
      "amount": "1001",
      "currency": "SWD",
      "deposit": false,
      "external_account_id": 6,
      "status": "queued",
      "ripple_transaction_id": 80,
      "createdAt": "2014-05-30T19:23:48.390Z",
      "updatedAt": "2014-05-30T19:23:48.390Z",
      "uid": null
    },
    {
      "data": null,
      "id": 84,
      "amount": "8.5",
      "currency": "SWD",
      "deposit": false,
      "external_account_id": 6,
      "status": "queued",
      "ripple_transaction_id": 85,
      "createdAt": "2014-06-11T00:23:56.992Z",
      "updatedAt": "2014-06-11T00:23:56.992Z",
      "uid": null
    }
  ]

}*/
<|endoftext|>


<commit_before>'use strict';

module.exports = (function () {
    console.log(process.cwd());
})();<commit_msg>remove old file<commit_after><|endoftext|>


<commit_before>$(document).ready(function(){

	var Cell = function(x,y){
		this.alive = false;
		this.x = x;
		this.y = y;
	};
	// checks if its alive
	Cell.prototype.alive = function(){
		this.alive;
	};
	// kills cel
	Cell.prototype.kill =function(){
		this.alive = false;
	};
	// revies cell
	Cell.prototype.revive = function(){
		this.alive = true;
	};

// cell = new Cell(5,10);
// console.log(cell.x);
// console.log(cell.y);
// cell.revive();
// console.log(cell.alive);
// cell.kill();
// console.log(cell.alive)

});<commit_msg>add board constructor to js file<commit_after>$(document).ready(function(){

	var Board = function(rows,cols){
		this.rows = rows;
		this.cols = cols;
		this.cellGrid = new Array(rows);
		// creates 2d grid
		for (var i = this.cellGrid.length - 1; i >= 0; i--) {
			this.cellGrid[i] = new Array(cols);
			console.log(i)
		};
		// populates 2d grid
		// TODO look into refactoring into the creation of the the 2d array
		for (var i = this.cellGrid.length - 1; i >= 0; i--) {
			for (var j = this.cellGrid[i].length - 1; j >= 0; j--) {
				this.cellGrid[i][j] = new Cell(i,j);
			};

		};
	};

	Board.prototype.liveNeighbors = function(cell){
		liveNeighborsArray = []
		// neighbor to the north
		if(cell.y > 0){
			canidate = this.cellGrid[cell.y - 1][cell.x];
			if(canidate.alive === true){
				liveNeighborsArray.push(canidate);
			};
		};

		// neighbor to the south
		if(cell.y < this.rows - 1){
			canidate = this.cellGrid[cell.y + 1][cell.x]
			if(canidate.alive === true){
				liveNeighborsArray.push(canidate);
			};
		};

		// neighbor to the east
		if(cell.x < cols - 1){
			canidate = this.cellGrid[cell.y][cell.x + 1]
			if(canidate.alive === true){
				liveNeighborsArray.push(canidate);
			};
		};

		// neighbor to the west
		if (cell.x >0) {
			canidate = this.cellGrid[cell.y][cell.x -1]
			if(canidate.alive === true){
				liveNeighborsArray.push(canidate);
			};
		};

		//  neighbor to the north east
		if (cell.y > 0 && cell.x < cols - 1) {
			canidate = this.cellGrid[cell.y - 1][cell.x + 1]
			if(canidate.alive === true){
				liveNeighborsArray.push(canidate);
			};
		};

		// neighbor to the north west
		if (cell.y > 0 && cell.x > 0) {
			canidate = this.cellGrid[cell.y - 1][cell.x - 1]
			if(canidate.alive === true){
				liveNeighborsArray.push(canidate);
			};
		};

		// neighbor to teh south east
		if (cell.y < this.rows - 1 && cell.x < cols -1) {
			canidate = this.cellGrid[cell.y + 1][cell.x + 1]
			if(canidate.alive === true){
				liveNeighborsArray.push(canidate);
			};
		};

		// neighbor to the south west
		if (cell.y < this.rows - 1 && cell.x > 0) {
			canidate = this.cellGrid[cell.y + 1][cell.x - 1]
			if(canidate.alive === true){
				liveNeighborsArray.push(canidate);
			};
		};

		return liveNeighbors
	};

	Board.prototype.randomolyPopulate = function(){
		tfArray = [true, false];
		var rand = tfArray[Math.floor(Math.random() * tfArray.length)]

		for (var i = this.cellGrid.length - 1; i >= 0; i--) {
			for (var j = this.cellGrid[i].length - 1; j >= 0; j--) {
				this.cellGrid[i][j].alive = rand;
			};
		};
	};

	Board.prototype.liveCount = function(game){
		liveCountArray = []
		for (var i = game.board.cellGrid.length - 1; i >= 0; i--) {
			for (var j = game.board.cellGrid[i].length - 1; j >= 0; j--) {
				if(game.board.cellGrid[i][j].alive === true){
					liveCountArray.push(game.board.cellGrid[i][j]);
				};
			};
		};
		return liveCountArray.length
	};

	Board.prototype.display = function(game){
		// remove class from all
		for (i = 0; i < 10; i++){
			$('.' + i + '').removeClass('active')
		}
		// If cell alive find html grid add active class to display
		for (var i = game.board.cellGrid.length - 1; i >= 0; i--) {
			for (var i = game.board.cellGrid[i].length - 1; i >= 0; i--) {
				cell = game.board.cellGrid[i][j]
				if (cell.alive) {
					$('#' + cell.x + '').find('.' + cell.y + '').addClass('active')
				}
			};

		};
	}

	var Cell = function(x,y){
		this.alive = false;
		this.x = x;
		this.y = y;
	};
	// checks if its alive
	Cell.prototype.alive = function(){
		this.alive;
	};
	// kills cel
	Cell.prototype.kill =function(){
		this.alive = false;
	};
	// revies cell
	Cell.prototype.revive = function(){
		this.alive = true;
	};

// cell = new Cell(5,10);
// console.log(cell.x);
// console.log(cell.y);
// cell.revive();
// console.log(cell.alive);
// cell.kill();
// console.log(cell.alive)

// board = new Board(3,3)
// console.log(board.cellGrid)
// console.log(board.cellGrid[2][0])
// console.log(board.cellGrid[1][1])

});<|endoftext|>


<commit_before>/*global: io: true, $: true, _: true */
/*jshint: browser: true */

// var s = io.connect("127.0.0.1:8888");

// var Listener = function(server) {
//   var s = io.connect(server);

//   this.socket = s;
//   this.tags = [];

//   s.on("hi", function(data) {
//     console.log("From server: " + JSON.stringify(data));
//   });
// };

var createListener = function(server) {
  function removeParams(href) {
    return href.split("?")[0];
  }

  var s = io.connect(server);
  var urlToEl = {};

  var listener = {
    socket: s,
    urlToEl: urlToEl,

    // TODO: Register/unregister urls, with callbacks instead (remote
    // file watching).

    register: function(elements) {
      _.each(elements, function(e) {
        var url = removeParams(e.getAttribute("href"));
        if (url) {
          var el = urlToEl[url];
          if (!el) {
            el = urlToEl[url] = e;
          }
        }
      });

      s.emit("register", {
        urls: _.keys(urlToEl)
      });
    },

    unregister: function(elements) {
      var urls = _.map(elements, function(e) {
        return removeParams(e.getAttribute("href"));
      });

      _.each(urls, function(url) {
        delete urlToEl[url];
      });

      s.emit("unregister", {
        urls: urls
      });
    }
  };

  s.on("hi", function(data) {
    console.log("From server: " + JSON.stringify(data));
    listener.register(_.values(urlToEl));
  });

  s.on("change", function(data) {
    var url = data.url;
    var el = urlToEl[url];
    // Reload
    if (el) {
      // TODO: Randomize?
      var date = new Date();
      url = url + "?ts=" + encodeURIComponent(date);
      el.setAttribute("href", url);
      // console.log("change:" + url + "?ts=" + date);
    }
  });

  return listener;
};

$(function() {
  window.l = createListener(window.location.hostname + ":8888")
    .register($("link[href^='/css/rf.css']"));
});
<commit_msg>clean up client js, using config<commit_after>/*global: io: true, $: true, _: true */

// XXX: Remove jQuery & underscore dependencies

var css_sync = css_sync || {};

(function(io, $, _) {
  var createListener = function(server) {
    function removeParams(href) {
      return href.split("?")[0];
    }

    var s = io.connect(server);
    var urlToEl = {};

    var listener = {
      socket: s,
      urlToEl: urlToEl,

      // TODO: Register/unregister urls, with callbacks instead (remote
      // file watching).

      register: function(elements) {
        _.each(elements, function(e) {
          var url = removeParams(e.getAttribute("href"));
          if (url) {
            var el = urlToEl[url];
            if (!el) {
              el = urlToEl[url] = e;
            }
          }
        });

        s.emit("register", {
          urls: _.keys(urlToEl)
        });

        return this;
      },

      unregister: function(elements) {
        var urls = _.map(elements, function(e) {
          return removeParams(e.getAttribute("href"));
        });

        _.each(urls, function(url) {
          delete urlToEl[url];
        });

        s.emit("unregister", {
          urls: urls
        });

        return this;
      }
    };

    s.on("hi", function(data) {
      console.log("From server: " + JSON.stringify(data));
      listener.register(_.values(urlToEl));
    });

    s.on("change", function(data) {
      var url = data.url;
      var el = urlToEl[url];
      // Reload
      if (el) {
        // TODO: Randomize?
        var date = new Date();
        url = url + "?ts=" + encodeURIComponent(date);
        el.setAttribute("href", url);
        // console.log("change:" + url + "?ts=" + date);
      }
    });

    return listener;
  };

  $.extend(css_sync, {
    createListener: createListener
  });
  _.defaults(css_sync, {
    config: {
      links: [],                // css link elements whose changes we are interested in
      hostname: "",
      port: 8888
    }
  });

  // Start registering
  $(function() {
    var c = css_sync.config;
    var links = c.links;
    var host = c.hostname + ":" + c.port;

    $.extend(css_sync, {
      listener: createListener(host).register(links)
    });
  });

}(io, jQuery, _));

<|endoftext|>


<commit_before>/*!
 * SVG.js Connectable Plugin
 * =========================
 *
 * For connecting SVG things.
 * Created with <3 and JavaScript by the jillix developers.
 *
 * Licensed under the MIT license.
 * */
;(function() {

    var container = null;
    var markers = null;

    /**
     * connectable
     * Connects two elements.
     *
     * @name connectable
     * @function
     * @param {Object} options An object containing the following fields:
     *
     *  - `container` (SVGElement): The line elements container.
     *  - `markers` (SVGElement): The marker elements container.
     *
     * @param {SVGElement} elmTarget The target SVG element.
     * @return {Object} The connectable object containing:
     *
     *  - `source` (SVGElement): The source element.
     *  - `target` (SVGElement): The target element.
     *  - `line` (SVGElement): The line element.
     *  - `marker` (SVGElement): The marker element.
     *  - [`computeLineCoordinates` (Function)](#concomputeLineCoordinatescon)
     *  - [`update` (Function)](#update)
     *  - [`setLineColor` (Function)](#setlinecolorcolor-c)
     */
    function connectable(options, elmTarget) {

        var con = {};

        if (elmTarget === undefined) {
            elmTarget = options;
            options = {};
        }

        container = options.container || container;
        var elmSource = this;
        markers = options.markers || markers;

        var marker = markers.marker(10, 10);
        var markerId = "triangle-" + Math.random().toString(16);
        var line = container.line().attr("marker-end", "url(#" + markerId + ")");

        marker.attr({
            id: markerId,
            viewBox: "0 0 10 10",
            refX: "0",
            refY: "5",
            markerUnits: "strokeWidth",
            markerWidth: "4",
            markerHeight: "5"
        });

        marker.path().attr({
            d: "M 0 0 L 10 5 L 0 10 z"
        });

        // Source and target positions
        var sPos = {};
        var tPos = {};

        // Append the SVG elements
        con.source = elmSource;
        con.target = elmTarget;
        con.line = line;
        con.marker = marker;

        /**
         * computeLineCoordinates
         * The function that computes the new coordinates.
         * It can be overriden with a custom function.
         *
         * @name computeLineCoordinates
         * @function
         * @param {Connectable} con The connectable instance.
         * @return {Object} An object containing the following fields:
         */
        con.computeLineCoordinates = function (con) {

            var sPos = con.source.transform();
            var tPos = con.target.transform();

            var x1 = sPos.x;
            var y1 = sPos.y;
            var x2 = tPos.x;
            var y2 = tPos.y;

            return {
                x1: x1,
                y1: y1,
                x2: x2,
                y2: y2
            };
        };

        elmSource.cons = elmSource.cons || [];
        elmSource.cons.push(con);

        /**
         * update
         * Updates the line coordinates.
         *
         * @name update
         * @function
         * @return {undefined}
         */
        con.update = function () {
            line.attr(con.computeLineCoordinates(con));
        };
        con.update();
        elmSource.on("dragmove", con.update);
        elmTarget.on("dragmove", con.update);

        /**
         * setLineColor
         * Sets the line color.
         *
         * @name setLineColor
         * @function
         * @param {String} color The new color.
         * @param {Connectable} c The connectable instance.
         * @return {undefined}
         */
        con.setLineColor = function (color, c) {
            c = c || this;
            c.line.stroke(color);
            c.marker.fill(color);
        };

        return con;
    }

    SVG.extend(SVG.Element, {
        connectable: connectable
    });
}).call(this);
<commit_msg>Updated the description<commit_after>/*!
 * SVG.js Connectable Plugin
 * =========================
 *
 * A JavaScript library for connecting SVG things.
 * Created with <3 and JavaScript by the jillix developers.
 *
 * Licensed under the MIT license.
 * */
;(function() {

    var container = null;
    var markers = null;

    /**
     * connectable
     * Connects two elements.
     *
     * @name connectable
     * @function
     * @param {Object} options An object containing the following fields:
     *
     *  - `container` (SVGElement): The line elements container.
     *  - `markers` (SVGElement): The marker elements container.
     *
     * @param {SVGElement} elmTarget The target SVG element.
     * @return {Object} The connectable object containing:
     *
     *  - `source` (SVGElement): The source element.
     *  - `target` (SVGElement): The target element.
     *  - `line` (SVGElement): The line element.
     *  - `marker` (SVGElement): The marker element.
     *  - [`computeLineCoordinates` (Function)](#concomputeLineCoordinatescon)
     *  - [`update` (Function)](#update)
     *  - [`setLineColor` (Function)](#setlinecolorcolor-c)
     */
    function connectable(options, elmTarget) {

        var con = {};

        if (elmTarget === undefined) {
            elmTarget = options;
            options = {};
        }

        container = options.container || container;
        var elmSource = this;
        markers = options.markers || markers;

        var marker = markers.marker(10, 10);
        var markerId = "triangle-" + Math.random().toString(16);
        var line = container.line().attr("marker-end", "url(#" + markerId + ")");

        marker.attr({
            id: markerId,
            viewBox: "0 0 10 10",
            refX: "0",
            refY: "5",
            markerUnits: "strokeWidth",
            markerWidth: "4",
            markerHeight: "5"
        });

        marker.path().attr({
            d: "M 0 0 L 10 5 L 0 10 z"
        });

        // Source and target positions
        var sPos = {};
        var tPos = {};

        // Append the SVG elements
        con.source = elmSource;
        con.target = elmTarget;
        con.line = line;
        con.marker = marker;

        /**
         * computeLineCoordinates
         * The function that computes the new coordinates.
         * It can be overriden with a custom function.
         *
         * @name computeLineCoordinates
         * @function
         * @param {Connectable} con The connectable instance.
         * @return {Object} An object containing the following fields:
         */
        con.computeLineCoordinates = function (con) {

            var sPos = con.source.transform();
            var tPos = con.target.transform();

            var x1 = sPos.x;
            var y1 = sPos.y;
            var x2 = tPos.x;
            var y2 = tPos.y;

            return {
                x1: x1,
                y1: y1,
                x2: x2,
                y2: y2
            };
        };

        elmSource.cons = elmSource.cons || [];
        elmSource.cons.push(con);

        /**
         * update
         * Updates the line coordinates.
         *
         * @name update
         * @function
         * @return {undefined}
         */
        con.update = function () {
            line.attr(con.computeLineCoordinates(con));
        };
        con.update();
        elmSource.on("dragmove", con.update);
        elmTarget.on("dragmove", con.update);

        /**
         * setLineColor
         * Sets the line color.
         *
         * @name setLineColor
         * @function
         * @param {String} color The new color.
         * @param {Connectable} c The connectable instance.
         * @return {undefined}
         */
        con.setLineColor = function (color, c) {
            c = c || this;
            c.line.stroke(color);
            c.marker.fill(color);
        };

        return con;
    }

    SVG.extend(SVG.Element, {
        connectable: connectable
    });
}).call(this);
<|endoftext|>