~evanj/cms

ref: 7fc5d7258891c1c58ba07d1e9035517327be7a19 cms/internal/s/tmpl/html/space.html -rw-r--r-- 3.6 KiB
7fc5d725Evan M Jones WIP(*): Project init. 10 months ago
                                                                                
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang=en>

<head>
  <meta charset="utf-8">
  <title>CMS | {{ .Space.Name }}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <style>
    form input, form button { display: block; margin: 5px 0; }
    form div input, form div button { display: inline-block; }
    form > input { margin-top: 10px; }
  </style>

  <main>
    <header>
      <h1>CMS</h1>
      <p>A flexible CMS for everyone.</p>
    </header>
    <hr/>
    <article>

      <nav>
        <a href='/'>Back</a>
      </nav>

      <h1>Space: {{ .Space.Name }}</h1>

      <form method=POST action='/contenttype/new' enctype='multipart/form-data'>
        <legend>Create Content Type:</legend>
        <input required type=hidden name=space value="{{ .Space.ID }}" />
        <input required type=text name=name placeholder="content type name" />
        <div id='first-fieldset'>
          <input required type=text name="field_name_1" placeholder="field name" />
          <select required name="field_type_1">
            <option disabled selected value>Field Type</option>
            <option>String Small</option>
            <option>String Big</option>
            <option>File</option>
            <option>Reference</option>
          </select>
        </div>
        <button id='add-fieldbtn'>Add Another Field</button>
        <input type=submit value=Go />
      </form>

      {{ if .ContentTypes }}
        <form method=POST action='/content/new' enctype='multipart/form-data'>
          <legend>Create Content</legend>
          <input required type=hidden name=space value="{{ .Space.ID }}" />
          <select required name="contenttype">
            <option disabled selected value>Content Type</option>
            {{ range .ContentTypes }}
              <option>{{ .Name }}</option>
            {{ end }}
          </select>
          <input type=submit value=Go />
        </form>
      {{ else }}
        <p>Create Content:</p>
        <p>You haven't created any content types yet. To begin creating content
        you must have at least one content type.</p>
      {{ end }}


      <p>Browse Content By Type:</p>
      {{ if .ContentTypes }}
        TODO
      {{ else }}
        <p>You haven't created any content types yet. To begin browsing content
        content must exist.</p>
      {{ end }}

    </article>
    <hr/>
    <footer>
      <center>© 2015-2020 Evan Jones</center>
    </footer>
  </main>

  <script>
    (function() { 
      var addFieldBtn = document.getElementById('add-fieldbtn')
      var i = 1
      addFieldBtn.addEventListener('click', function(e) { 
        i++
        e.preventDefault()
        e.stopPropagation()
        var el = document.createElement('div')
        el.innerHTML = `
          <div>
            <select required name="field_type_${i}">
              <option disabled selected value>Field Type</option>
              <option>String Small</option>
              <option>String Big</option>
              <option>File</option>
              <option>Reference</option>
            </select>
            <input required type=text name="field_name_${i}" placeholder="field name" />
            <button id='remove-fieldbtn_${i}'>Remove Field</button>
          </div>
        `
        addFieldBtn.parentNode.insertBefore(el, addFieldBtn)
        var removeFieldBtn = document.getElementById(`remove-fieldbtn_${i}`)
        removeFieldBtn.addEventListener('click', function(e) { 
          i--
          e.preventDefault()
          e.stopPropagation()
          el.parentNode.removeChild(el)
        })
      })
    })();
  </script>
</body>

</html>