From c377e43f377bd257bb0f203e2919296f5e6e3585 Mon Sep 17 00:00:00 2001 From: sarah-fidahussain-SLU Date: Sun, 15 Sep 2024 18:30:30 -0500 Subject: [PATCH 01/11] implemented function to extract project id from query string and hash --- components/classroom/index.html | 29 +++++++++++++++++++++++++++++ components/classroom/project.js | 16 ++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 components/classroom/index.html create mode 100644 components/classroom/project.js diff --git a/components/classroom/index.html b/components/classroom/index.html new file mode 100644 index 0000000..f47b912 --- /dev/null +++ b/components/classroom/index.html @@ -0,0 +1,29 @@ + + + + + + + Classroom Page + + + +

Classroom Group Management

+

Project ID:

+ + + + + + + + + diff --git a/components/classroom/project.js b/components/classroom/project.js new file mode 100644 index 0000000..7418f8f --- /dev/null +++ b/components/classroom/project.js @@ -0,0 +1,16 @@ +// function extracts projectID from URL of the page +function getProjectIDFromURL() { + const params = new URLSearchParams(window.location.search); + let projectId = params.get('projectId'); + console.log(projectId); + + if (!projectId) { + const hash = window.location.hash; + projectId = hash.substring(1); + console.log(projectId); + return projectId + } + else { + return projectId + } +} \ No newline at end of file From 3d87b9e6ce032075415f0f661dfbfc69a3109ff0 Mon Sep 17 00:00:00 2001 From: Camille Daugherty Date: Sun, 15 Sep 2024 20:37:46 -0500 Subject: [PATCH 02/11] issue 5 sprint 1 push --- _site/default-transcribe/index.html | 12 ----- _site/default-transcribe/main.js | 20 -------- _site/default-transcribe/manifest.json | 15 ------ components/classroom/index.html | 34 +++++++++++++ components/classroom/styles.css | 69 ++++++++++++++++++++++++++ 5 files changed, 103 insertions(+), 47 deletions(-) delete mode 100644 _site/default-transcribe/index.html delete mode 100644 _site/default-transcribe/main.js delete mode 100644 _site/default-transcribe/manifest.json create mode 100644 components/classroom/index.html create mode 100644 components/classroom/styles.css diff --git a/_site/default-transcribe/index.html b/_site/default-transcribe/index.html deleted file mode 100644 index ffbd1fb..0000000 --- a/_site/default-transcribe/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - TPEN Transcription - - - - - - diff --git a/_site/default-transcribe/main.js b/_site/default-transcribe/main.js deleted file mode 100644 index 2da0580..0000000 --- a/_site/default-transcribe/main.js +++ /dev/null @@ -1,20 +0,0 @@ -// custom element named 'tpen-transcription' with a custom template built from the querystring 'projectID' parameter -class TpenTranscriptionElement extends HTMLElement { - constructor() { - super(); - this.attachShadow({ mode: 'open' }); - } - - connectedCallback() { - const projectID = new URLSearchParams(window.location.search).get('projectID'); - if (projectID) { - this.fetchProject(projectID); - } - } - - fetchProject(projectID) { - fetch(`/transcriptions/${projectID}`) - .then(response => response.json()) - } -} - diff --git a/_site/default-transcribe/manifest.json b/_site/default-transcribe/manifest.json deleted file mode 100644 index 0e33420..0000000 --- a/_site/default-transcribe/manifest.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "defaultTranscribe", - "version": "0.0.1", - "description": "The basic transcription module for TPEN 3, based on the https:/t-pen.org/TPEN/transcription.html document", - "keywords": [ - "transcription", - "rectilinear", - "plaintext", - "default" - ], - "indexPage": "index.html", - "author": "cubap@slu.edu", - "license": "MIT", - "dependencies": {} -} diff --git a/components/classroom/index.html b/components/classroom/index.html new file mode 100644 index 0000000..dafc8e1 --- /dev/null +++ b/components/classroom/index.html @@ -0,0 +1,34 @@ + + + + + + "TPEN Classroom Interface: Home" + + +
+

TPEN Classroom Interface

+
+
+ + +
+ +
+

Welcome!

+

text

+
+ +
+

TPEN Classroom Interface

+
+ + + \ No newline at end of file diff --git a/components/classroom/styles.css b/components/classroom/styles.css new file mode 100644 index 0000000..0e63dfe --- /dev/null +++ b/components/classroom/styles.css @@ -0,0 +1,69 @@ +html{ + margin: 0; + padding: 0; +} + +body { + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + background-color: rgb(240, 241, 241); + margin: 0; + padding: 0; +} + +.header { + padding: 30px; + text-align: center; + background: #516059; + color: white; + } + + +.header h1 { + font-size: 30px; + } + + +.navbar { + float: left; + background: #ccc; + padding: 20px; + width: 150px; + +} + +.navbar ul { + list-style-type: none; + margin: 0; + padding: 0; + height: 100%; + position: fixed; +} + +li a { + display: block; + color: #000; + padding: 10px 0; + text-align: center; + text-decoration: none; + width: 100%; + box-sizing: border-box; +} + +li a:hover { + background-color: #ddd; + color: #516059; +} + +.main{ + text-align: center; +} + +footer{ + padding: 10px ; + text-align: center; + background: #516059; + color: white; + position:fixed; + bottom:0; + width: 100%; + } \ No newline at end of file From 8016be981f7f0bca7dc6aa6d58a963082176d670 Mon Sep 17 00:00:00 2001 From: Matthew Clendenning <124844665+Matthew-Clendenning@users.noreply.github.com> Date: Sun, 15 Sep 2024 22:59:21 -0500 Subject: [PATCH 03/11] sprint 1 issue 6 resolved --- components/classroom/index.html | 64 +++++++++------ components/classroom/menutoggle.js | 25 ++++++ components/classroom/styles.css | 126 +++++++++++++++++++++++------ 3 files changed, 167 insertions(+), 48 deletions(-) create mode 100644 components/classroom/menutoggle.js diff --git a/components/classroom/index.html b/components/classroom/index.html index dafc8e1..9b7797d 100644 --- a/components/classroom/index.html +++ b/components/classroom/index.html @@ -3,32 +3,50 @@ + "TPEN Classroom Interface: Home" - -
-

TPEN Classroom Interface

-
-
- - -
- -
-

Welcome!

-

text

+ +
+

TPEN Classroom Interface

+
+ ☰ +
+ + +
+

Welcome!

+
+

Sign Up/In

+
+
+ + +
+
+ + +
+
+ +
+
-
-

TPEN Classroom Interface

-
+
+

TPEN Classroom Interface

+
- + + \ No newline at end of file diff --git a/components/classroom/menutoggle.js b/components/classroom/menutoggle.js new file mode 100644 index 0000000..78a0997 --- /dev/null +++ b/components/classroom/menutoggle.js @@ -0,0 +1,25 @@ +function toggleMenu() { + var navbar = document.getElementById("navbar"); + if (navbar.className === "navbar") { + navbar.className += " responsive"; + } else { + navbar.className = "navbar"; + } +} + +// Function to display login alert +function loginAlert() { + const username = document.getElementById("username").value; + if (username) { + alert("Welcome Back " + username + "!"); + } +} + +// Event listener for the login button +document.addEventListener("DOMContentLoaded", function() { + const loginButton = document.querySelector(".submit-button"); + loginButton.addEventListener("click", function(event) { + event.preventDefault(); // Prevent form submission + loginAlert(); + }); +}); \ No newline at end of file diff --git a/components/classroom/styles.css b/components/classroom/styles.css index 0e63dfe..bffd7d9 100644 --- a/components/classroom/styles.css +++ b/components/classroom/styles.css @@ -1,6 +1,11 @@ -html{ - margin: 0; +* { + box-sizing: border-box; +} + +*::before, *::after { padding: 0; + margin: 0; + box-sizing: border-box; } body { @@ -8,62 +13,133 @@ body { background-color: rgb(240, 241, 241); margin: 0; padding: 0; + min-height: 100vh; + overflow-x: hidden; } .header { + display: grid; padding: 30px; text-align: center; background: #516059; color: white; - } - +} .header h1 { font-size: 30px; - } +} +.page-container h2 { + color: #516059; +} .navbar { - float: left; - background: #ccc; - padding: 20px; - width: 150px; - + font-size: clamp(1rem, 2vh, 2rem); + background-color: #516059; } .navbar ul { + display: flex; + justify-content: space-evenly; + align-items: center; list-style-type: none; margin: 0; padding: 0; - height: 100%; - position: fixed; + padding-bottom: 0.5rem; } li a { display: block; - color: #000; - padding: 10px 0; - text-align: center; + color: #fff; + padding: 10px 10px; text-decoration: none; - width: 100%; - box-sizing: border-box; } li a:hover { - background-color: #ddd; + background-color: #ffffff; color: #516059; + border-radius: 10px; } -.main{ - text-align: center; +.page-container { + text-align: center; +} + +.input-container { + padding-top: 1rem; } -footer{ - padding: 10px ; +.input-form { + padding-bottom: 0.5rem; +} + +footer { + padding: 10px; text-align: center; background: #516059; color: white; - position:fixed; - bottom:0; + position: fixed; + bottom: 0; width: 100%; - } \ No newline at end of file +} + +/* Hamburger icon */ +.hamburger-menu { + display: none; + font-size: 25px; + cursor: pointer; + position: absolute; + top: 20px; + right: 20px; +} + +/* Mobile (Portrait and Landscape) */ +@media (max-width: 600px) { + .header h1 { + font-size: 24px; + } + + .navbar { + background-color: #516059; + } + + .navbar ul { + display: none; + flex-direction: column; + width: 100%; + text-align: center; + } + + .navbar.responsive ul { + display: flex; + } + + .hamburger-menu { + display: block; + } + + .input-container { + padding-top: 1rem; + } + + .input-form { + display: grid; + padding-inline: 5rem; + gap: 0.5rem; + } +} + +/* Tablet (Portrait and Landscape) */ +@media (min-width: 600px) and (max-width: 900px) { + /* Styles for tablets */ +} + +/* Small Desktop or Large Tablet */ +@media (min-width: 900px) and (max-width: 1200px) { + /* Styles for small desktops or large tablets */ +} + +/* Desktop (Large screens) */ +@media (min-width: 1200px) { + /* Styles for desktop devices */ +} \ No newline at end of file From d36b0fbd1c75081f2d6c4a557caabf2cf57f6a27 Mon Sep 17 00:00:00 2001 From: Matthew Clendenning <124844665+Matthew-Clendenning@users.noreply.github.com> Date: Sun, 15 Sep 2024 23:03:38 -0500 Subject: [PATCH 04/11] test --- components/classroom/README.md | 46 ++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 components/classroom/README.md diff --git a/components/classroom/README.md b/components/classroom/README.md new file mode 100644 index 0000000..c270840 --- /dev/null +++ b/components/classroom/README.md @@ -0,0 +1,46 @@ +# T-PEN Project Overview + +T-PEN (Transcription for Paleographical and Editorial Notation) is a web-based tool +designed for working with images of manuscripts. It allows users to attach transcription +data to the actual lines of the original manuscript in a simple, flexible interface. + +## T-PEN API + +The T-PEN API provides various endpoints to interact with the T-PEN system programmatically. +Here are some key features: + +- **Authentication**: Secure access to the T-PEN system. +- **Project Management**: Create, update, and manage transcription projects. +- **Image Handling**: Upload and manage manuscript images. +- **Transcription Services**: Submit and retrieve transcriptions linked to manuscript images. + +## T-PEN Data Services + +T-PEN provides multiple tools to help with transcribing and annotating manuscripts. + +- **Image Annotation**: Users can annotate specific lines or sections of manuscript images. +- **Data Export**: Transcriptions and annotations can be exported in numerous formats for further analysis or publication. +- **Collaboration Tools**: Multiple users can work on the same project, with tools for tracking changes and managing contributions. + +## Connecting to T-PEN Data Services + +1. **Create an Account**: Sign up for a T-PEN account on the website https://t-pen.org/TPEN/ +2. **Upload Manuscripts**: Upload digital images of manuscripts you wish to transcribe. +3. **Start Transcribing**: Use the transcription interface to begin transcribing the text. +4. **Annotate and Collaborate**: Utilize the annotation tools and invite collaborators to join your project. +5. **Export Data**: Once your transcription is complete, export the data in your preferred format. + +## User Guide Best Practices + +* `index.html`: The default interface to launch, +* TPEN interface suuports many files e.g. `*js`, `*.css`, `*.html`, etc., +* Configuration files: `manifest.yml` or `manifest.json` + +## Useful APIs for Classroom Group Interface + +For a classroom group interface, the following APIs might be useful: + +1. **User Management API**: To handle user authentication, roles, and permissions. +2. **Project Collaboration API**: To manage group projects, track contributions, and facilitate collaborative work. +3. **Annotation API**: To allow students to annotate and comment on manuscript images. +4. **Export API**: To enable students to export their work in various formats for presentations or further study. \ No newline at end of file From 85df676fadd9e2374fab3c4cd95ea015b09556e4 Mon Sep 17 00:00:00 2001 From: Matthew Clendenning <124844665+Matthew-Clendenning@users.noreply.github.com> Date: Sun, 15 Sep 2024 23:04:15 -0500 Subject: [PATCH 05/11] Revert "test" This reverts commit d36b0fbd1c75081f2d6c4a557caabf2cf57f6a27. --- components/classroom/README.md | 46 ---------------------------------- 1 file changed, 46 deletions(-) delete mode 100644 components/classroom/README.md diff --git a/components/classroom/README.md b/components/classroom/README.md deleted file mode 100644 index c270840..0000000 --- a/components/classroom/README.md +++ /dev/null @@ -1,46 +0,0 @@ -# T-PEN Project Overview - -T-PEN (Transcription for Paleographical and Editorial Notation) is a web-based tool -designed for working with images of manuscripts. It allows users to attach transcription -data to the actual lines of the original manuscript in a simple, flexible interface. - -## T-PEN API - -The T-PEN API provides various endpoints to interact with the T-PEN system programmatically. -Here are some key features: - -- **Authentication**: Secure access to the T-PEN system. -- **Project Management**: Create, update, and manage transcription projects. -- **Image Handling**: Upload and manage manuscript images. -- **Transcription Services**: Submit and retrieve transcriptions linked to manuscript images. - -## T-PEN Data Services - -T-PEN provides multiple tools to help with transcribing and annotating manuscripts. - -- **Image Annotation**: Users can annotate specific lines or sections of manuscript images. -- **Data Export**: Transcriptions and annotations can be exported in numerous formats for further analysis or publication. -- **Collaboration Tools**: Multiple users can work on the same project, with tools for tracking changes and managing contributions. - -## Connecting to T-PEN Data Services - -1. **Create an Account**: Sign up for a T-PEN account on the website https://t-pen.org/TPEN/ -2. **Upload Manuscripts**: Upload digital images of manuscripts you wish to transcribe. -3. **Start Transcribing**: Use the transcription interface to begin transcribing the text. -4. **Annotate and Collaborate**: Utilize the annotation tools and invite collaborators to join your project. -5. **Export Data**: Once your transcription is complete, export the data in your preferred format. - -## User Guide Best Practices - -* `index.html`: The default interface to launch, -* TPEN interface suuports many files e.g. `*js`, `*.css`, `*.html`, etc., -* Configuration files: `manifest.yml` or `manifest.json` - -## Useful APIs for Classroom Group Interface - -For a classroom group interface, the following APIs might be useful: - -1. **User Management API**: To handle user authentication, roles, and permissions. -2. **Project Collaboration API**: To manage group projects, track contributions, and facilitate collaborative work. -3. **Annotation API**: To allow students to annotate and comment on manuscript images. -4. **Export API**: To enable students to export their work in various formats for presentations or further study. \ No newline at end of file From 866269c074a2076d6faa820c47660ea8f8a0125a Mon Sep 17 00:00:00 2001 From: Matthew Clendenning <124844665+Matthew-Clendenning@users.noreply.github.com> Date: Sun, 15 Sep 2024 23:06:15 -0500 Subject: [PATCH 06/11] Revert "test back" This reverts commit 85df676fadd9e2374fab3c4cd95ea015b09556e4. --- components/classroom/README.md | 46 ++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 components/classroom/README.md diff --git a/components/classroom/README.md b/components/classroom/README.md new file mode 100644 index 0000000..c270840 --- /dev/null +++ b/components/classroom/README.md @@ -0,0 +1,46 @@ +# T-PEN Project Overview + +T-PEN (Transcription for Paleographical and Editorial Notation) is a web-based tool +designed for working with images of manuscripts. It allows users to attach transcription +data to the actual lines of the original manuscript in a simple, flexible interface. + +## T-PEN API + +The T-PEN API provides various endpoints to interact with the T-PEN system programmatically. +Here are some key features: + +- **Authentication**: Secure access to the T-PEN system. +- **Project Management**: Create, update, and manage transcription projects. +- **Image Handling**: Upload and manage manuscript images. +- **Transcription Services**: Submit and retrieve transcriptions linked to manuscript images. + +## T-PEN Data Services + +T-PEN provides multiple tools to help with transcribing and annotating manuscripts. + +- **Image Annotation**: Users can annotate specific lines or sections of manuscript images. +- **Data Export**: Transcriptions and annotations can be exported in numerous formats for further analysis or publication. +- **Collaboration Tools**: Multiple users can work on the same project, with tools for tracking changes and managing contributions. + +## Connecting to T-PEN Data Services + +1. **Create an Account**: Sign up for a T-PEN account on the website https://t-pen.org/TPEN/ +2. **Upload Manuscripts**: Upload digital images of manuscripts you wish to transcribe. +3. **Start Transcribing**: Use the transcription interface to begin transcribing the text. +4. **Annotate and Collaborate**: Utilize the annotation tools and invite collaborators to join your project. +5. **Export Data**: Once your transcription is complete, export the data in your preferred format. + +## User Guide Best Practices + +* `index.html`: The default interface to launch, +* TPEN interface suuports many files e.g. `*js`, `*.css`, `*.html`, etc., +* Configuration files: `manifest.yml` or `manifest.json` + +## Useful APIs for Classroom Group Interface + +For a classroom group interface, the following APIs might be useful: + +1. **User Management API**: To handle user authentication, roles, and permissions. +2. **Project Collaboration API**: To manage group projects, track contributions, and facilitate collaborative work. +3. **Annotation API**: To allow students to annotate and comment on manuscript images. +4. **Export API**: To enable students to export their work in various formats for presentations or further study. \ No newline at end of file From a679ba59f0945765904e677fc4055e15f8ad7f8e Mon Sep 17 00:00:00 2001 From: MutyaSowmya123 <156967848+MutyaSowmya123@users.noreply.github.com> Date: Sun, 15 Sep 2024 23:20:21 -0500 Subject: [PATCH 07/11] Create CODEOWNERS --- .github/CODEOWNERS | 1 + 1 file changed, 1 insertion(+) create mode 100644 .github/CODEOWNERS diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 0000000..cf2af6f --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1 @@ +* @MutyaSowmya123 From 9362ec9bb2c8bc4677b6481979385b9d1dc203ab Mon Sep 17 00:00:00 2001 From: Matthew Clendenning <124844665+Matthew-Clendenning@users.noreply.github.com> Date: Sun, 22 Sep 2024 13:59:11 -0500 Subject: [PATCH 08/11] made changes to landing page and README file --- components/classroom/README.md | 2 +- components/classroom/index.html | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/components/classroom/README.md b/components/classroom/README.md index c270840..2a7e0c9 100644 --- a/components/classroom/README.md +++ b/components/classroom/README.md @@ -33,7 +33,7 @@ T-PEN provides multiple tools to help with transcribing and annotating manuscrip ## User Guide Best Practices * `index.html`: The default interface to launch, -* TPEN interface suuports many files e.g. `*js`, `*.css`, `*.html`, etc., +* TPEN interface suports many files e.g. `*js`, `*.css`, `*.html`, etc., * Configuration files: `manifest.yml` or `manifest.json` ## Useful APIs for Classroom Group Interface diff --git a/components/classroom/index.html b/components/classroom/index.html index 9b7797d..ff31aad 100644 --- a/components/classroom/index.html +++ b/components/classroom/index.html @@ -14,9 +14,6 @@

TPEN Classroom Interface