systemsthinking/tools.html at main · visioninglab/systemsthinking · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tools &amp; Methods — Systems Thinking Competency Explorer</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header class="navbar" id="main-nav"></header>

  <div class="page-header">
    <h1>Tools &amp; Methods</h1>
    <p>Practical tools and methods for applying systems thinking in the built environment.</p>
  </div>

  <div class="container">
    <div id="list-view">
      <div class="card-grid" id="tools-grid"></div>
    </div>

    <div id="detail-view" style="display:none">
      <a href="#" class="back-link" onclick="showList(); return false;">&larr; Back to all tools</a>
      <div class="detail-panel" id="tool-detail"></div>
    </div>
  </div>

  <footer class="footer" id="main-footer"></footer>
  <script src="js/shared.js"></script>
  <script>
    createNavbar('tools');
    createFooter();

    let allData = {};

    async function init() {
      allData = await loadAllData();
      const id = getURLParam('id');
      if (id) showDetail(id); else showList();
    }

    function showList() {
      document.getElementById('list-view').style.display = '';
      document.getElementById('detail-view').style.display = 'none';
      history.replaceState(null, '', 'tools.html');

      document.getElementById('tools-grid').innerHTML = allData.tools.map(t => `
        <div class="card" onclick="showDetail('${t.id}')">
          <h3>${t.name}</h3>
          <p>${t.description.substring(0, 120)}${t.description.length > 120 ? '...' : ''}</p>
        </div>
      `).join('');
    }

    function showDetail(id) {
      const t = getToolById(allData.tools, id);
      if (!t) return showList();

      document.getElementById('list-view').style.display = 'none';
      document.getElementById('detail-view').style.display = '';
      history.replaceState(null, '', `tools.html?id=${id}`);

      const relComps = t.related_competencies
        .map(cid => getCompetencyById(allData.competencies, cid))
        .filter(Boolean)
        .map(c => `<a class="tag" href="competencies.html?id=${c.id}">${c.name}</a>`)
        .join('');

      const useCases = t.use_cases
        .map(u => `<li>${u}</li>`).join('');

      document.getElementById('tool-detail').innerHTML = `
        <h2>${t.name}</h2>
        <p style="margin-top:0.5rem">${t.description}</p>

        <div class="detail-section">
          <h4>Related Competencies</h4>
          <div class="tag-list">${relComps}</div>
        </div>

        <div class="detail-section">
          <h4>Typical Use Cases</h4>
          <ul class="use-case-list">${useCases}</ul>
        </div>
      `;
    }

    init();
  </script>
</body>
</html>