floorplan/floorplan.html at master · chrisdejager/floorplan · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<head>
  <title>Floorplan</title>
  <link href='http://fonts.googleapis.com/css?family=Permanent+Marker|Merriweather+Sans' rel='stylesheet' type='text/css'>
</head>

<body>
  {{> header}}
  {{> floorplan}}
</body>

<template name="header">
  <header>
    <img src="/q42-logo.svg" alt="Q42">
    <h1>Floorplan</h1>
    <nav id="locations">
      {{#if currentUser}}
        <a class="button add" href="#">Add partner</a>
      {{/if}}
      <a href="#q070" data-location="q070" class="{{selected "q070"}}">Den Haag</a>
      <a href="#q020bg" data-location="q020bg" class="{{selected "q020bg"}}">Amsterdam - begane grond</a>
      <a href="#q020boven" data-location="q020boven" class="{{selected "q020boven"}}">Amsterdam - 1e verdieping</a>
    </nav>
    <div id="login">
      {{loginButtons}}
    </div>
  </header>
  {{#if showCreatePartnerForm}}
    {{> createPartner}}
  {{/if}}
</header>

</template>

<template name="floorplan">
    <div id="qers">
        {{> qers}}
        {{> partners}}
    </div>
    <div id="floorplan">
      <img src="/{{floorplan}}.png" alt="">
    </div>
</template>

<template name="qers">
    {{#each qer}}
        <div title="{{name}}" class="qer {{#if positioning}}positioning{{/if}} {{#if dragging}}dragging{{/if}}" style="{{#if positioning}}-webkit-transform: translateY({{posY}}px) translateX({{posX}}px);{{/if}} background-image: url(http://static.q42.nl/images/employees/{{image}})"></div>
    {{/each}}
</template>

<template name="partners">
  {{#each partner}}
    <div title="{{name}}" class="qer partner {{#if positioning}}positioning{{/if}} {{#if dragging}}dragging{{/if}}" style="{{#if positioning}}top: {{posY}}px; left: {{posX}}px;{{/if}}"><span>{{initials}}</span></div>
  {{/each}}
</template>

<template name="createPartner">
  <div id="createObject" class="partner">
    <form>
      <p>Add someone to the office(s)!</p>
      <p><input type="text" placeholder="Name" id="partner-name"></p>
      <p><input type="submit" value="Add" class="button" id="add"> <input type="reset" value="Cancel" id="cancel"></p>
    </form>
  </div>
</template>