diff --git a/package-lock.json b/package-lock.json index b87054be90ad3bfad24d716b699cb6053b910f1d..ae6799dd5cb4006c2b35ed0f8e731019c2b3dfff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,10 +8,12 @@ "name": "frontend", "version": "0.0.0", "dependencies": { + "axios": "^1.6.8", "bootstrap": "^5.3.3", "pinia": "^2.1.7", "vue": "^3.4.21", - "vue-router": "^4.3.0" + "vue-router": "^4.3.0", + "xml2js": "^0.6.2" }, "devDependencies": { "@rushstack/eslint-patch": "^1.8.0", @@ -2657,8 +2659,7 @@ "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", - "dev": true + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" }, "node_modules/at-least-node": { "version": "1.0.0", @@ -2688,7 +2689,6 @@ "version": "1.6.8", "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", - "dev": true, "dependencies": { "follow-redirects": "^1.15.6", "form-data": "^4.0.0", @@ -2699,7 +2699,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", - "dev": true, "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", @@ -2712,8 +2711,7 @@ "node_modules/axios/node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", - "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", - "dev": true + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" }, "node_modules/balanced-match": { "version": "1.0.2", @@ -3116,7 +3114,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", - "dev": true, "dependencies": { "delayed-stream": "~1.0.0" }, @@ -3539,7 +3536,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", - "dev": true, "engines": { "node": ">=0.4.0" } @@ -4486,7 +4482,6 @@ "version": "1.15.6", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", - "dev": true, "funding": [ { "type": "individual", @@ -5843,7 +5838,6 @@ "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", - "dev": true, "engines": { "node": ">= 0.6" } @@ -5852,7 +5846,6 @@ "version": "2.1.35", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", - "dev": true, "dependencies": { "mime-db": "1.52.0" }, @@ -6868,6 +6861,11 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "node_modules/sax": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz", + "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==" + }, "node_modules/saxes": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz", @@ -8567,6 +8565,26 @@ "node": ">=12" } }, + "node_modules/xml2js": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.6.2.tgz", + "integrity": "sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==", + "dependencies": { + "sax": ">=0.6.0", + "xmlbuilder": "~11.0.0" + }, + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/xmlbuilder": { + "version": "11.0.1", + "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz", + "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==", + "engines": { + "node": ">=4.0" + } + }, "node_modules/xmlchars": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", diff --git a/package.json b/package.json index 8aa8451a9527cc0c9c884aae659458207ce85337..9f52cb1c7a23f36ca3194ffe34a78eb863858028 100644 --- a/package.json +++ b/package.json @@ -16,10 +16,12 @@ "format": "prettier --write src/" }, "dependencies": { + "axios": "^1.6.8", "bootstrap": "^5.3.3", "pinia": "^2.1.7", "vue": "^3.4.21", - "vue-router": "^4.3.0" + "vue-router": "^4.3.0", + "xml2js": "^0.6.2" }, "devDependencies": { "@rushstack/eslint-patch": "^1.8.0", diff --git a/src/components/NewsComponents/NewsComponent.vue b/src/components/NewsComponents/NewsComponent.vue new file mode 100644 index 0000000000000000000000000000000000000000..4fe743f4a3af6146dfb226d11e5ac842e27d0677 --- /dev/null +++ b/src/components/NewsComponents/NewsComponent.vue @@ -0,0 +1,106 @@ +<script lang="ts"> +export default { + data() { + return { + articles: [] + }; + }, + mounted() { + this.fetchFinanceNews(); + // Call fetchFinanceNews() every 5 minutes (300,000 milliseconds) + // Done so the user does not need to refresh for news to be updated + // Might remove for consistent reading + setInterval(this.fetchFinanceNews, 300000); + }, + methods: { + async fetchFinanceNews() { + try { + const response = await fetch( + 'https://newsapi.org/v2/everything?q=saving%20money&pageSize=10&apiKey=f092756b3b6b41369b047cb7ae980db5' + ); + const data = await response.json(); + + //English articles, might want to translate to norwegian + this.articles = data.articles; + + + } catch (error) { + console.error('Error fetching saving money news:', error); + } + } + } +}; +</script> + + +<template> + <div class="center-box"> + <div class="box"> + <br> + <h1>Nyheter</h1> + <br> + <div v-for="(article, index) in articles" :key="index" class="article-container"> + <div class="content"> + <h3>{{ article.title }}</h3> + <p>{{ article.description }}</p> + <a :href="article.url" target="_blank">Read more</a> + </div> + <div class="image"> + <img :src="article.urlToImage" alt="Article Image"/> + </div> + </div> + </div> + </div> +</template> + +<style scoped> +.center-box { + display: flex; + justify-content: center; + align-items: center; +} + +.box { + width:90%; +} + +.article-container { + display: flex; + align-items: center; + margin-bottom: 30px; +} + +.image { + flex: 1; + text-align: center; + padding: 0 20px; +} + +.image img { + max-width: 100%; + border-radius: 1em; +} + +.content { + flex: 3; + padding: 0 20px; +} + +.content h3 { + margin-top: 0; +} + +.content a { + display: inline-block; + padding: 10px 20px; + background-color: #007bff; + color: #fff; + text-decoration: none; + border-radius: 5px; +} + +.content a:hover { + background-color: #0056b3; +} + +</style> \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index b5719b3468524ac9b958344ecafa5df349c6e0d3..83cc091e2226f9bdedf4ff60d45c2b9b83317778 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -19,6 +19,11 @@ const routes = [ name: 'not-found', component: () => import('@/views/NotFoundView.vue'), }, + { + path: '/news', + name: 'news', + component: () => import('@/views/NewsView.vue'), + }, ] }, { diff --git a/src/views/NewsView.vue b/src/views/NewsView.vue new file mode 100644 index 0000000000000000000000000000000000000000..bdfb7c611f43f0301e460f56b150a97213393a9d --- /dev/null +++ b/src/views/NewsView.vue @@ -0,0 +1,8 @@ +<script setup lang="ts"> +import NewsComponent from "@/components/NewsComponents/NewsComponent.vue"; +</script> + + +<template> + <NewsComponent></NewsComponent> +</template> \ No newline at end of file