@aarhus-university/au-lib-react-components 10.1.0 → 10.2.0

package/src/layout-2016/components/diagramme/AUDiagrammeComponent.js

@@ -1,309 +1,309 @@
-/* eslint-env browser */
-/* eslint no-mixed-operators: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const diagrammeLabels = {
-  da: {
-    diagramme: {
-      semestre: 'semester',
-      kvarterer: 'quarter',
-      regulation: 'Academic regulations',
-      courseTypes: ['Obligatorisk', 'Valgfag', 'Tilvalg', 'Støttefag'],
-      none: 'Der er ikke oprettet et studiediagram for',
-      select: 'Vælg linje',
-    },
-  },
-  en: {
-    diagramme: {
-      semestre: 'semester',
-      kvarterer: 'kvarter',
-      regulation: 'Studieordning',
-      courseTypes: ['Compulsory', 'Elective', 'Supplementary subject', 'Auxiliary subject'],
-      none: 'No study diagramme has been created for',
-      select: 'Choose track',
-    },
-  },
-};
-
-class AUDiagrammeComponent extends React.PureComponent {
-  static diagrammeParse(data, lang, mode = 'table') {
-    const dataArr = [];
-    if (data.DiagramMetaData.DATA.length > 0) {
-      for (let j = 0; j < data.DiagramMetaData.DATA[0][1]; j += 1) {
-        if (!dataArr[j]) {
-          dataArr.push([]);
-        }
-      }
-
-      data.DiagramStruktur.DATA.forEach((d) => {
-        const periodIndex = d[0]; // rækkefølge af semester/kvarter
-        const orderIndex = d[1]; // rækkefølge i et semester/kvarter
-        for (let k = 0; k < orderIndex; k += 1) {
-          if (!dataArr[periodIndex][k]) {
-            dataArr[periodIndex].push([]);
-          }
-        }
-
-        const rowspan = mode === 'table' ? 1 : d[2]; // lister viser fag, som spænder over flere perioder, i alle perioder - tabeller bruger rowspan
-        const ectsPrPeriod = data.DiagramMetaData.DATA[0][0];
-        const ectsPrCell = 5;
-        for (let i = 0; i < rowspan; i += 1) {
-          dataArr[periodIndex + i][orderIndex] = {
-            courseId: d[3],
-            name: lang === 'da' ? d[6] : d[7],
-            type: d[4].toLowerCase(),
-            colspan: d[5],
-            rowspan: d[2],
-            ects: i > 0 ? 0 : ectsPrPeriod / (ectsPrPeriod / ectsPrCell / d[5]) * d[2],
-            code: d[8],
-            // Fx: 15 ECTS pr. kvarter / 'den samlede colspan'
-            // aka antallet af uddannelser på et givent kvarter / colspan * rowspan
-          };
-        }
-      });
-    }
-    return dataArr;
-  }
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      nodes: [],
-      active: props.track,
-    };
-  }
-
-  componentDidMount() {
-    const { print, response, lang } = this.props;
-    const nodes = new Array(response.lines.length);
-    const promises = [];
-    response.lines.forEach((value, key) => {
-      promises.push(new Promise((resolve) => {
-        const url = `https://eddiprod.au.dk/EDDI/webservices/StudieoversigtService2.cfc?method=GetStudiediagramData&lang=en&allowOrigin=true&linjeid=${value.id}`;
-        fetch(url).then((promise) => promise.json()).then((data) => {
-          const periodType = data.DiagramMetaData.DATA[0] ? data.DiagramMetaData.DATA[0][3] : '';
-          const node = {
-            name: lang === 'da' ? value.name : value.nameEnglish,
-            periodType,
-            table: AUDiagrammeComponent.diagrammeParse(data, lang),
-            list: AUDiagrammeComponent.diagrammeParse(data, lang, 'list'),
-          };
-          nodes[key] = node;
-          resolve(data);
-        });
-      }));
-    });
-    Promise.all(promises).then(() => {
-      this.setState({
-        nodes,
-      }, () => {
-        if (print) {
-          window.print();
-        }
-      });
-    });
-  }
-
-  changeActive(event) {
-    this.setState({
-      active: event.target.value,
-    });
-  }
-
-  render() {
-    const { nodes, active } = this.state;
-    const { course, lang } = this.props;
-
-    if (nodes.length === 0) {
-      return <div />;
-    }
-
-    const { print } = this.props;
-    const kkLinkedExams = `http://kursuskatalog.au.dk/${lang}/linkedexams/`;
-    const kkElectiveGroup = `http://kursuskatalog.au.dk/${lang}/electivegroups/`;
-    const tilvalg = 'http://tilvalg.au.dk';
-
-    const { table, list, name } = nodes[active];
-    const renderRows = table.map((r, i) => {
-      const diaKey = i;
-      const renderCells = r.map((c, j) => {
-        const cellKey = j;
-        if (c.name) {
-          let href = kkLinkedExams + c.courseId;
-          if (c.type === 'tlv') {
-            href = tilvalg;
-          } else if (c.type === 'val' || c.type === 'ogr') {
-            href = kkElectiveGroup + c.code;
-          }
-
-          return (
-            <td key={cellKey} className={c.type} colSpan={c.colspan} rowSpan={c.rowspan}>
-              <a target="_blank" rel="noreferrer noopener" href={href}>
-                {c.name}
-                <br />
-                {`(${c.ects} ECTS)`}
-              </a>
-            </td>
-          );
-        }
-        return null;
-      });
-
-      return (
-        <tr key={diaKey}>
-          <th>
-            {`${i + 1}. `}
-            {diagrammeLabels[lang].diagramme[nodes[active].periodType]}
-          </th>
-          {renderCells}
-        </tr>
-      );
-    });
-
-    const renderList = list.map((l, i) => {
-      const diaKey = i;
-      const renderEducations = l.map((e, j) => {
-        const eduKey = j;
-        if (e.name) {
-          let href = kkLinkedExams + e.courseId;
-          if (e.type === 'tlv') {
-            href = tilvalg;
-          } else if (e.type === 'val' || e.type === 'ogr') {
-            href = kkElectiveGroup + e.code;
-          }
-          return (
-            <p key={eduKey} className={e.type}>
-              <span>
-                <a target="_blank" rel="noreferrer noopener" href={href}>
-                  {e.name}
-                </a>
-              </span>
-              {(() => {
-                if (e.ects > 0) {
-                  return (
-                    <span>
-                      <strong>
-                        {e.ects}
-                      </strong>
-                      {' ECTS'}
-                    </span>
-                  );
-                }
-                return (
-                  <span>
-                    <strong>
-                      &hellip;
-                    </strong>
-                  </span>
-                );
-              })()}
-            </p>
-          );
-        }
-        return null;
-      });
-
-      return (
-        <li key={diaKey}>
-          <h3>
-            {`${i + 1}. `}
-            {diagrammeLabels[lang].diagramme[nodes[active].periodType]}
-          </h3>
-          {renderEducations}
-        </li>
-      );
-    });
-
-    const renderOptions = nodes.map(
-      (node, key) => <option key={node.name} value={key}>{node.name}</option>,
-    );
-
-    return (
-      <div>
-        <h2>{nodes[active].name}</h2>
-        {(() => {
-          if (nodes.length > 1 && !print) {
-            return [
-              <p key={0}>{`${diagrammeLabels[lang].diagramme.select}:`}</p>,
-              <select key={1} onChange={this.changeActive.bind(this)} value={active}>
-                {renderOptions}
-              </select>,
-            ];
-          }
-          return null;
-        })()}
-        {(() => {
-          if (!print) {
-            const printUrl = `${window.location.href}?coursesprint=${course}|${active}`;
-            return (
-              <a
-                className="print"
-                href={printUrl}
-                onClick={(e) => {
-                  e.preventDefault();
-                  window.open(printUrl, '', 'width=1025,height=600');
-                }}
-              >
-                Print
-              </a>
-            );
-          }
-          return null;
-        })()}
-        <div className="study-diagramme hide-for-small-only">
-          {(() => {
-            if (table.length < 1 || list.length < 1) {
-              return <div>{`${diagrammeLabels[lang].diagramme.none} ${name}`}</div>;
-            }
-            return (
-              <table>
-                <tbody>
-                  {renderRows}
-                </tbody>
-              </table>
-            );
-          })()}
-        </div>
-        <div className="study-diagramme list show-for-small-only">
-          {(() => {
-            if (table.length < 1 || list.length < 1) {
-              return <div>{`${diagrammeLabels[lang].diagramme.none} ${name}`}</div>;
-            }
-            return (
-              <ul className="resetlist">
-                {renderList}
-              </ul>
-            );
-          })()}
-        </div>
-        <dl className="au_edutable_legend">
-          <dt className="au_edutable_mandatory">{diagrammeLabels[lang].diagramme.courseTypes[0]}</dt>
-          <dd />
-          <dt className="au_edutable_optional">{diagrammeLabels[lang].diagramme.courseTypes[1]}</dt>
-          <dd />
-          <dt className="au_edutable_supplementary">{diagrammeLabels[lang].diagramme.courseTypes[2]}</dt>
-          <dd />
-          <dt className="au_edutable_support">{diagrammeLabels[lang].diagramme.courseTypes[3]}</dt>
-          <dd />
-        </dl>
-      </div>
-    );
-  }
-}
-
-AUDiagrammeComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  response: PropTypes.shape({
-    lines: PropTypes.arrayOf(PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      nameEnglish: PropTypes.string.isRequired,
-    })).isRequired,
-  }).isRequired,
-  course: PropTypes.string.isRequired,
-  track: PropTypes.string.isRequired,
-  print: PropTypes.bool.isRequired,
-};
-
-AUDiagrammeComponent.displayName = 'AUDiagrammeComponent';
-export default AUDiagrammeComponent;
+/* eslint-env browser */
+/* eslint no-mixed-operators: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const diagrammeLabels = {
+  da: {
+    diagramme: {
+      semestre: 'semester',
+      kvarterer: 'quarter',
+      regulation: 'Academic regulations',
+      courseTypes: ['Obligatorisk', 'Valgfag', 'Tilvalg', 'Støttefag'],
+      none: 'Der er ikke oprettet et studiediagram for',
+      select: 'Vælg linje',
+    },
+  },
+  en: {
+    diagramme: {
+      semestre: 'semester',
+      kvarterer: 'kvarter',
+      regulation: 'Studieordning',
+      courseTypes: ['Compulsory', 'Elective', 'Supplementary subject', 'Auxiliary subject'],
+      none: 'No study diagramme has been created for',
+      select: 'Choose track',
+    },
+  },
+};
+
+class AUDiagrammeComponent extends React.PureComponent {
+  static diagrammeParse(data, lang, mode = 'table') {
+    const dataArr = [];
+    if (data.DiagramMetaData.DATA.length > 0) {
+      for (let j = 0; j < data.DiagramMetaData.DATA[0][1]; j += 1) {
+        if (!dataArr[j]) {
+          dataArr.push([]);
+        }
+      }
+
+      data.DiagramStruktur.DATA.forEach((d) => {
+        const periodIndex = d[0]; // rækkefølge af semester/kvarter
+        const orderIndex = d[1]; // rækkefølge i et semester/kvarter
+        for (let k = 0; k < orderIndex; k += 1) {
+          if (!dataArr[periodIndex][k]) {
+            dataArr[periodIndex].push([]);
+          }
+        }
+
+        const rowspan = mode === 'table' ? 1 : d[2]; // lister viser fag, som spænder over flere perioder, i alle perioder - tabeller bruger rowspan
+        const ectsPrPeriod = data.DiagramMetaData.DATA[0][0];
+        const ectsPrCell = 5;
+        for (let i = 0; i < rowspan; i += 1) {
+          dataArr[periodIndex + i][orderIndex] = {
+            courseId: d[3],
+            name: lang === 'da' ? d[6] : d[7],
+            type: d[4].toLowerCase(),
+            colspan: d[5],
+            rowspan: d[2],
+            ects: i > 0 ? 0 : ectsPrPeriod / (ectsPrPeriod / ectsPrCell / d[5]) * d[2],
+            code: d[8],
+            // Fx: 15 ECTS pr. kvarter / 'den samlede colspan'
+            // aka antallet af uddannelser på et givent kvarter / colspan * rowspan
+          };
+        }
+      });
+    }
+    return dataArr;
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      nodes: [],
+      active: props.track,
+    };
+  }
+
+  componentDidMount() {
+    const { print, response, lang } = this.props;
+    const nodes = new Array(response.lines.length);
+    const promises = [];
+    response.lines.forEach((value, key) => {
+      promises.push(new Promise((resolve) => {
+        const url = `https://eddiprod.au.dk/EDDI/webservices/StudieoversigtService2.cfc?method=GetStudiediagramData&lang=en&allowOrigin=true&linjeid=${value.id}`;
+        fetch(url).then((promise) => promise.json()).then((data) => {
+          const periodType = data.DiagramMetaData.DATA[0] ? data.DiagramMetaData.DATA[0][3] : '';
+          const node = {
+            name: lang === 'da' ? value.name : value.nameEnglish,
+            periodType,
+            table: AUDiagrammeComponent.diagrammeParse(data, lang),
+            list: AUDiagrammeComponent.diagrammeParse(data, lang, 'list'),
+          };
+          nodes[key] = node;
+          resolve(data);
+        });
+      }));
+    });
+    Promise.all(promises).then(() => {
+      this.setState({
+        nodes,
+      }, () => {
+        if (print) {
+          window.print();
+        }
+      });
+    });
+  }
+
+  changeActive(event) {
+    this.setState({
+      active: event.target.value,
+    });
+  }
+
+  render() {
+    const { nodes, active } = this.state;
+    const { course, lang } = this.props;
+
+    if (nodes.length === 0) {
+      return <div />;
+    }
+
+    const { print } = this.props;
+    const kkLinkedExams = `http://kursuskatalog.au.dk/${lang}/linkedexams/`;
+    const kkElectiveGroup = `http://kursuskatalog.au.dk/${lang}/electivegroups/`;
+    const tilvalg = 'http://tilvalg.au.dk';
+
+    const { table, list, name } = nodes[active];
+    const renderRows = table.map((r, i) => {
+      const diaKey = i;
+      const renderCells = r.map((c, j) => {
+        const cellKey = j;
+        if (c.name) {
+          let href = kkLinkedExams + c.courseId;
+          if (c.type === 'tlv') {
+            href = tilvalg;
+          } else if (c.type === 'val' || c.type === 'ogr') {
+            href = kkElectiveGroup + c.code;
+          }
+
+          return (
+            <td key={cellKey} className={c.type} colSpan={c.colspan} rowSpan={c.rowspan}>
+              <a target="_blank" rel="noreferrer noopener" href={href}>
+                {c.name}
+                <br />
+                {`(${c.ects} ECTS)`}
+              </a>
+            </td>
+          );
+        }
+        return null;
+      });
+
+      return (
+        <tr key={diaKey}>
+          <th>
+            {`${i + 1}. `}
+            {diagrammeLabels[lang].diagramme[nodes[active].periodType]}
+          </th>
+          {renderCells}
+        </tr>
+      );
+    });
+
+    const renderList = list.map((l, i) => {
+      const diaKey = i;
+      const renderEducations = l.map((e, j) => {
+        const eduKey = j;
+        if (e.name) {
+          let href = kkLinkedExams + e.courseId;
+          if (e.type === 'tlv') {
+            href = tilvalg;
+          } else if (e.type === 'val' || e.type === 'ogr') {
+            href = kkElectiveGroup + e.code;
+          }
+          return (
+            <p key={eduKey} className={e.type}>
+              <span>
+                <a target="_blank" rel="noreferrer noopener" href={href}>
+                  {e.name}
+                </a>
+              </span>
+              {(() => {
+                if (e.ects > 0) {
+                  return (
+                    <span>
+                      <strong>
+                        {e.ects}
+                      </strong>
+                      {' ECTS'}
+                    </span>
+                  );
+                }
+                return (
+                  <span>
+                    <strong>
+                      &hellip;
+                    </strong>
+                  </span>
+                );
+              })()}
+            </p>
+          );
+        }
+        return null;
+      });
+
+      return (
+        <li key={diaKey}>
+          <h3>
+            {`${i + 1}. `}
+            {diagrammeLabels[lang].diagramme[nodes[active].periodType]}
+          </h3>
+          {renderEducations}
+        </li>
+      );
+    });
+
+    const renderOptions = nodes.map(
+      (node, key) => <option key={node.name} value={key}>{node.name}</option>,
+    );
+
+    return (
+      <div>
+        <h2>{nodes[active].name}</h2>
+        {(() => {
+          if (nodes.length > 1 && !print) {
+            return [
+              <p key={0}>{`${diagrammeLabels[lang].diagramme.select}:`}</p>,
+              <select key={1} onChange={this.changeActive.bind(this)} value={active}>
+                {renderOptions}
+              </select>,
+            ];
+          }
+          return null;
+        })()}
+        {(() => {
+          if (!print) {
+            const printUrl = `${window.location.href}?coursesprint=${course}|${active}`;
+            return (
+              <a
+                className="print"
+                href={printUrl}
+                onClick={(e) => {
+                  e.preventDefault();
+                  window.open(printUrl, '', 'width=1025,height=600');
+                }}
+              >
+                Print
+              </a>
+            );
+          }
+          return null;
+        })()}
+        <div className="study-diagramme hide-for-small-only">
+          {(() => {
+            if (table.length < 1 || list.length < 1) {
+              return <div>{`${diagrammeLabels[lang].diagramme.none} ${name}`}</div>;
+            }
+            return (
+              <table>
+                <tbody>
+                  {renderRows}
+                </tbody>
+              </table>
+            );
+          })()}
+        </div>
+        <div className="study-diagramme list show-for-small-only">
+          {(() => {
+            if (table.length < 1 || list.length < 1) {
+              return <div>{`${diagrammeLabels[lang].diagramme.none} ${name}`}</div>;
+            }
+            return (
+              <ul className="resetlist">
+                {renderList}
+              </ul>
+            );
+          })()}
+        </div>
+        <dl className="au_edutable_legend">
+          <dt className="au_edutable_mandatory">{diagrammeLabels[lang].diagramme.courseTypes[0]}</dt>
+          <dd />
+          <dt className="au_edutable_optional">{diagrammeLabels[lang].diagramme.courseTypes[1]}</dt>
+          <dd />
+          <dt className="au_edutable_supplementary">{diagrammeLabels[lang].diagramme.courseTypes[2]}</dt>
+          <dd />
+          <dt className="au_edutable_support">{diagrammeLabels[lang].diagramme.courseTypes[3]}</dt>
+          <dd />
+        </dl>
+      </div>
+    );
+  }
+}
+
+AUDiagrammeComponent.propTypes = {
+  lang: PropTypes.string.isRequired,
+  response: PropTypes.shape({
+    lines: PropTypes.arrayOf(PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      nameEnglish: PropTypes.string.isRequired,
+    })).isRequired,
+  }).isRequired,
+  course: PropTypes.string.isRequired,
+  track: PropTypes.string.isRequired,
+  print: PropTypes.bool.isRequired,
+};
+
+AUDiagrammeComponent.displayName = 'AUDiagrammeComponent';
+export default AUDiagrammeComponent;